From e5a6a5bf1d02b63d8f844a4dbe3e047484102183 Mon Sep 17 00:00:00 2001 From: Pierre Mesure Date: Fri, 7 Dec 2018 07:27:59 +0100 Subject: [PATCH] Adding clustering --- app/assets/javascripts/application.js | 1 + app/assets/javascripts/map.js | 13 ++++++++++--- app/assets/stylesheets/application.scss | 2 ++ app/components/shared/map_location_component.rb | 1 + package-lock.json | 11 ++++++++++- package.json | 3 ++- spec/system/budgets/budgets_spec.rb | 16 ++++++++++++++++ 7 files changed, 42 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 3c81c4161..d98cd74ac 100644 --- a/app/assets/javascripts/application.js +++ b/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 diff --git a/app/assets/javascripts/map.js b/app/assets/javascripts/map.js index 2dc25b557..0dbbf77f4 100644 --- a/app/assets/javascripts/map.js +++ b/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; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 1e4373b43..623a4d185 100644 --- a/app/assets/stylesheets/application.scss +++ b/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"; diff --git a/app/components/shared/map_location_component.rb b/app/components/shared/map_location_component.rb index b4fbca49e..a2a22963b 100644 --- a/app/components/shared/map_location_component.rb +++ b/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 diff --git a/package-lock.json b/package-lock.json index 7bcd0376b..ff4f44760 100644 --- a/package-lock.json +++ b/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" + } } } } diff --git a/package.json b/package.json index 2e861dbb9..52840e44c 100644 --- a/package.json +++ b/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" } } diff --git a/spec/system/budgets/budgets_spec.rb b/spec/system/budgets/budgets_spec.rb index 35d1e3f1e..9b6207af5 100644 --- a/spec/system/budgets/budgets_spec.rb +++ b/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