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 @@
+
+
+
+
+
+
+
@@ -390,5 +397,5 @@
-
+
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: `
+
+
+
+ `
+});