From 4af91748f05e004f9364d736d29a9419a597634b Mon Sep 17 00:00:00 2001
From: Eugene Burmakin <iamfrey@gmail.com>
Date: Thu, 21 Mar 2024 23:54:19 +0100
Subject: [PATCH] Allow to set the default map center via an environment
 variable.

---
 app/javascript/controllers/maps_controller.js | 61 ++++++++++++-------
 app/views/points/index.html.erb               |  6 +-
 config/initializers/00_constants.rb           |  1 +
 3 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
index d58a514f..9ecc1642 100644
--- a/app/javascript/controllers/maps_controller.js
+++ b/app/javascript/controllers/maps_controller.js
@@ -8,31 +8,14 @@ export default class extends Controller {
   connect() {
     console.log("Map controller connected")
     var markers = JSON.parse(this.element.dataset.coordinates)
-    var center = markers[0]
-    var lastMarker = markers[markers.length - 1].slice(0, 2)
+    var center = markers[0] || JSON.parse(this.element.dataset.center)
     var center = (center === undefined) ? [52.516667, 13.383333] : center;
     var map = L.map(this.containerTarget).setView([center[0], center[1]], 14);
 
-    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      maxZoom: 19,
-      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-    }).addTo(map);
-
-    for (var i = 0; i < markers.length; i++) {
-      var lat = markers[i][0];
-      var lon = markers[i][1];
-
-      var popupContent = this.popupContent(markers[i]);
-      var circleMarker = L.circleMarker([lat, lon], {radius: 4})
-
-      circleMarker.bindPopup(popupContent).openPopup();
-      circleMarker.addTo(map);
-    }
-
-    var coordinates = markers.map(element => element.slice(0, 2));
-
-    L.marker(lastMarker).addTo(map);
-    L.polyline(coordinates).addTo(map);
+    this.addTileLayer(map);
+    this.addMarkers(map, markers);
+    this.addPolyline(map, markers);
+    this.addLastMarker(map, markers);
   }
 
   disconnect() {
@@ -63,4 +46,38 @@ export default class extends Controller {
 
     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
   }
+
+  setMap
+
+  addTileLayer(map) {
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+    }).addTo(map);
+  }
+
+  addMarkers(map, markers) {
+    for (var i = 0; i < markers.length; i++) {
+      var lat = markers[i][0];
+      var lon = markers[i][1];
+
+      var popupContent = this.popupContent(markers[i]);
+      var circleMarker = L.circleMarker([lat, lon], {radius: 4})
+
+      circleMarker.bindPopup(popupContent).openPopup();
+      circleMarker.addTo(map);
+    }
+  }
+
+  addPolyline(map, markers) {
+    var coordinates = markers.map(element => element.slice(0, 2));
+    L.polyline(coordinates).addTo(map);
+  }
+
+  addLastMarker(map, markers) {
+    if (markers.length > 0) {
+      var lastMarker = markers[markers.length - 1].slice(0, 2)
+      L.marker(lastMarker).addTo(map);
+    }
+  }
 }
diff --git a/app/views/points/index.html.erb b/app/views/points/index.html.erb
index b201664c..ba64ea6a 100644
--- a/app/views/points/index.html.erb
+++ b/app/views/points/index.html.erb
@@ -22,7 +22,11 @@
     </div>
   <% end %>
 
-  <div class="w-full" data-controller="maps" data-coordinates="<%= @coordinates %>">
+  <div
+    class="w-full"
+    data-controller="maps"
+    data-coordinates="<%= @coordinates %>"
+    data-center="<%= MAP_CENTER %>">
     <div data-maps-target="container" class="h-[25rem] w-auto min-h-screen"></div>
   </div>
 </div>
diff --git a/config/initializers/00_constants.rb b/config/initializers/00_constants.rb
index bd40aa2c..d56bdbe4 100644
--- a/config/initializers/00_constants.rb
+++ b/config/initializers/00_constants.rb
@@ -1 +1,2 @@
 MINIMUM_POINTS_IN_CITY = ENV.fetch('MINIMUM_POINTS_IN_CITY', 5).to_i
+MAP_CENTER = ENV.fetch('MAP_CENTER', '[55.7522, 37.6156]')