0

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?

5
  • Layer added to the map first is "topmost" regarding event processing.
    – TomazicM
    Oct 14, 2023 at 20:08
  • I don't know that that's true. I have an older version of this app that I am updating and even when the layer that's supposed to be lower shows up later in the DOM, the correct layer gets the event first. In my version, regardless of when the one that's supposed to be on top, the one that's supposed to be lower is still getting the event. Oct 15, 2023 at 19:18
  • Please post reproducible code of what are you describing so it can be reproduced.
    – TomazicM
    Oct 15, 2023 at 19:33
  • Unfortunately, I have not been able to identify what made it work in the old code, so I am not sure what to post. Oct 16, 2023 at 14:30
  • Post the new code that does not work as expected and describe exactly where it goes wrong.
    – TomazicM
    Oct 16, 2023 at 14:33

1 Answer 1

0

I was able to resolve this by saving the event.originalEvent.timeStamp and ignoring any events that came after which had exactly the same time stamp. Kind of hacky, but it works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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