diff --git a/kort7/app.js b/kort7/app.js index e6ec78b..d4f387d 100644 --- a/kort7/app.js +++ b/kort7/app.js @@ -25,6 +25,15 @@ const resetBtn = document.getElementById("resetBtn"); let forcedPopupVehicle = null; +function flashVehicleMarker(v) { + const markerEl = v.marker.getElement(); + if (!markerEl) return; + + markerEl.classList.remove("flash-marker"); + void markerEl.offsetWidth; + markerEl.classList.add("flash-marker"); +} + function openVehiclePopup(name) { const v = vehicles[name]; if (!v) return; @@ -35,12 +44,14 @@ function openVehiclePopup(name) { v.marker.addTo(map); } + map.panTo([v.displayLat, v.displayLon], { animate: true, duration: 0.4 }); 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)); } function carIcon(color) { diff --git a/kort7/kort7.html b/kort7/kort7.html index a86b118..993e594 100644 --- a/kort7/kort7.html +++ b/kort7/kort7.html @@ -121,6 +121,16 @@ opacity: 0.82; } + .flash-marker { + animation: flash-marker-pulse 1.2s ease-out 1; + } + + @keyframes flash-marker-pulse { + 0% { transform: scale(1); filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); } + 20% { transform: scale(1.8); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); } + 100% { transform: scale(1); filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); } + } + .car { width: 24px; height: 24px; diff --git a/kort7/tests/kort7.spec.js b/kort7/tests/kort7.spec.js index 5ee1c57..0f5f67a 100644 --- a/kort7/tests/kort7.spec.js +++ b/kort7/tests/kort7.spec.js @@ -105,7 +105,10 @@ test.describe('kort7 vehicle map', () => { await expect(popup).toContainText('Usikkerhed:'); await expect(popup).toContainText('På kortet:'); - const visibleMarkerCount = await page.locator('.leaflet-marker-icon').count(); - expect(visibleMarkerCount).toBeGreaterThan(0); + await expect(page.locator('.leaflet-popup')).toBeVisible(); + + const popupBox = await page.locator('.leaflet-popup').boundingBox(); + expect(popupBox).not.toBeNull(); + expect(popupBox.y).toBeLessThan(220); }); });