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

Make off-map indicator clicks visually obvious

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

27
kort7/app.js
View File

@ -10,6 +10,7 @@ const COLORS = {
}; };
const map = L.map("map").setView([55.6761, 12.5683], 13); 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", { L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© OpenStreetMap contributors", attribution: "© OpenStreetMap contributors",
@ -25,6 +26,13 @@ const resetBtn = document.getElementById("resetBtn");
let forcedPopupVehicle = null; 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) { function flashVehicleMarker(v) {
const markerEl = v.marker.getElement(); const markerEl = v.marker.getElement();
if (!markerEl) return; if (!markerEl) return;
@ -39,19 +47,31 @@ function openVehiclePopup(name) {
if (!v) return; if (!v) return;
forcedPopupVehicle = name; forcedPopupVehicle = name;
highlightOffmapIndicator(name);
if (!map.hasLayer(v.marker)) { if (!map.hasLayer(v.marker)) {
v.marker.addTo(map); 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.setOpacity(1);
v.marker.setZIndexOffset(1000); v.marker.setZIndexOffset(1000);
v.marker.setLatLng([v.displayLat, v.displayLon]); v.marker.setLatLng([v.displayLat, v.displayLon]);
setHeading(v.marker, v.displayHeading); setHeading(v.marker, v.displayHeading);
v.marker.setPopupContent(popupHtml(v.name, v)); v.marker.setPopupContent(popupHtml(v.name, v));
v.marker.openPopup();
requestAnimationFrame(() => flashVehicleMarker(v)); window.setTimeout(() => {
v.marker.openPopup();
flashVehicleMarker(v);
}, 180);
} }
function carIcon(color) { function carIcon(color) {
@ -564,6 +584,7 @@ map.on("popupclose", (event) => {
const popupVehicle = Object.values(vehicles).find(v => v.marker === event.popup._source); const popupVehicle = Object.values(vehicles).find(v => v.marker === event.popup._source);
if (popupVehicle && forcedPopupVehicle === popupVehicle.name) { if (popupVehicle && forcedPopupVehicle === popupVehicle.name) {
forcedPopupVehicle = null; forcedPopupVehicle = null;
highlightOffmapIndicator(null);
updateVehicleDisplay(popupVehicle); updateVehicleDisplay(popupVehicle);
} }
}); });

6
kort7/kort7.html
View File

@ -94,6 +94,12 @@
box-shadow: 0 8px 20px rgba(0,0,0,0.28); 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 { .offmap-indicator.covers {
background: rgba(0, 72, 36, 0.9); background: rgba(0, 72, 36, 0.9);
border-color: rgba(76, 175, 80, 0.55); border-color: rgba(76, 175, 80, 0.55);