Fix route tooltip and map movement when hovering over a route

Freika · Jul 19, 2024 · 1006606 · 1006606
1 parent 646e5e7
commit 1006606
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 12 deletions.
diff --git a/.app_version b/.app_version
@@ -1 +1 @@
-0.9.1
+0.9.2
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.9.2] — 2024-07-19
+
+### Fixed
+
+- Hover over a route does not move map anymore and shows the route tooltip where user hovers over the route, not at the end of the route. Click on route now will move the map to include the whole route.
+
+---
+
 ## [0.9.1] — 2024-07-12
 
 ### Fixed

diff --git a/app/assets/builds/tailwind.css b/app/assets/builds/tailwind.css
diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
@@ -10,7 +10,7 @@ export default class extends Controller {
 
     const markers = JSON.parse(this.element.dataset.coordinates);
     // The default map center is Victory Column in Berlin
-    let center = markers[markers.length - 1] || [52.514568, 13.350111]
+    let center = markers[markers.length - 1] || [52.514568, 13.350111];
     const timezone = this.element.dataset.timezone;
     const clearFogRadius = this.element.dataset.fog_of_war_meters;
 
@@ -29,7 +29,7 @@ export default class extends Controller {
       Points: markersLayer,
       Polylines: polylinesLayer,
       Heatmap: heatmapLayer,
-      "Fog of War": fogOverlay
+      "Fog of War": fogOverlay,
     };
 
     L.control
@@ -49,23 +49,23 @@ export default class extends Controller {
     document.getElementById('fog').style.display = 'none';
 
     // Toggle fog layer visibility
-    map.on('overlayadd', function(e) {
+    map.on('overlayadd', function (e) {
       if (e.name === 'Fog of War') {
         fogEnabled = true;
         document.getElementById('fog').style.display = 'block';
         updateFog(markers, clearFogRadius);
       }
     });
 
-    map.on('overlayremove', function(e) {
+    map.on('overlayremove', function (e) {
       if (e.name === 'Fog of War') {
         fogEnabled = false;
         document.getElementById('fog').style.display = 'none';
       }
     });
 
     // Update fog circles on zoom and move
-    map.on('zoomend moveend', function() {
+    map.on('zoomend moveend', function () {
       if (fogEnabled) {
         updateFog(markers, clearFogRadius);
       }
@@ -75,7 +75,7 @@ export default class extends Controller {
       if (fogEnabled) {
         var fog = document.getElementById('fog');
         fog.innerHTML = ''; // Clear previous circles
-        markers.forEach(function(point) {
+        markers.forEach(function (point) {
           const radiusInPixels = metersToPixels(map, clearFogRadius);
           clearFog(point[0], point[1], radiusInPixels);
         });
@@ -135,7 +135,7 @@ export default class extends Controller {
   baseMaps() {
     return {
       OpenStreetMap: this.osmMapLayer(),
-      "OpenStreetMap.HOT": this.osmHotMapLayer()
+      "OpenStreetMap.HOT": this.osmHotMapLayer(),
     };
   }
 
@@ -257,18 +257,38 @@ export default class extends Controller {
     const startMarker = L.marker([startPoint[0], startPoint[1]], { icon: startIcon }).bindPopup(`Start: ${firstTimestamp}`);
     const endMarker = L.marker([endPoint[0], endPoint[1]], { icon: finishIcon }).bindPopup(popupContent);
 
-    polyline.on("mouseover", function () {
+    let hoverPopup = null;
+
+    polyline.on("mouseover", function (e) {
       polyline.setStyle(highlightStyle);
       startMarker.addTo(map);
-      endMarker.addTo(map).openPopup();
+      endMarker.addTo(map);
+
+      const latLng = e.latlng;
+      if (hoverPopup) {
+        map.closePopup(hoverPopup);
+      }
+      hoverPopup = L.popup()
+        .setLatLng(latLng)
+        .setContent(popupContent)
+        .openOn(map);
     });
 
     polyline.on("mouseout", function () {
       polyline.setStyle(originalStyle);
-      map.closePopup();
+      map.closePopup(hoverPopup);
       map.removeLayer(startMarker);
       map.removeLayer(endMarker);
     });
+
+    polyline.on("click", function () {
+      map.fitBounds(polyline.getBounds());
+    });
+
+    // Close the popup when clicking elsewhere on the map
+    map.on("click", function () {
+      map.closePopup(hoverPopup);
+    });
   }
 
   createPolylinesLayer(markers, map, timezone) {