Make off-map indicator clicks visually obvious

kort7/app.js

@@ -10,6 +10,7 @@ const COLORS = {
 };
 
 const map = L.map("map").setView([55.6761, 12.5683], 13);
+window.__debugMap = map;
 
 L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
   attribution: "© OpenStreetMap contributors",
@@ -25,6 +26,13 @@ const resetBtn = document.getElementById("resetBtn");
 
 let forcedPopupVehicle = null;
 
+function highlightOffmapIndicator(name) {
+  const buttons = offmapIndicatorsEl.querySelectorAll('.offmap-indicator');
+  buttons.forEach((button) => {
+    button.classList.toggle('active', button.dataset.vehicle === name);
+  });
+}
+
 function flashVehicleMarker(v) {
   const markerEl = v.marker.getElement();
   if (!markerEl) return;
@@ -39,19 +47,31 @@ function openVehiclePopup(name) {
   if (!v) return;
 
   forcedPopupVehicle = name;
+  highlightOffmapIndicator(name);
 
   if (!map.hasLayer(v.marker)) {
     v.marker.addTo(map);
   }
 
-  map.panTo([v.displayLat, v.displayLon], { animate: true, duration: 0.4 });
+  const focusBounds = L.latLng(v.displayLat, v.displayLon).toBounds(Math.max(v.current.uncertaintyM * 0.6, 1200));
+  map.fitBounds(focusBounds, {
+    animate: true,
+    duration: 0.5,
+    paddingTopLeft: [290, 60],
+    paddingBottomRight: [80, 80],
+    maxZoom: 13
+  });
+
   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));
-  v.marker.openPopup();
-  requestAnimationFrame(() => flashVehicleMarker(v));
+
+  window.setTimeout(() => {
+    v.marker.openPopup();
+    flashVehicleMarker(v);
+  }, 180);
 }
 
 function carIcon(color) {
@@ -564,6 +584,7 @@ map.on("popupclose", (event) => {
   const popupVehicle = Object.values(vehicles).find(v => v.marker === event.popup._source);
   if (popupVehicle && forcedPopupVehicle === popupVehicle.name) {
     forcedPopupVehicle = null;
+    highlightOffmapIndicator(null);
     updateVehicleDisplay(popupVehicle);
   }
 });

kort7/kort7.html

@@ -94,6 +94,12 @@
       box-shadow: 0 8px 20px rgba(0,0,0,0.28);
     }
 
+    .offmap-indicator.active {
+      outline: 2px solid rgba(255,255,255,0.9);
+      outline-offset: 2px;
+      transform: translateY(-1px) scale(1.02);
+    }
+
     .offmap-indicator.covers {
       background: rgba(0, 72, 36, 0.9);
       border-color: rgba(76, 175, 80, 0.55);