quoije/yaris-obd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: map zoom limits configurable per-deployment via data attributes

Browse Source 
Pi offline tiles only cover zoom 8-15; OSM live tiles support 0-19.
history.js now reads data-min-zoom/data-max-zoom from the #history-map div
instead of hardcoding 3/19. Pi template caps to 8-15 (prevents blank tiles
at extreme zooms), server template allows full 3-19 OSM range.

Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Mathieu Moran
2026-08-10 05:42:04 -04:00
co-authored by Copilot
parent 264d38a6dc
commit c287ab67a3
3 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/templates/history.html
+2 -1
View File
@@ -56,7 +56,8 @@
<div class="card-body p-0"> <div class="card-body p-0">
<div id="history-map" aria-label="Selected trip route map" <div id="history-map" aria-label="Selected trip route map"
data-tile-url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" data-tile-url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
data-tile-attrib="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"></div> data-tile-attrib="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
data-min-zoom="3" data-max-zoom="19"></div>
<div id="trip-timeline" class="border-top p-3" hidden> <div id="trip-timeline" class="border-top p-3" hidden>
<div class="d-flex align-items-center gap-3"> <div class="d-flex align-items-center gap-3">
<button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play"> <button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play">
static/js/history.js
+5 -3
View File
@@ -13,10 +13,12 @@
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 map = L.map("history-map", { minZoom: 3, maxZoom: 19 }).setView([48.505, -0.09], 12); const minZoom = parseInt(mapEl.dataset.minZoom || "3", 10);
const maxZoom = parseInt(mapEl.dataset.maxZoom || "19", 10);
const map = L.map("history-map", { minZoom, maxZoom }).setView([48.505, -0.09], 12);
const tiles = L.tileLayer(tileUrl, { const tiles = L.tileLayer(tileUrl, {
minZoom: 3, minZoom,
maxZoom: 19, maxZoom,
attribution: tileAttrib, attribution: tileAttrib,
}); });
let routeLayer = null; let routeLayer = null;
templates/history.html
+2 -1
View File
@@ -54,7 +54,8 @@
</div> </div>
</div> </div>
<div class="card-body p-0"> <div class="card-body p-0">
<div id="history-map" aria-label="Selected trip route map"></div> <div id="history-map" aria-label="Selected trip route map"
data-min-zoom="8" data-max-zoom="15"></div>
<div id="trip-timeline" class="border-top p-3" hidden> <div id="trip-timeline" class="border-top p-3" hidden>
<div class="d-flex align-items-center gap-3"> <div class="d-flex align-items-center gap-3">
<button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play"> <button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play">