diff --git a/test/examples/popup-on-hover.html b/test/examples/popup-on-hover.html index e83e3f20dd..8ccba37342 100644 --- a/test/examples/popup-on-hover.html +++ b/test/examples/popup-on-hover.html @@ -158,30 +158,39 @@ closeOnClick: false }); - map.on('mouseenter', 'places', (e) => { - // Change the cursor style as a UI indicator. - map.getCanvas().style.cursor = 'pointer'; + // Make sure to detect marker change for overlapping markers + // and use mousemove instead of mouseenter event + let currentFeatureCoordinates = undefined; + map.on('mousemove', 'places', (e) => { + const featureCoordinates = e.features[0].geometry.coordinates.toString(); + if (currentFeatureCoordinates !== featureCoordinates) { + currentFeatureCoordinates = featureCoordinates; - const coordinates = e.features[0].geometry.coordinates.slice(); - const description = e.features[0].properties.description; + // Change the cursor style as a UI indicator. + map.getCanvas().style.cursor = 'pointer'; - // Ensure that if the map is zoomed out such that multiple - // copies of the feature are visible, the popup appears - // over the copy being pointed to. - while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { - coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; - } + const coordinates = e.features[0].geometry.coordinates.slice(); + const description = e.features[0].properties.description; + + // Ensure that if the map is zoomed out such that multiple + // copies of the feature are visible, the popup appears + // over the copy being pointed to. + while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { + coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; + } - // Populate the popup and set its coordinates - // based on the feature found. - popup.setLngLat(coordinates).setHTML(description).addTo(map); + // Populate the popup and set its coordinates + // based on the feature found. + popup.setLngLat(coordinates).setHTML(description).addTo(map); + } }); map.on('mouseleave', 'places', () => { + currentFeatureCoordinates = undefined; map.getCanvas().style.cursor = ''; popup.remove(); }); }); - \ No newline at end of file +