Flyer event: how to propagate to overlapping layers
Let's say I have multiple overlapping layers and each layer has a click event. When I click on the map, I would like to know which layers are being clicked on, although the click event stops after the first layer and does not propagate to the layers below. How can I achieve this?
Here is a sample script and its code: https://jsfiddle.net/r0r0xLoc/
<div id="mapid" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap).on('click', function() {
console.log('clicked on 1st polygon')
});
L.polygon([
[51.609, -0.1],
[51.503, -0.06],
[51.51, -0.047]
]).addTo(mymap).on('click', function() {
console.log('clicked on 2nd polygon')
});
</script>
If you click on each polygon, you will see a corresponding message. If you click the overlapping portion, you only see the message for the second polygon.
source to share
You have to listen directly to the map event "click"
and "manually" determine which layers contain the position.
You can use leaflet-pip plugin (point in polygon) for example for this definition:
map.on("click", function (event) {
var clickedLayers = leafletPip.pointInLayer(event.latlng, geoJSONlayerGroup);
// Do something with clickedLayers
});
Demo: https://jsfiddle.net/ve2huzxw/526/ (listening "mousemove"
instead "click"
)
source to share
There is a leaflet plugin to propagate events to underlying layers: https://github.com/danwild/leaflet-event-forwarder
You can use it in your JavaScript to enable event dispatch, for example:
const myEventForwarder = new L.eventForwarder({
map: map,
events: {click: true, mousemove: false}
});
source to share