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:

<div id="mapid" style="width: 600px; height: 400px;"></div>

  var mymap ='mapid').setView([51.505, -0.09], 13);

  L.tileLayer('{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="">OpenStreetMap</a> contributors, ' +
      '<a href="">CC-BY-SA</a>, ' +
      'Imagery © <a href="">Mapbox</a>',
    id: 'mapbox.streets'

    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
  ]).addTo(mymap).on('click', function() {
    console.log('clicked on 1st polygon')

    [51.609, -0.1],
    [51.503, -0.06],
    [51.51, -0.047]
  ]).addTo(mymap).on('click', function() {
    console.log('clicked on 2nd polygon')



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

2 answers

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: (listening "mousemove"

instead "click"




There is a leaflet plugin to propagate events to underlying layers:

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}




All Articles