I am adding layers to a map, one which uses this third party Leaflet extension for UTF grids: https://github.com/danzel/Leaflet.utfgrid.
The layer with the UTF grid has a higher z-index and has a bunch of points on it the user can click. The layer that's supposed to be underneath it has a lower z-index and is just a TileLayer. The issue I am having is that both layers are receiving the event, despite adding L.DomEvent.preventDefault(e) and L.DomEvent.stopPropagation(e) to the click handlers for each.
In my first class representing the layer I want on top, the initialization looks like this:
this.tileLayer = L.tileLayer(getTileUrl(mapFile), {
attribution,
zIndex, // value is 7
});
this.utfGridLayer = L.utfGrid(
gridUrl,
{
useJsonP: false,
}
);
Later in the code, I set up a click handler:
this.utfGridLayer.on("click", (e) => {
L.DomEvent.preventDefault(e);
L.DomEvent.stopPropagation(e);
// ...snip
});
In the other layer I want to show below it, the instantiation looks like this:
this.tileLayer = L.tileLayer(
url,
{
attribution,
zIndex,/// set to 2
opacity: 0.7,
subdomains: "1234",
}
Later in the code, I set up the click handler:
map.on("click", (e) => {
L.DomEvent.preventDefault(e);
L.DomEvent.stopPropagation(e);
// ...snip
});
It's not clear to me what adding a layer does to the map. The div for it has a height and width of 0 and so I am not sure how events are supposed to work.
How should one add a layer to the map and get it to be "topmost" in terms of whether or not it gets to handle an event first?
