Merge branch 'master' into admin_flag

.app_version

@@ -1 +1 @@
-0.9.1
+0.9.2

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

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,7 +49,7 @@ 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';
@@ -57,7 +57,7 @@ export default class extends Controller {
       }
     });
 
-    map.on('overlayremove', function(e) {
+    map.on('overlayremove', function (e) {
       if (e.name === 'Fog of War') {
         fogEnabled = false;
         document.getElementById('fog').style.display = 'none';
@@ -65,7 +65,7 @@ export default class extends Controller {
     });
 
     // 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) {