I have made an application with MapBox GL JS. I have tons of markers all over the world. When the mouse cursor hovers over them, I have them pop up a box with a description. This is normally what I want, but when zooming in/out and moving around the map, I frequently see these labels flickering as they are displayed and hidden while the mouse cursor moves around. This is very annoying.
I’m trying to find a good and simple way to prevent this, perhaps by requiring some amount of milliseconds of hovering over the marker before this happens. Or perhaps by using some sort of built-in “is the mouse cursor still or moving around” flag. I do not want to require me to actually click the labels, because that would soon become even more annoying.
I currently use this code:
map.on('mouseenter', layerId, (e) =>
{
map.getCanvas().style.cursor = 'pointer';
const coordinates = e.features[0].geometry.coordinates.slice();
const description = e.features[0].properties.description;
const name = e.features[0].properties.name;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; }
popup.setLngLat(coordinates).setHTML(name).addTo(map);
});
map.on('mouseleave', layerId, () =>
{
map.getCanvas().style.cursor = '';
popup.remove();
});
This must be a common problem. Do you know about, or can you think of, some way to solve this which isn’t annoying? If I have to hover the cursor standing still above the label to show it, I might as well require a click. But that’s already disqualified. Plus I already use the click event for a different thing (“open related URL”).