Stop event propagation

[glops]

Hello

First, thanks for this great library !

I have multiple layers placed on top of each other. I would like to stop event propagation.

Here is a demo of the problem : svelte-mapping-multi-layer-event

It draws a red square on top of a green square. When you click at the intersection of both squares, both events are triggered.

I have tried several methods like :

    event.stopImmediatePropagation()
    event.stopPropagation()
    event.preventDefault()
    event.detail.event.originalEvent.stopImmediatePropagation()
    event.detail.event.originalEvent.stopPropagation()

But nothing works. Do you know how to achieve this ?

In svelte-leaflet, there is an option for this :

options={{ bubblingMouseEvents: false }}

[dimfeld]

Yeah, it's very different with MapLibre/Mapbox because they're using WebGL, so all the normal DOM methods don't apply. One potential technique is to use a click handler for all the layers that uses map.queryRenderedFeatures to find the topmost layer from all the layers, as detailed in this Stackoverflow answer.

This feels potentially useful as something to support doing within this library itself, but I would have to think about the best way to manage the information about which layers to query. But in the meantime, I hope this helps!

[dimfeld]

I just published version 0.3.4, which lets you set eventsIfTopMost on a layer to get the behavior you're looking for. There's an example on the website. Thanks for the suggestion!

[glops]

Thank you it works great !