index.html

@@ -635,7 +635,6 @@ const OVERLAYS = [
     iconSvg: SHELL_ICON_SVG, nameKey: 'name', defaultOn: false },
   // future layers: add { id, label, url, iconSvg, nameKey, defaultOn } here.
 ];
-let overlayPopup = null;  // single reused hover popup for overlay points (only one ever shown)
 
 function registerOverlayIcon(def) {
   return new Promise(resolve => {
@@ -668,18 +667,14 @@ async function addOverlay(def) {
         'visibility': def.defaultOn ? 'visible' : 'none',
       },
     });
-    // Hover (not click) shows a single label — one reused popup, so only ever
-    // one is visible; mousemove keeps it on whichever station is under the cursor.
-    map.on('mouseenter', lyrId, () => { map.getCanvas().style.cursor = 'pointer'; });
-    map.on('mousemove', lyrId, e => {
-      const f = e.features[0]; if (!f) return;
-      const p = f.properties || {};
-      if (!overlayPopup) overlayPopup = new maplibregl.Popup({ closeButton: false, closeOnClick: false, offset: 12 });
-      overlayPopup.setLngLat(f.geometry.coordinates)
+    map.on('click', lyrId, e => {
+      const p = (e.features[0] && e.features[0].properties) || {};
+      popup.setLngLat(e.lngLat)
         .setHTML(`<div class="ov-pop"><b>${escapeHtml(p[def.nameKey] || def.label)}</b><div class="ov-sub">${escapeHtml(p.brand || 'fuel station')}</div></div>`)
         .addTo(map);
     });
-    map.on('mouseleave', lyrId, () => { map.getCanvas().style.cursor = ''; if (overlayPopup) overlayPopup.remove(); });
+    map.on('mouseenter', lyrId, () => { map.getCanvas().style.cursor = 'pointer'; });
+    map.on('mouseleave', lyrId, () => { map.getCanvas().style.cursor = ''; });
   }
   buildLayersControl();
 }