How to ignore mouse events on a mapbox layer

4
votes

I've built a marker on my Mapbox map that looks like this when a user mouse over it:

enter image description here

The issue I'm running into is that the document icon is a separate layer from the background pin. This is so users can upload custom icons. When using the mouseover and mouseleave events to create a hover popup on the background pin layer, the popup flickers when the user hovers over the icon layer. This is because the user is technically leaving the background pin layer.

I know there are javascript hacks to potentially do this that are messy, but what I'm really looking for is a way to "ignore" events on a mapbox layer. Is this possible?

Edit: The markers here are rendered as a Mapbox layer, not as HTML markers and are thus drawn using the canvas (I believe), so using CSS to ignore events is not possible.

2
javascriptmapboxmapbox-gl-js
It'd be a bit clearer what's going on if you include your code. - Steve Bennett

2 Answers

1
votes

Instead of registering events per layer, you could register the mousemove event without specifying the layer and use queryRenderedFeatures to see if the cursor is on either of your two layers.

Another approach is use a technique like https://www.mapbox.com/mapbox-gl-js/example/add-image/ and create a composited image client side so you only have the one layer.

2
votes

A simple way to ignore mouse events using CSS is to use the style property pointer-events:none this will not trigger any pointer(mouse) events on the element