Highlight off-map indicator selection

kort7/app.js

@@ -151,6 +151,8 @@ function renderSelectedVehicleInfo(selection) {
     Usikkerhed: ${selection.state.current.uncertaintyM} m<br>
     Status: ${selection.state.presenceStateLabel}
   `;
+
+  selectedVehicleInfoEl.scrollIntoView({ block: "nearest" });
 }
 
 function createView({ id, label, positionKey, alertsEl, indicatorsId }) {
@@ -353,6 +355,13 @@ function updateVehicleDisplay(view, v) {
   syncUncertaintyCircle(view, v);
 }
 
+function setActiveIndicator(view, vehicleName) {
+  const buttons = view.indicatorsEl.querySelectorAll('.offmap-indicator');
+  buttons.forEach((button) => {
+    button.classList.toggle('active', button.dataset.vehicle === vehicleName);
+  });
+}
+
 function updateViewAlerts(view) {
   const alertVehicles = vehicleNames.map(name => view.vehicles[name]).filter(v => v.presenceState === "possible" || v.presenceState === "covers");
   if (alertVehicles.length === 0) {
@@ -462,6 +471,7 @@ for (const view of views) {
     const button = event.target.closest(".offmap-indicator");
     if (!button) return;
     const v = view.vehicles[button.dataset.vehicle];
+    setActiveIndicator(view, v.name);
     renderSelectedVehicleInfo({
       name: v.name,
       viewLabel: view.label,

kort7/kort7.html

@@ -107,11 +107,18 @@
       pointer-events: auto;
       cursor: pointer;
       text-align: left;
+      transition: transform 120ms ease, box-shadow 120ms ease, outline-color 120ms ease;
+    }
+
+    .offmap-indicator:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 8px 22px rgba(0,0,0,0.28);
     }
 
     .offmap-indicator.active {
-      outline: 2px solid rgba(255,255,255,0.9);
+      outline: 3px solid rgba(255,255,255,0.98);
       outline-offset: 2px;
+      transform: translateY(-1px) scale(1.02);
     }
 
     .offmap-indicator.covers {

kort7/tests/kort7.spec.js

@@ -37,6 +37,7 @@ test.describe('kort7 dual map demo', () => {
     await expect(selection).toContainText('Bil 9');
     await expect(selection).toContainText('Tilnærmet position');
     await expect(selection).toContainText('hjørneindikator');
+    await expect(indicator).toHaveClass(/active/);
   });
 
   test('renders uncertainty circles on the maps', async ({ page }) => {