diff --git a/kort7/app.js b/kort7/app.js index d4f387d..0e12b10 100644 --- a/kort7/app.js +++ b/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); } }); diff --git a/kort7/kort7.html b/kort7/kort7.html index 993e594..b95956e 100644 --- a/kort7/kort7.html +++ b/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);