[GIS] How to identify overlapping GeoJSON layers in Leaflet

geojsonidentifyleaflet

I have a Leaflet map containing overlapping GeoJSON layers. How can I identify all features at the location clicked?

See http://jsbin.com/zavuda/edit?html,js,output for a demo using Leaflet sample data.

Note that the Campus layer can be clicked when it's the top layer, and its attributes are shown via the layer's onEachFeature function.

enter image description here

Then use the toggle under the map to switch on the States layer, which overlaps the Campus layer. After this the Campus layer can no longer be clicked on.

enter image description here

Is it possible to run an "identify" query at the location clicked by the user, and return all intersecting features?

Best Answer

Unless there is some built-in way of doing this that I'm not aware of, my rough approach would be to use something like leaflet-pip to do the following:

  1. Keep a list of all layers that you want to query
  2. Set a click handler on the map to get the lat-lng of a clicked point
  3. Take the clicked point, and check each layer for a returned polygon
  4. Collect any positive hits and return

Leaflet-pip example:

var gjLayer = L.geoJson(statesData);
var results = leafletPip.pointInLayer([-88, 38], gjLayer);
// results is an array of L.Polygon objects containing that point
Related Question