Having created an application using MapBox GL JS, I have placed numerous markers all around the globe. As the mouse hovers over these markers, a description box pops up, which is what I intended. However, I am encountering an issue where these labels flicker when zooming in/out or navigating the map, making it quite bothersome.
I am seeking a simple and effective solution to prevent this annoyance. One idea could be implementing a delay in displaying the description box after hovering over a marker for a certain number of milliseconds. Another approach could involve utilizing a built-in feature to determine whether the mouse cursor is stationary or moving. Clicking on the labels is not preferred as it would only add to the inconvenience.
Below is the current code snippet I am using:
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 issue must be quite common. Is there any known or creative way to address this problem without causing further irritation? Requiring the cursor to remain still above the label before showing it would essentially mimic a click action, which is not ideal. Moreover, I am already using the click event for a different function ("open related URL").