0

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?

1

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)

  • Ow thanks, this looks promising and will get me started. I will get back to you once I had a good look at it! – nathanvda Nov 25 '15 at 21:19

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.