From cd7cf8c4bbb0e3e20a6f81d7ed819762fc232fc7 Mon Sep 17 00:00:00 2001
From: Eugene Burmakin <iamfrey@gmail.com>
Date: Mon, 13 Jan 2025 21:30:08 +0100
Subject: [PATCH] Return distance and points number in the custom control to
 the map

---
 app/controllers/map_controller.rb             |  3 ++-
 app/javascript/controllers/maps_controller.js | 21 ++++++++++++++++++-
 app/views/map/index.html.erb                  |  2 ++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/app/controllers/map_controller.rb b/app/controllers/map_controller.rb
index ac960928..7a7246c5 100644
--- a/app/controllers/map_controller.rb
+++ b/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)
diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
index d7221d1f..7a12d565 100644
--- a/app/javascript/controllers/maps_controller.js
+++ b/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',
diff --git a/app/views/map/index.html.erb b/app/views/map/index.html.erb
index 7e36c225..d3c39f80 100644
--- a/app/views/map/index.html.erb
+++ b/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>