From c287ab67a393e9984f9fc20a834dd7f73287e1c3 Mon Sep 17 00:00:00 2001
From: Mathieu Moran <mathieumoran1@gmail.com>
Date: Mon, 10 Aug 2026 05:42:04 -0400
Subject: [PATCH] fix: map zoom limits configurable per-deployment via data
 attributes

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 <223556219+Copilot@users.noreply.github.com>
---
 server/templates/history.html | 3 ++-
 static/js/history.js          | 8 +++++---
 templates/history.html        | 3 ++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/server/templates/history.html b/server/templates/history.html
index 065ae5e..25f57b8 100644
--- a/server/templates/history.html
+++ b/server/templates/history.html
@@ -56,7 +56,8 @@
             <div class="card-body p-0">
                 <div id="history-map" aria-label="Selected trip route map"
                      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 class="d-flex align-items-center gap-3">
                         <button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play">
diff --git a/static/js/history.js b/static/js/history.js
index 38b1877..256bf54 100644
--- a/static/js/history.js
+++ b/static/js/history.js
@@ -13,10 +13,12 @@
     const mapEl = document.getElementById("history-map");
     const tileUrl = mapEl.dataset.tileUrl || "/static/vendor/tiles/{z}/{x}/{y}.png";
     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, {
-        minZoom: 3,
-        maxZoom: 19,
+        minZoom,
+        maxZoom,
         attribution: tileAttrib,
     });
     let routeLayer = null;
diff --git a/templates/history.html b/templates/history.html
index dd139fc..f880dfb 100644
--- a/templates/history.html
+++ b/templates/history.html
@@ -54,7 +54,8 @@
                 </div>
             </div>
             <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 class="d-flex align-items-center gap-3">
                         <button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play">