1

I am trying to catch intersecting features. So when a user clicks on the map I would like to identify all layers that has been clicked on, and show the menu - from which parcel the user wants to get info. For example, in the picture below, there should be 3 options:

  1. Click outside of polygons: 0 intersection features (click doesn't intersect with any layer).
  2. Click inside the polygon: 1 intersection feature (user's click intersects with 1 layer), so intersectingFeatures array has 1 object.
  3. Click on the point: 2 intersecting features: Polygon and Point (user's click intersects with 2 layers), so intersectingFeatures array has 2 objects.

But somehow I can't catch intersection with Point. Function intersects() just doesn't recognize intersection with Point. Is there any other way to capture click intersection with Point geometry type? (catch intersection with Polygon works perfectly though).

   useMapEffect(({instance}) => { // instance is a Map object

    const onClick = (e: any) => {
        const clickBounds = L.latLngBounds(e.latlng, e.latlng);
        intersectingFeatures = [];

        for (const l in (instance as any)._layers) {
            const overlay = (instance as any)._layers[l];

            if (overlay.feature) {
                let bounds;
                
                if (overlay.getBounds) {
                    bounds = overlay.getBounds();
                } else if (overlay._latlng) { // for Point
                     bounds = L.latLngBounds(overlay._latlng, overlay._latlng);
                }
                
                 if (bounds && clickBounds.intersects(bounds)) {
                     intersectingFeatures.push(overlay);
                 }
            }
        }
        console.log(intersectingFeatures);
    }

    instance.on("click", onClick);

    return () => {
        instance.off("click", onClick);
    }    }, [intersectingFeatures]);

enter image description here

The same with leaflet-pip library. If I use it this way (instead of intersects() function), Point features also doesn't fall into results array, Polygons only.

const results = leafletPIP.pointInLayer(e.latlng, L.geoJSON(overlay.toGeoJSON()));
New contributor
Konstantin Biriukov is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
4
  • How is circle defined? As L.circleMarker? If so, it has no dimension regarding vector layer, it's only a point.
    – TomazicM
    2 days ago
  • @TomazicM, exactly, it is defined as L.circleMarker. I thought since circleMarker has radius, it is not a simple Point, and it can be used in this case. What would be the best approach then? yesterday
  • Here it gets a bit complicated if you want to have marker size in pixels, since at each zoom level it covers different map area. In short, for each zoom level you would have to calculate marker radius in meters, create buffer with that radius around the point and check if click coordinate falls within it. turf.js library can help you with that.
    – TomazicM
    yesterday
  • If you would define your circle as L.circle, this would make it a vector layer with dimensions, but then it's size on screen would change with zoom change.
    – TomazicM
    yesterday

0

Your Answer

Konstantin Biriukov is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.