5 files changed, 49 insertions, 1 deletions
diff --git a/asset-sources/theme.scss b/asset-sources/theme.scss
index 85062a9..1941f36 100644
--- a/asset-sources/theme.scss
+++ b/asset-sources/theme.scss
@@ -187,6 +187,10 @@ strong {
   width: 300px;
 }
 
+.climb-preview {
+  cursor: zoom-in;
+}
+
 .climb-category {
   float: right;
   border: 3px solid;
diff --git a/fietsboek/models/climb.py b/fietsboek/models/climb.py
index 2bdda9f..a2040f2 100644
--- a/fietsboek/models/climb.py
+++ b/fietsboek/models/climb.py
@@ -71,4 +71,7 @@ class Climb(Base):
     def bounds(self) -> tuple[tuple[float, float], tuple[float, float]]:
         return self.path().bounds()
 
+    def latlon_points(self) -> list[tuple[float, float]]:
+        return [point.latlon() for point in self.path().points]
+
 __all__ = ["Climb"]
diff --git a/fietsboek/static/theme.css b/fietsboek/static/theme.css
index e5c0f73..0925d4e 100644
--- a/fietsboek/static/theme.css
+++ b/fietsboek/static/theme.css
@@ -180,6 +180,10 @@ strong {
   width: 300px;
 }
 
+.climb-preview {
+  cursor: zoom-in;
+}
+
 .climb-category {
   float: right;
   border: 3px solid;
diff --git a/fietsboek/static/theme.css.map b/fietsboek/static/theme.css.map
index ff147a0..c7a2016 100644
--- a/fietsboek/static/theme.css.map
+++ b/fietsboek/static/theme.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAlCJ;EAqCE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACI;;;AAGJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAEF;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;;;AAKF;EACE;EACA;EAEA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI,eACE;;;AAIJ;EACE;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;;AAIJ;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"}
-\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAIA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAlCJ;EAqCE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACI;;;AAGJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAEF;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;;;AAKF;EACE;EACA;EAEA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;AAEA;EAJF;IAKI,eACE;;;AAIJ;EACE;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;;AAIJ;EACE;EACA;;;AAIJ;EACE;;;AAGF;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"}
+\ No newline at end of file
diff --git a/fietsboek/templates/details.jinja2 b/fietsboek/templates/details.jinja2
index 9d29a7f..fb2f9d8 100644
--- a/fietsboek/templates/details.jinja2
+++ b/fietsboek/templates/details.jinja2
@@ -179,6 +179,10 @@
 
   {% if track.climbs %}
   <h2>{{ _("page.details.climbs") }}</h2>
+  <div class="form-check form-switch">
+    <input class="form-check-input" type="checkbox" role="switch" id="switchMarkClimbs">
+    <label class="form-check-label" for="switchMarkClimbs">{{ _("page.details.climbs.mark_on_map") }}</label>
+  </div>
   <div class="climbs">
   {% for climb in track.climbs %}
   <div class="climb card">
@@ -302,6 +306,39 @@
         mapDiv.scrollIntoView();
       });
     });
+
+    let climbs = [
+      {% for climb in track.climbs %}
+      {{ climb.latlon_points() | tojson }}{% if not loop.last %},{% endif %}
+      {% endfor %}
+    ];
+
+    function showClimbs() {
+      let map = document.getElementById("mainmap").makeMap.GetMap().map;
+      window.fietsboekClimbs = climbs.map((c) => new L.Polyline(
+        c.map(([lat, lon]) => new L.LatLng(lat, lon)),
+        { color: "blue" },
+      ));
+      for (let poly of window.fietsboekClimbs) {
+        poly.addTo(map);
+      }
+    }
+
+    function hideClimbs() {
+      if (window.fietsboekClimbs) {
+        for (let poly of window.fietsboekClimbs) {
+          poly.remove();
+        }
+      }
+    }
+
+    document.querySelector("#switchMarkClimbs").addEventListener("change", (e) => {
+      if (e.target.checked) {
+        showClimbs();
+      } else {
+        hideClimbs()
+      };
+    });
   })();
 </script>
 {% endblock %}