Fix off-map indicator popup behavior

kort7/app.js

@@ -23,14 +23,20 @@ const playBtn = document.getElementById("playBtn");
 const pauseBtn = document.getElementById("pauseBtn");
 const resetBtn = document.getElementById("resetBtn");
 
+let forcedPopupVehicle = null;
+
 function openVehiclePopup(name) {
   const v = vehicles[name];
   if (!v) return;
 
+  forcedPopupVehicle = name;
+
   if (!map.hasLayer(v.marker)) {
     v.marker.addTo(map);
   }
 
+  v.marker.setOpacity(1);
+  v.marker.setZIndexOffset(1000);
   v.marker.setLatLng([v.displayLat, v.displayLon]);
   setHeading(v.marker, v.displayHeading);
   v.marker.setPopupContent(popupHtml(v.name, v));
@@ -413,14 +419,20 @@ function updateVehicleDisplay(v) {
   v.presenceState = presence.code;
   v.presenceStateLabel = presence.label;
 
-  if (presence.code === "inside") {
+  const shouldForcePopup = forcedPopupVehicle === v.name;
+
+  if (presence.code === "inside" || shouldForcePopup) {
     if (!map.hasLayer(v.marker)) {
       v.marker.addTo(map);
     }
+    v.marker.setOpacity(1);
+    v.marker.setZIndexOffset(shouldForcePopup ? 1000 : 0);
     v.marker.setLatLng([lat, lon]);
     setHeading(v.marker, heading);
     v.trail.setStyle({ opacity: 0.85 });
   } else {
+    v.marker.closePopup();
+    v.marker.setZIndexOffset(0);
     if (map.hasLayer(v.marker)) {
       map.removeLayer(v.marker);
     }
@@ -537,6 +549,14 @@ offmapIndicatorsEl.addEventListener("click", (event) => {
   openVehiclePopup(vehicleName);
 });
 
+map.on("popupclose", (event) => {
+  const popupVehicle = Object.values(vehicles).find(v => v.marker === event.popup._source);
+  if (popupVehicle && forcedPopupVehicle === popupVehicle.name) {
+    forcedPopupVehicle = null;
+    updateVehicleDisplay(popupVehicle);
+  }
+});
+
 map.on("moveend zoomend", () => {
   for (const name of vehicleNames) {
     updateVehicleDisplay(vehicles[name]);

kort7/tests/kort7.spec.js

@@ -104,5 +104,8 @@ test.describe('kort7 vehicle map', () => {
     await expect(popup).toContainText('Bil 9');
     await expect(popup).toContainText('Usikkerhed:');
     await expect(popup).toContainText('På kortet:');
+
+    const visibleMarkerCount = await page.locator('.leaflet-marker-icon').count();
+    expect(visibleMarkerCount).toBeGreaterThan(0);
   });
 });