target several overlapping features in leaflet simultaneously

Question

I am new to leaflet, but am trying to implement a use case that I've been unable to find any examples or questions about here. Thank you in advance for helping with this question:

A live demo is here, and here's the code of interest in the GitHub repository.

As you mouseover the various geoJSON features, I use onEachFeature to change styling to 'highlight' that featured area on the map, and to display its name in the upper right info box:

function onEachFeature (feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight
    });
    layer.bindPopup(feature.properties.f2,customOptions);
}

var geojson;
geojson = L.geoJson(myData,{
    style: style,
    onEachFeature: onEachFeature,
}).addTo(map);

The problem arises where features overlap. When mousing over the overlapping regions only one is targeted. Instead, I would like all features overlapping at the cursor's position to be 'highlighted'; and to be able to list all the names in the info box.

I'm guessing that the solution is more like that I should retrieve the latlng on all mousemove events, determine if the latlng is in the boundary of any geoJSON objects, and if so, iterate through those highlighting and getting the names for all. I'm not sure if there is a plugin that can handle this more elegantly for me.

Is there anyway to target multiple overlapping geoJSON layers simultaneously in Leaflet?

Answer 1

You described an easy way, and I recommend you use it. I propose just one optimization for you.
Don't catch all mousemove events. You need a mouseover on each feature, and then check if there are other features overlapped by it.

 function onEachFeature (feature, layer){
    layer.on('mouseover',function(e){
      var point = e.latlng;
      map.eachLayer(function(layer){
        var bounds = layer.getBounds();
        if(bounds.contains(point))
           highlite(layer);
      })
    })
 }

Another way is to use the L.Canvas renderer and extend it so that it fires mouseover or other handlers for each layer under the pointer.