Add dual-map debug diagnostics

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", () => {
+    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) {

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 @@
       <div class="panel runtime-warning tile-warning" id="tileWarning" hidden>
         Korttiles kunne ikke hentes. Demoen viser derfor grå flader. Tjek netværksadgang eller om browseren blokerer tile-requests.
       </div>
+      <div class="panel debug-panel" id="debugPanel"></div>
       <div class="panel">
         <strong>Mulige off-map køretøjer, tilnærmet kort</strong>
         <div class="alerts" id="presenceAlertsApprox"></div>