How to let leaflet layer events to propagate to layer below

Question

I am working on a leaflet map with three layers: a base tile-layer, a GeoJson layer and a label tile-layer. For display, I want the label layer to be on top, but for interaction I would like to let click events on the map to propagate to the GeoJson layer, to show popups.

Here is an adaption of the leaflet geojson example that illustrates my problem:

http://jsfiddle.net/3h6yytg3/

Is there any way to show the GeoJson popups with a setup similar to this?

Answer 1

Just a little CSS workaround will do the job for you. You can see the result in the following fiddle: http://jsfiddle.net/GFarkas/kkwgc1nh/

I made all of the images irresponsible to pointer events, so the clicks will fall through them and will activate the popup contents of the GeoJSON layer. The CSS code is:

img.leaflet-tile{
    pointer-events: none;
}

Original credit: https://stackoverflow.com/questions/1401658/html-overlay-which-allows-clicks-to-fall-through-to-elements-behind-it

You can also see the browser version limits here: http://caniuse.com/#feat=pointer-events.

Answer 2

Another and perhaps better way through Leaflet code directly is to use the interactive flag.

L.geoJson(gisData, {
    pane: 'apane',
    onEachFeature: someFunction,
    interactive: false
}).addTo(something);