From 420ed400a66d86f2a5a2832a44defeae81bf1823 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Thu, 11 Jun 2020 23:22:26 +0200
Subject: [PATCH 1/3] MAPG-127 add leaflet.markercluster to yarn dependencies

---
 public/static/package.json | 3 ++-
 public/static/yarn.lock    | 5 +++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/public/static/package.json b/public/static/package.json
index 4647f50..664c47e 100644
--- a/public/static/package.json
+++ b/public/static/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
-    "leaflet": "^1.6.0"
+    "leaflet": "^1.6.0",
+    "leaflet.markercluster": "^1.4.1"
   }
 }
diff --git a/public/static/yarn.lock b/public/static/yarn.lock
index f324630..6dac2d6 100644
--- a/public/static/yarn.lock
+++ b/public/static/yarn.lock
@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+leaflet.markercluster@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz#b53f2c4f2ca7306ddab1dbb6f1861d5e8aa6c5e5"
+  integrity sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw==
+
 leaflet@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.6.0.tgz#aecbb044b949ec29469eeb31c77a88e2f448f308"

From a869a55b7ee9b8d39cc80edacba28370067070ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Thu, 11 Jun 2020 23:23:03 +0200
Subject: [PATCH 2/3] MAPG-127 load markercluster's CSS and JS in map_editor

---
 views/admin/map_editor.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/views/admin/map_editor.php b/views/admin/map_editor.php
index 7fc7707..46fc19d 100644
--- a/views/admin/map_editor.php
+++ b/views/admin/map_editor.php
@@ -1,4 +1,4 @@
-<?php $cssFiles = ['/static/node_modules/leaflet/dist/leaflet.css', '/static/css/map_editor.css']; ?>
+<?php $cssFiles = ['/static/node_modules/leaflet/dist/leaflet.css', '/static/css/map_editor.css', '/static/node_modules/leaflet.markercluster/dist/MarkerCluster.css', '/static/node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css']; ?>
 <?php require ROOT . '/views/templates/main_header.php'; ?>
 <div class="header small">
     <div class="grid">
@@ -68,6 +68,7 @@
     var places = <?= json_encode($places, JSON_FORCE_OBJECT) ?>;
 </script>
 <script src="/static/node_modules/leaflet/dist/leaflet.js"></script>
+<script src="/static/node_modules/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
 <script src="https://maps.googleapis.com/maps/api/js?key=<?= $_ENV['GOOGLE_MAPS_JS_API_KEY'] ?>"></script>
 <script src="/static/js/map_editor.js"></script>
 <?php require ROOT . '/views/templates/main_footer.php'; ?>
\ No newline at end of file

From 90ccdf6de7c00e6daacba070883e1a5f056c842d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?P=C5=91cze=20Bence?= <bence@pocze.ch>
Date: Thu, 11 Jun 2020 23:23:28 +0200
Subject: [PATCH 3/3] MAPG-127 cluster markers in map_editor

---
 public/static/js/map_editor.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/public/static/js/map_editor.js b/public/static/js/map_editor.js
index c426eeb..156d1ce 100644
--- a/public/static/js/map_editor.js
+++ b/public/static/js/map_editor.js
@@ -7,6 +7,7 @@
             description: null
         },
         map: null,
+        markers: null,
         panorama: null,
         selectedMarker: null,
         added: {},
@@ -129,6 +130,8 @@
             MapEditor.panorama.setVisible(false);
 
             if (marker.placeId) {
+                MapEditor.markers.removeLayer(MapEditor.selectedMarker);
+                MapEditor.map.addLayer(MapEditor.selectedMarker);
                 marker.setIcon(IconCollection.iconBlue);
                 marker.setZIndexOffset(2000);
 
@@ -168,6 +171,8 @@
             var placeId = MapEditor.selectedMarker.placeId
 
             if (places[placeId].id && !del) {
+                MapEditor.map.removeLayer(MapEditor.selectedMarker);
+                MapEditor.markers.addLayer(MapEditor.selectedMarker);
                 MapEditor.selectedMarker.setIcon(places[placeId].noPano ? IconCollection.iconRed : IconCollection.iconGreen);
                 MapEditor.selectedMarker.setZIndexOffset(1000);
             } else {
@@ -381,6 +386,10 @@
 
     MapEditor.map.fitBounds(L.latLngBounds({ lat: mapBounds.south, lng: mapBounds.west }, { lat: mapBounds.north, lng: mapBounds.east }));
 
+    MapEditor.markers = L.markerClusterGroup({
+        maxClusterRadius: 50
+    });
+
     for (var placeId in places) {
         if (!places.hasOwnProperty(placeId)) {
             continue;
@@ -392,7 +401,7 @@
             icon: place.noPano ? IconCollection.iconRed : IconCollection.iconGreen,
             zIndexOffset: 1000
         })
-            .addTo(MapEditor.map)
+            .addTo(MapEditor.markers)
             .on('click', function () {
                 MapEditor.select(this);
             });
@@ -400,6 +409,8 @@
         marker.placeId = place.id;
     }
 
+    MapEditor.map.addLayer(MapEditor.markers);
+
     MapEditor.panorama = new google.maps.StreetViewPanorama(document.getElementById('panorama'), {
         // switch off fullscreenControl because positioning doesn't work
         fullscreenControl: false,