Fix display a popup on hover example

maplibre · Feb 1, 2025 · f04108c · f04108c
1 parent 4db36c3
commit f04108c
Showing 1 changed file with 26 additions and 15 deletions.
diff --git a/test/examples/popup-on-hover.html b/test/examples/popup-on-hover.html
@@ -158,30 +158,41 @@
             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) => {
+            if (e.features && e.features.length > 0) {
+                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();
         });
     });
 </script>
 </body>
-</html>
+</html>