Adding clustering

app/assets/javascripts/application.js

@@ -105,6 +105,7 @@
 //= require tag_autocomplete
 //= require polls_admin
 //= require leaflet/dist/leaflet
+//= require leaflet.markercluster/dist/leaflet.markercluster
 //= require map
 //= require polls
 //= require sortable

app/assets/javascripts/map.js

@@ -15,12 +15,18 @@
       App.Map.maps = [];
     },
     initializeMap: function(element) {
-      var createMarker, editable, investmentsMarkers, map, marker, markerData,
-        markerIcon, moveOrPlaceMarker, removeMarker, removeMarkerSelector;
+      var createMarker, editable, investmentsMarkers, map, marker, markerClustering,
+        markerData, markerIcon, markers, moveOrPlaceMarker, removeMarker, removeMarkerSelector;
       App.Map.cleanInvestmentCoordinates(element);
       removeMarkerSelector = $(element).data("marker-remove-selector");
       investmentsMarkers = $(element).data("marker-investments-coordinates");
       editable = $(element).data("marker-editable");
+      markerClustering = $(element).data("marker-clustering");
+      if (markerClustering) {
+        markers = L.markerClusterGroup();
+      } else {
+        markers = L.layerGroup();
+      }
       marker = null;
       markerIcon = L.divIcon({
         className: "map-marker",
@@ -40,7 +46,7 @@
             App.Map.updateFormfields(map, newMarker);
           });
         }
-        newMarker.addTo(map);
+        markers.addLayer(newMarker);
         return newMarker;
       };
       removeMarker = function() {
@@ -79,6 +85,7 @@
 
       App.Map.addInvestmentsMarkers(investmentsMarkers, createMarker);
       App.Map.addGeozones(map);
+      map.addLayer(markers);
     },
     leafletMap: function(element) {
       var centerData, mapCenterLatLng, map;

app/assets/stylesheets/application.scss

@@ -12,6 +12,8 @@
 @import "jquery-ui/themes/base/datepicker";
 @import "jquery-ui/themes/base/sortable";
 @import "leaflet/dist/leaflet";
+@import "leaflet.markercluster/dist/MarkerCluster";
+@import "leaflet.markercluster/dist/MarkerCluster.Default";
 
 @import "foundation_and_overrides";
 @import "fonts";

app/components/shared/map_location_component.rb

@@ -58,6 +58,7 @@ class Shared::MapLocationComponent < ApplicationComponent
         marker_investments_coordinates: investments_coordinates,
         marker_latitude: map_location.latitude.presence,
         marker_longitude: map_location.longitude.presence,
+        marker_clustering: feature?("map.feature.marker_clustering"),
         geozones: geozones_data
       }.merge(input_selectors)
     end

package-lock.json

@@ -9,7 +9,8 @@
         "jquery": "^3.7.1",
         "jquery-ui": "^1.13.2",
         "jquery-ujs": "^1.2.3",
-        "leaflet": "^1.9.4"
+        "leaflet": "^1.9.4",
+        "leaflet.markercluster": "^1.5.3"
       }
     },
     "node_modules/jquery": {
@@ -37,6 +38,14 @@
       "version": "1.9.4",
       "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
+    "node_modules/leaflet.markercluster": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
+      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
+      "peerDependencies": {
+        "leaflet": "^1.3.1"
+      }
     }
   }
 }

package.json

@@ -4,6 +4,7 @@
     "jquery": "^3.7.1",
     "jquery-ui": "^1.13.2",
     "jquery-ujs": "^1.2.3",
-    "leaflet": "^1.9.4"
+    "leaflet": "^1.9.4",
+    "leaflet.markercluster": "^1.5.3"
   }
 }

spec/system/budgets/budgets_spec.rb

@@ -319,6 +319,22 @@ describe "Budgets" do
         expect(page).to have_css(".map-icon", count: 1, visible: :all)
       end
     end
+
+    scenario "when the marker clustering feature is enabled the map shows clusters instead of markers" do
+      Setting["map.feature.marker_clustering"] = true
+      create_list(:budget_investment, 3, :selected, :with_map_location, heading: heading)
+
+      visit budgets_path
+
+      within ".map-location" do
+        expect(page).to have_css ".marker-cluster div span", text: "3"
+        expect(page).not_to have_css ".map-icon"
+
+        find(".marker-cluster").click
+
+        expect(page).to have_css ".map-icon", count: 3
+      end
+    end
   end
 
   context "Show" do