We're upgrading our Leaflet maps to be larger on the screen and doing so in part by putting information panels, etc. over the map with varying transparencies. Obviously this is easy to do by absolutely positioning HTML next to the #map element (where the Leaflet map is put into). It can be made to lay over it nicely, however we have a Maximize control for full-screen map viewing and I'd like our custom HTML to be visible in that view as well.

I haven't seen a way to do this through the Leaflet API, itself. Thus, through experimentation, I put our custom HTML within the #map element pre-initialization. To my surprise this worked (Leaflet appends its elements within the #map element, retaining what's already there). The problem with this is that our map click event is firing even when our custom HTML elements are being clicked on. Similarly, drawing on the map functions through our custom HTML as well. This isn't the case with other Leaflet-added controls and I'm at a loss as to how to make our custom HTML likewise exempt from map interactions.

How do we get our custom HTML within scope of the Maximize functionality but outside the scope of map interactions?

We plan to use this convention heavily so this is important for us to pin down.


Your events are propagating to the map. Leaflet provides DomEvent methods to prevent this, for example (using jQuery):

$('div').each(function () {


Based on comments below, the following should also work in place of the code above:


Reference: http://leafletjs.com/reference.html#domevent-disableclickpropagation

  • That'll do it! Added dblclick and some style tweaks to reset the cursor back to the default and all seems to be working well! Thanks! – Rikaelus May 19 '15 at 3:55
  • Actually had to make one other change; used L.DomEvent.stopPropagation instead of L.DomEvent.stop. I wanted to prevent propagation into the parent but "stop" also prevented some interactions with my custom HTML; checkboxes, for instance, wouldn't work. – Rikaelus May 19 '15 at 4:32
  • Ran into another issue with this that required change, that should probably be mentioned. The code I've had (your example + using stopPropagation) had issues with mobile/touch devices. Within my divs, textboxes wouldn't have focus set when clicking on them and dropdowns couldn't be scrolled. I won't claim to know exactly why it works but it seems like replacing all of the above with just "L.DomEvent.disableClickPropagation" has made everything work right. – Rikaelus Aug 13 '15 at 17:24

Here is a plain javascript version of what toms suggested.

let divs = document.getElementById("map-id").getElementsByTagName("div");
for(let i = 0; i < divs.length; i++){
    L.DomEvent.on(divs[i], "mousedown", L.DomEvent.stop);
    L.DomEvent.on(divs[i], "click", L.DomEvent.stop);
    L.DomEvent.on(divs[i], "touchstart", L.DomEvent.stop);

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.