React-mapbox-gl: onMouseEnter only called once when moved over overlapping circles

[dedan]

I'm currently plotting a lot of points on a map and some of them are overlapping each other. I want to show a popup when I hover over the points. Now I noticed that onMouseEnter is not called when I move the mouse from one circle to another, when the two are overlapping and onMouseLeave is not called in between.

I prepared an example for you. You have to zoom in a little bit until the circles look like for example in the following image. When you move your mouse horizontally over the circles, I would have expected a second console output as soon as the mouse is over an areas that is only covered by the second circle. However it isn't.

Am I doing it wrong again or is this really a bug?

Thanks for the great work and your fast responses, that's awesome!

[alex3165]

Yes this is an issue due to the way we listen onMouseEnter and onMouseLeave in the Layer. React-mapbox-gl use the layer id to listen for those events so as long as your mouse is on one of the feature in the layer no event is being triggered.

A fix would be to remove the layerId being passed to the mouse event listener but I am affraid it would have some performance impacts, I would need to check this and I will prioritise this issue.

[dedan]

Ok, thanks a lot for the update

[SBRK]

For this kind of thing, I use a GeoJSONLayer and listen to onMouseMove and onMouseLeave. In your mousemove event handler, you get the hovered feature with event.features[0] (and can access other features that are hovered (if any) with [1], [2], etc...). mouseleave is triggered when no feature is hovered

[daniel-hauser]

When #675 will be released, you can solve your problem by adding onMouseEnter and onMouseLeave to the <Layer> component.

[vasturiano]

It seems this issue still persists with the latest version of the lib (4.2.0). Either with the Layer or the Feature, the onMouseEnter/Leave events do not get triggered when moving the mouse between directly connected features without a gap.

Any plans on addressing this issue?

[talmr-k]

I am having the same issue, tried both events on the <Layer /> and the <Feature />

Has anyone found a good way to handle this?