fix: always add tile layer at map init, fix zoom bounds

- tiles.addTo(map) now called at init instead of lazily on first trip click
  (fixes blank map on page load on the server portal)
- minZoom/maxZoom read from data-min-zoom/data-max-zoom attributes with
  correct NaN fallback (parseInt || default)
- Pi template: data-min-zoom=8 data-max-zoom=15 (matches cached tile range)
- Server template: data-min-zoom=3 data-max-zoom=19 (full OSM range)

Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Mathieu Moran
2026-08-10 05:46:45 -04:00
co-authored by Copilot
parent c287ab67a3
commit 5e0b30759d
+6 -9
View File
@@ -13,14 +13,14 @@
const mapEl = document.getElementById("history-map"); const mapEl = document.getElementById("history-map");
const tileUrl = mapEl.dataset.tileUrl || "/static/vendor/tiles/{z}/{x}/{y}.png"; const tileUrl = mapEl.dataset.tileUrl || "/static/vendor/tiles/{z}/{x}/{y}.png";
const tileAttrib = mapEl.dataset.tileAttrib || "&copy; MapTiler &copy; OpenStreetMap contributors"; const tileAttrib = mapEl.dataset.tileAttrib || "&copy; MapTiler &copy; OpenStreetMap contributors";
const minZoom = parseInt(mapEl.dataset.minZoom || "3", 10); const minZoom = parseInt(mapEl.dataset.minZoom, 10) || 3;
const maxZoom = parseInt(mapEl.dataset.maxZoom || "19", 10); const maxZoom = parseInt(mapEl.dataset.maxZoom, 10) || 19;
const map = L.map("history-map", { minZoom, maxZoom }).setView([48.505, -0.09], 12); const map = L.map("history-map", { minZoom: minZoom, maxZoom: maxZoom }).setView([48.505, -0.09], 12);
const tiles = L.tileLayer(tileUrl, { const tiles = L.tileLayer(tileUrl, {
minZoom, minZoom: minZoom,
maxZoom, maxZoom: maxZoom,
attribution: tileAttrib, attribution: tileAttrib,
}); }).addTo(map);
let routeLayer = null; let routeLayer = null;
let vehicleMarker = null; let vehicleMarker = null;
let replayPoints = []; let replayPoints = [];
@@ -147,9 +147,6 @@
if (routeLayer) { if (routeLayer) {
routeLayer.remove(); routeLayer.remove();
} }
if (!map.hasLayer(tiles)) {
tiles.addTo(map);
}
const coordinates = result.points.map(function (point) { const coordinates = result.points.map(function (point) {
return [point.latitude, point.longitude]; return [point.latitude, point.longitude];
}); });