Return distance and points number in the custom control to the map

app/controllers/map_controller.rb

@@ -14,6 +14,7 @@ class MapController < ApplicationController
     @start_at = Time.zone.at(start_at)
     @end_at = Time.zone.at(end_at)
     @years = (@start_at.year..@end_at.year).to_a
+    @points_number = @coordinates.count
   end
 
   private
@@ -36,7 +37,7 @@ class MapController < ApplicationController
     @distance ||= 0
 
     @coordinates.each_cons(2) do
-      @distance += Geocoder::Calculations.distance_between([_1[0], _1[1]], [_2[0], _2[1]])
+      @distance += Geocoder::Calculations.distance_between([_1[0], _1[1]], [_2[0], _2[1]], units: DISTANCE_UNIT)
     end
 
     @distance.round(1)

app/javascript/controllers/maps_controller.js

@@ -104,7 +104,26 @@ export default class extends Controller {
       Photos: this.photoMarkers
     };
 
-    // Add scale control to bottom right
+    // Add this new custom control BEFORE the scale control
+    const TestControl = L.Control.extend({
+      onAdd: (map) => {
+        const div = L.DomUtil.create('div', 'leaflet-control');
+        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;
+      }
+    });
+
+    // Add the test control first
+    new TestControl({ position: 'bottomright' }).addTo(this.map);
+
+    // Then add scale control
     L.control.scale({
       position: 'bottomright',
       imperial: this.distanceUnit === 'mi',

app/views/map/index.html.erb

@@ -51,6 +51,8 @@
         data-api_key="<%= current_user.api_key %>"
         data-user_settings=<%= current_user.settings.to_json %>
         data-coordinates="<%= @coordinates %>"
+        data-distance="<%= @distance %>"
+        data-points_number="<%= @points_number %>"
         data-timezone="<%= Rails.configuration.time_zone %>">
         <div data-maps-target="container" class="h-[25rem] rounded-lg w-full min-h-screen">
           <div id="fog" class="fog"></div>