Return scale and stats controls to map

CHANGELOG.md

@@ -5,13 +5,21 @@ 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.22.4 - 2025-01-15
+# 0.22.4 - 2025-01-20
+
+### Added
+
+- You can now drag-n-drop a point on the map to update its position. Enable the "Points" layer on the map to see the points.
 
 ### Changed
 
 - Run seeds even in prod env so Unraid users could have default user.
 - Precompile assets in production env using dummy secret key base.
 
+### Fixed
+
+- Fixed a bug where route wasn't highlighted when it was hovered or clicked.
+
 # 0.22.3 - 2025-01-14
 
 ### Changed

app/javascript/controllers/maps_controller.js

@@ -61,6 +61,35 @@ export default class extends Controller {
 
     this.map = L.map(this.containerTarget).setView([this.center[0], this.center[1]], 14);
 
+    // Add scale control
+    L.control.scale({
+      position: 'bottomright',
+      imperial: this.distanceUnit === 'mi',
+      metric: this.distanceUnit === 'km',
+      maxWidth: 120
+    }).addTo(this.map)
+
+    // Add stats control
+    const StatsControl = L.Control.extend({
+      options: {
+        position: 'bottomright'
+      },
+      onAdd: (map) => {
+        const div = L.DomUtil.create('div', 'leaflet-control-stats');
+        const distance = this.element.dataset.distance || '0';
+        const pointsNumber = this.element.dataset.points_number || '0';
+        const unit = this.distanceUnit === 'mi' ? 'mi' : 'km';
+        div.innerHTML = `${distance} ${unit} | ${pointsNumber} points`;
+        div.style.backgroundColor = 'white';
+        div.style.padding = '0 5px';
+        div.style.marginRight = '5px';
+        div.style.display = 'inline-block';
+        return div;
+      }
+    });
+
+    new StatsControl().addTo(this.map);
+
     // Set the maximum bounds to prevent infinite scroll
     var southWest = L.latLng(-120, -210);
     var northEast = L.latLng(120, 210);