Add marker on the map when hovering over the per-km breakdown rows

Signed-off-by: Jo Vandeginste <[email protected]>
jovandeginste · Feb 21, 2024 · abc2f0a · abc2f0a
1 parent 4f3e8ce
commit abc2f0a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 18 deletions.
diff --git a/assets/map.js b/assets/map.js
@@ -1,7 +1,10 @@
+var map;
+var hoverMarker;
+
 // This script relies on HTML having a "points" and "center" variables.
 function on_loaded() {
   // Create map & tiles.
-  var map = L.map("map").setView(center, 15);
+  map = L.map("map").setView(center, 15);
   L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
     attribution:
       '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
@@ -15,19 +18,6 @@ function on_loaded() {
     interactive: false,
   };
 
-  var first = points.shift();
-  var last = points.pop();
-
-  p.push([first.lat, first.lng]);
-  group.addLayer(
-    L.circleMarker([first.lat, first.lng], {
-      color: "green",
-      radius: 16,
-    })
-      .addTo(map)
-      .bindTooltip(first.title),
-  );
-
   // Add points with tooltip to map.
   points.forEach((pt) => {
     p.push([pt.lat, pt.lng]);
@@ -42,19 +32,46 @@ function on_loaded() {
     );
   });
 
-  p.push([last.lat, last.lng]);
+  L.polyline(p, polyLineProperties).addTo(map);
+
+  var last = points[points.length - 1];
   group.addLayer(
     L.circleMarker([last.lat, last.lng], {
       color: "red",
-      radius: 16,
+      radius: 8,
     })
       .addTo(map)
       .bindTooltip(last.title),
   );
 
-  L.polyline(p, polyLineProperties).addTo(map);
+  var first = points[0];
+  group.addLayer(
+    L.circleMarker([first.lat, first.lng], {
+      color: "green",
+      radius: 8,
+    })
+      .addTo(map)
+      .bindTooltip(first.title),
+  );
 
+  hoverMarker = L.circleMarker(first, {
+    color: "blue",
+    radius: 8,
+  });
+
+  hoverMarker.addTo(map); // Adding marker to the map
   map.fitBounds(group.getBounds());
 }
 
+function set_marker(title, lat, lon) {
+  hoverMarker.bindTooltip(title);
+  hoverMarker.setLatLng([lat, lon]);
+
+  // Adding popup to the marker
+  hoverMarker.openTooltip();
+}
+function clear_marker() {
+  hoverMarker.closeTooltip();
+}
+
 document.addEventListener("DOMContentLoaded", on_loaded);
diff --git a/views/partials/workout_breakdown.html b/views/partials/workout_breakdown.html
@@ -11,7 +11,10 @@
   </thead>
   <tbody>
     {{ range . }}
-    <tr>
+    <tr
+      onmouseover="set_marker('{{ .Point.Title }}', {{.Point.Lat}}, {{.Point.Lng}})"
+      onmouseout="clear_marker()"
+    >
       <td>
         {{ if .IsWorst }}
         <span class="text-orange-600 {{ IconFor `worst` }}"></span>{{ end }} {{