mortenVChristiansen
/
kort
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make off-map clicks visibly reposition popup

This commit is contained in:
Morten V. Christiansen 2026-04-05 12:51:37 +02:00
parent 26a9bc4f17
commit e2ed04c5a6
3 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
kort7/app.js
View File

@ -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) {

10
kort7/kort7.html
View File

@ -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;

7
kort7/tests/kort7.spec.js
View File

@ -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);
});
});