diff --git a/kort7/app.js b/kort7/app.js index 14af596..ad506cf 100644 --- a/kort7/app.js +++ b/kort7/app.js @@ -12,6 +12,7 @@ const COLORS = { const statusEl = document.getElementById("status"); const selectedVehicleInfoEl = document.getElementById("selectedVehicleInfo"); const runtimeWarningEl = document.getElementById("runtimeWarning"); +const tileWarningEl = document.getElementById("tileWarning"); const alertsApproxEl = document.getElementById("presenceAlertsApprox"); const alertsTrueEl = document.getElementById("presenceAlertsTrue"); const playBtn = document.getElementById("playBtn"); @@ -153,11 +154,19 @@ function renderSelectedVehicleInfo(selection) { function createView({ id, label, positionKey, alertsEl, indicatorsId }) { const map = L.map(id).setView([55.6761, 12.5683], 13); - L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { + const tileLayer = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap contributors", maxZoom: 19 }).addTo(map); + tileLayer.on("tileerror", () => { + tileWarningEl.hidden = false; + }); + + tileLayer.on("load", () => { + tileWarningEl.hidden = true; + }); + return { id, label, @@ -165,6 +174,7 @@ function createView({ id, label, positionKey, alertsEl, indicatorsId }) { alertsEl, indicatorsEl: document.getElementById(indicatorsId), map, + tileLayer, vehicles: {} }; } diff --git a/kort7/kort7.html b/kort7/kort7.html index c18817c..79e7e5f 100644 --- a/kort7/kort7.html +++ b/kort7/kort7.html @@ -5,8 +5,8 @@