[GIS] Custom HTML Within Leaflet Map

htmlleaflet

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.

Best Answer

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

$('div').each(function () {
    L.DomEvent.on(this,'mousedown',L.DomEvent.stop);
    L.DomEvent.on(this,'click',L.DomEvent.stop);
    L.DomEvent.on(this,'touchstart',L.DomEvent.stop);
});

UDPATE

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

L.DomEvent.disableClickPropagation();

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

Related Question