Clicking through one layer onto another in Leaflet?

Question

I have a map with a polygon layer and a marker layer. They are both derived from GeoJSONs, which are identical in every way except for the geometry (the marker layer is simply the centroids of the polygon layer). I currently have some functionality for the user to click on the polygon layer, and the selected polygon is coloured, added to some tracking arrays, and some summary information derived from the GeoJSON layer is displayed elsewhere.

The problem is that the associated marker layer is quite large, and makes it annoying to click on the polygons. (See image below)

Clicking on the markers does not count as a click on the polygon layer. Rather than having to write some new functions to deal with grabbing values from the marker layer and looking them up in the polygon layer to do the same thing, I would rather just somehow "click through" the marker layer directly onto the polygon layer underneath, or somehow forward the click coordinates to it.

I am aware of the fireEvent method in Leaflet, but I cannot seem to figure out a way to use it to send the click coordinates to the polygon layer. Has anybody done something like this before, or perhaps have a better approach?

By the way, I have already seen Trigger a click event on a leaflet map? which appears to be the same, but if you read the accepted answer, the author was simply overcomplicating a routine task, and so the question of "triggering a click event with coordinates" was never actually answered

This is the code I am working with now, it doesn't work, but I can't find any working examples of passing a click to a layer:

onEachFeature: function(feature, layer) {

            layer.bindTooltip(feature.properties.name, {
                sticky: true
            });

            layer.on('click', function (e) {

                console.log(e);
                var lat = e.latlng.lat;
                var lng = e.latlng.lng;

                var latlngPoint = new L.LatLng(lat, lng);
                console.log(latlngPoint);

                markerPolygonLayer.fireEvent('click', {
                    latlng: latlngPoint,
                    layerPoint: map.latLngToLayerPoint(latlngPoint),
                    containerPoint: map.latLngToContainerPoint(latlngPoint)
                });

            });

        },

score 3 · Accepted Answer · answered Jan 07 '18 at 20:22

I had same issue myself. When creating point, add interactive: false. The click ignores marker and picks up underlying polygon

$.getJSON(parceldataurl, function (parceldata) {

            L.geoJson(parceldata, {
                style: style,

                onEachFeature: function (feature, layer) {


                    if (feature.properties.owner_type === "A") {

                        if (feature.geometry.type === 'MultiPolygon') {
                            var centroid = turf.centroid(feature);
                            var lon = centroid.geometry.coordinates[0];
                            var lat = centroid.geometry.coordinates[1];

                            L.marker([lat, lon,], {
                                icon: greenTree,
                                title: feature.properties.grantor,
                                riseOnHover: true,
                                interactive: false,

                            }).addTo(map);
                        }

                    } else if (feature.properties.owner_type === "B") {
                        if (feature.geometry.type === 'MultiPolygon') {
                            var centroid = turf.centroid(feature);
                            var lon = centroid.geometry.coordinates[0];
                            var lat = centroid.geometry.coordinates[1];

                            L.marker([lat, lon,], {
                                icon: redTree,
                                title: feature.properties.grantor,
                                riseOnHover: true,
                                interactive: false,
                            }).addTo(map);
                        }


                    } else {
                        if (feature.geometry.type === 'MultiPolygon') {
                            var centroid = turf.centroid(feature);
                            var lon = centroid.geometry.coordinates[0];
                            var lat = centroid.geometry.coordinates[1];
                            L.marker([lat, lon,], {
                                icon: blueTree,
                                title: feature.properties.BCT,
                                riseOnHover: true,
                                interactive: false,
                            }).addTo(map);

                        }
                    }...

Hmmm... this does technically answer my question, since it allows the click to propagate through the marker, but I just realized something else - the marker is often wider or taller than its corresponding polygon. So if you were to click the marker on a part of it that covers a different polygon, you would get the wrong polygon. Thanks for your answer but I guess it isn't enough for my purposes. I will mark it as accepted anyway, but I will have to figure something else out. — wfgeo, Jan 07 '18 at 22:24
This was exactly the answer I needed to get my clicks to pass through a layer containing only an outline, to trigger a popup on objects lower down the layer stack. Thanks! — Nick K9, May 23 '19 at 16:30

score 1 · Answer 2 · answered May 27 '19 at 01:23

This inability to handle the covered layers seems to be because of an known issue of leaflet:

Related to: #5739, #5752

This is definitely an issue. Adding any kind of canvas layer blocks events to any other layers below it in the stack

There is an event forwarding PR (#6012) that was previously considered but needs further work.

There is a leaflet plugin for forwarding events to the layers below. Using leaflet-event-forwarder.js from its dist folder, and the following code, I was able to get the covered layers respond to click event:

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

// enable event forwarding
myEventForwarder.enable();

Clicking through one layer onto another in Leaflet?

2 Answers2