Handling mouse events in multiple overlapping shapes?

[Steve Mitchell]

A co-worked asked about getting mouseover to work on overlapping shapes to highlight all shapes under the mouse, even if they are overlapping. I have a working demo where only the top shape handles the event here: http://exploringspatial.com/#demo/7

Is there a way for a shape to propagate the event when it is done handling it? I thought of adding the mouseover event to the map, but then I would need a way to iterate through all the shapes on the map to test if any covered the mouse event.

Any suggestions?

[ghybs]

Hi,

You could indeed use "mousemove" map event, with Mapbox Leaflet PIP (Point In Polygon) plugin https://github.com/mapbox/leaflet-pip to find the layer(s) from your L.geoJson layer that contain the mouse position.

Here is a quick (and dirty) example: http://jsfiddle.net/ve2huzxw/25/

Hope this helps.

[Steve Mitchell]

Perfect. That is just what I needed. I'll dig into your example this weekend and incorporate it into my demo page. Thank you very much.

[Steve Mitchell]

Thank you to ghybs for helping me. I used his jsfiddle approach to finish my demo: http://exploringspatial.com/#demo/7. The guts of my demo code can be found in this Backbone view. https://github.com/smitchell/exploringspatial/blob/master/js/views/maps/CountiesMapLayerView.js