From 9d48c479a592fbc2eedaa6d09f6929b600d5b579 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Wed, 20 Feb 2019 11:31:01 +0700
Subject: [PATCH] marker clusterization

---
 package-lock.json        |  5 +++++
 package.json             |  1 +
 src/modules/Stickers.js  | 25 +++++++++++++++++++++----
 src/sprites/icon.svg     |  9 ++++++++-
 src/styles/colors.less   |  1 +
 src/styles/map.less      | 24 ++++++++++++++++++++++++
 src/utils/clusterIcon.js | 13 +++++++++++++
 7 files changed, 73 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/clusterIcon.js

diff --git a/package-lock.json b/package-lock.json
index 3baed82..14a6295 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7172,6 +7172,11 @@
         "osrm-text-instructions": "^0.11.5"
       }
     },
+    "leaflet.markercluster": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz",
+      "integrity": "sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw=="
+    },
     "less": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/less/-/less-3.9.0.tgz",
diff --git a/package.json b/package.json
index 25f6808..8ae478c 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "leaflet-editable-polyline": "muerwre/leaflet-editable-polyline#master",
     "leaflet-geometryutil": "^0.9.0",
     "leaflet-routing-machine": "muerwre/leaflet-routing-machine#no-osrm-text",
+    "leaflet.markercluster": "^1.4.1",
     "less": "^3.8.1",
     "less-middleware": "~2.2.1",
     "lodash": "^4.17.10",
diff --git a/src/modules/Stickers.js b/src/modules/Stickers.js
index 62e96af..a8726ee 100644
--- a/src/modules/Stickers.js
+++ b/src/modules/Stickers.js
@@ -1,5 +1,8 @@
-import { layerGroup } from 'leaflet';
+import L, { layerGroup } from 'leaflet';
 import { Sticker } from '$modules/Sticker';
+import 'leaflet.markercluster';
+import icons from '$sprites/icon.svg';
+import { clusterIcon } from '$utils/clusterIcon';
 
 export class Stickers {
   constructor({ map, lockMapClicks, triggerOnChange }) {
@@ -7,13 +10,25 @@ export class Stickers {
     this.layer = layerGroup();
     this.triggerOnChange = triggerOnChange;
 
+    this.clusterLayer = L.markerClusterGroup({
+      spiderfyOnMaxZoom: false,
+      showCoverageOnHover: false,
+      zoomToBoundsOnClick: true,
+      animate: false,
+      maxClusterRadius: 80,
+      disableClusteringAtZoom: 15,
+      iconCreateFunction: clusterIcon,
+    }).addTo(map);
+
     this.lockMapClicks = lockMapClicks;
     this.stickers = [];
 
     this.layer.addTo(this.map);
   }
 
-  createSticker = ({ latlng, sticker, angle = 2.2, text = '', set }) => {
+  createSticker = ({
+    latlng, sticker, angle = 2.2, text = '', set
+  }) => {
     const marker = new Sticker({
       latlng,
       angle,
@@ -28,7 +43,7 @@ export class Stickers {
 
     this.stickers.push(marker);
 
-    marker.marker.addTo(this.map);
+    marker.marker.addTo(this.clusterLayer);
 
     this.triggerOnChange();
     // marker.marker.enableEdit();
@@ -39,7 +54,7 @@ export class Stickers {
 
     if (index < 0) return;
 
-    this.map.removeLayer(ref.marker);
+    this.clusterLayer.removeLayer(ref.marker);
     this.stickers.splice(index, 1);
 
     this.triggerOnChange();
@@ -62,4 +77,6 @@ export class Stickers {
   stopEditing = () => {
     this.stickers.map(sticker => sticker.stopEditing());
   };
+
+  clusterLayer;
 }
diff --git a/src/sprites/icon.svg b/src/sprites/icon.svg
index d8be6ff..be97664 100644
--- a/src/sprites/icon.svg
+++ b/src/sprites/icon.svg
@@ -379,6 +379,13 @@
                 <circle cx="16" cy="16" fill="white" r="4" />
             </g>
 
+            <g id="icon-cluster-1" stroke="none">
+                <rect x="0" y="0" width="32" height="32" fill="black" stroke="none" />
+                <circle cx="10" cy="21" fill="white" r="4" />
+                <circle cx="22" cy="21" fill="white" r="4" />
+                <circle cx="16" cy="11" fill="white" r="4" />
+            </g>
+
             <g id="icon-sad-1" stroke="none">
                 <path stroke="none" fill="black"/>
                 <g transform="translate(4 4)">
@@ -390,5 +397,5 @@
         </svg>
     </defs>
 
-    <use xlink:href="#icon-sad-1" />
+    <use xlink:href="#icon-cluster-1" />
 </svg>
diff --git a/src/styles/colors.less b/src/styles/colors.less
index 621f29e..4a1da8b 100644
--- a/src/styles/colors.less
+++ b/src/styles/colors.less
@@ -30,3 +30,4 @@
 @tooltip_background: #123740;
 
 @loading_shade: darken(fade(@blue_secondary, 80%), 20%);
+@cluster_small: #0069a7;
diff --git a/src/styles/map.less b/src/styles/map.less
index f808c15..a033225 100644
--- a/src/styles/map.less
+++ b/src/styles/map.less
@@ -107,3 +107,27 @@
 .leaflet-top {
   top: 42px;
 }
+
+.leaflet-div-icon {
+  background: none;
+  border: none;
+}
+.custom-marker-cluster {
+  width: 24px;
+  height: 24px;
+  background: @cluster_small;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  box-shadow: fade(@cluster_small, 70%) 0 0 0 5px;
+  font-weight: bold;
+  font-size: 13px;
+  transform: translate(-12px, -12px);
+  transition: box-shadow 250ms;
+
+  &:hover {
+    box-shadow: fade(@cluster_small, 70%) 0 0 0 7px;
+  }
+}
diff --git a/src/utils/clusterIcon.js b/src/utils/clusterIcon.js
new file mode 100644
index 0000000..2224df4
--- /dev/null
+++ b/src/utils/clusterIcon.js
@@ -0,0 +1,13 @@
+import { divIcon } from 'leaflet';
+
+export const clusterIcon = () => divIcon({
+  html: `
+    <div class="custom-marker-cluster">          
+      <svg width="24" height="24" viewBox="-2 -2 36 36">            
+        <circle cx="10" cy="20" fill="white" r="4" />
+        <circle cx="22" cy="20" fill="white" r="4" />
+        <circle cx="16" cy="10" fill="white" r="4" />  
+      </svg>
+    </div>
+  `
+});