[GIS] Leaflet: how can I find all geo-json features at a certain position

geojsonleaflet

For a small project we are using leaflet with geojson features instead of openlayers backed by geoserver.

Now, when I click in the map, I want to see a list of all features in that position.

I use the onEachFeature to attach a popup to all visible features (in separate layers), but not entirely unexpected, only the top-item catches this click-event and shows the popup.

I have been looking in the documentation and searching for examples, but I did not find something useable. In the openlayers+geoserver I would use the WFS service to get all features, and then I would display the returned result.

Do I need to switch to geoserver, or is this possible with geojson features (in leaflet) as well?

Best Answer

You can simply proceed in 2 steps:

  1. Attach an extra "click" event listener on your features (or directly on the group if it is an L.GeoJSON or an L.FeatureGroup).
  2. In that listener callback, use Mapbox Leaflet PIP (Point In Polygon) plugin to retrieve all features that contain the latlng position of the click. Note that PIP expects an L.geoJson as 2nd argument.

No need for a geoserver, everything client side.

If you want the found features to open their popup, simply loop through the resulting array and use layer.openPopup(). But you will need a hack to allow multiple popups to be opened simultaneously.

groupGeoJson.on("click", function (event) {
    var latlng = event.latlng,
        layersArray = leafletPip.pointInLayer(latlng, groupGeoJson);

    layersArray.forEach(function (layer) {
        layer.openPopup();
    });
});

Demo: http://jsfiddle.net/ve2huzxw/51/

(the above demo includes the hack from http://bl.ocks.org/mpmckenna8/9395643 to allow multiple open popups)

Related Question