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:


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


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:

    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.

  • thumbs up for the simplicity of the solution. Thanks! – yellowcap Oct 3 '14 at 13:45
  • Thank you for the clarification. Bare img tag was too universal for me, too. – Gabor Farkas Oct 3 '14 at 14:05

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

L.geoJson(gisData, {
    pane: 'apane',
    onEachFeature: someFunction,
    interactive: false

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.