marker clusterization

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;
 }

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>

src/styles/colors.less

@@ -30,3 +30,4 @@
 @tooltip_background: #123740;
 
 @loading_shade: darken(fade(@blue_secondary, 80%), 20%);
+@cluster_small: #0069a7;

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;
+  }
+}

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>
+  `
+});