diff --git a/kort7/app.js b/kort7/app.js index ad506cf..4c89a29 100644 --- a/kort7/app.js +++ b/kort7/app.js @@ -13,6 +13,7 @@ const statusEl = document.getElementById("status"); const selectedVehicleInfoEl = document.getElementById("selectedVehicleInfo"); const runtimeWarningEl = document.getElementById("runtimeWarning"); const tileWarningEl = document.getElementById("tileWarning"); +const debugPanelEl = document.getElementById("debugPanel"); const alertsApproxEl = document.getElementById("presenceAlertsApprox"); const alertsTrueEl = document.getElementById("presenceAlertsTrue"); const playBtn = document.getElementById("playBtn"); @@ -154,17 +155,26 @@ function renderSelectedVehicleInfo(selection) { function createView({ id, label, positionKey, alertsEl, indicatorsId }) { const map = L.map(id).setView([55.6761, 12.5683], 13); + let tileErrors = 0; + let tileLoads = 0; const tileLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors", maxZoom: 19 }).addTo(map); tileLayer.on("tileerror", () => { + tileErrors += 1; tileWarningEl.hidden = false; }); + tileLayer.on("tileload", () => { + tileLoads += 1; + }); + tileLayer.on("load", () => { - tileWarningEl.hidden = true; + if (tileLoads > 0) { + tileWarningEl.hidden = true; + } }); return { @@ -175,6 +185,7 @@ function createView({ id, label, positionKey, alertsEl, indicatorsId }) { indicatorsEl: document.getElementById(indicatorsId), map, tileLayer, + getTileStats: () => ({ tileErrors, tileLoads }), vehicles: {} }; } @@ -398,10 +409,30 @@ function resetDemo() { updateStatus(); } +function updateDebugPanel() { + const lines = views.map((view) => { + const el = document.getElementById(view.id); + const rect = el.getBoundingClientRect(); + const center = view.map.getCenter(); + const zoom = view.map.getZoom(); + const stats = view.getTileStats(); + return [ + `${view.label}`, + ` size: ${Math.round(rect.width)}x${Math.round(rect.height)}`, + ` center: ${center.lat.toFixed(4)}, ${center.lng.toFixed(4)}`, + ` zoom: ${zoom}`, + ` tiles loaded/errors: ${stats.tileLoads}/${stats.tileErrors}` + ].join("\n"); + }); + + debugPanelEl.textContent = lines.join("\n\n"); +} + function updateStatus() { const total = VEHICLE_EVENTS.length; const passed = VEHICLE_EVENTS.filter(e => e.ts <= simTime).length; statusEl.textContent = `Simuleret tid: ${simTime.toFixed(1)} s\nEvents passeret: ${passed} / ${total}\nAfspilning: 2x`; + updateDebugPanel(); } function tick(now) { diff --git a/kort7/kort7.html b/kort7/kort7.html index 79e7e5f..4ff89b7 100644 --- a/kort7/kort7.html +++ b/kort7/kort7.html @@ -181,6 +181,15 @@ display: none; } + .debug-panel { + border-color: #1d4ed8; + background: rgba(219, 234, 254, 0.98); + color: #1e3a8a; + font-family: ui-monospace, SFMono-Regular, Menlo, monospace; + font-size: 11px; + white-space: pre-wrap; + } + .tile-warning { border-color: #b91c1c; background: rgba(254, 226, 226, 0.98); @@ -236,6 +245,7 @@ +
Mulige off-map køretøjer, tilnærmet kort