Leaflet event: how to propagate to overlapping layers

Question

Let\'s say I have some overlapping layers and each layer has a click event. When I click on the map, I\'d like to know which layers are clicked on, though the click event st

Answer 1

There is a leaflet plugin for propagating events to the underlying layers: https://github.com/danwild/leaflet-event-forwarder

You can use it in your javascript to enable event-forwarding, e.g.:

const myEventForwarder = new L.eventForwarder({
  map: map,
  events: {click: true, mousemove: false}
});

Answer 2

You have to listen directly to the map "click" event and to "manually" determine which layers contain the clicked position.

You can use leaflet-pip plugin (point in polygon) for example for this determination:

map.on("click", function (event) {
  var clickedLayers = leafletPip.pointInLayer(event.latlng, geoJSONlayerGroup);
  // Do something with clickedLayers
});

Demo: https://jsfiddle.net/ve2huzxw/526/ (listening to "mousemove" instead of "click")