feat(been): cluster duplicate checkins with Leaflet.markercluster

_includes/layouts/base.njk

@@ -136,7 +136,10 @@
   {# CSS is synchronous (Leaflet requires CSS before map init); JS is non-deferred (inline init script runs synchronously in body) #}
   {% if leafletMap %}
   <link rel="stylesheet" href="/css/leaflet.css?v={{ '/css/leaflet.css' | hash }}">
+  <link rel="stylesheet" href="/css/markercluster.css?v={{ '/css/markercluster.css' | hash }}">
+  <link rel="stylesheet" href="/css/markercluster.default.css?v={{ '/css/markercluster.default.css' | hash }}">
   <script src="/js/vendor/leaflet.js?v={{ '/js/vendor/leaflet.js' | hash }}"></script>
+  <script src="/js/vendor/leaflet.markercluster.js?v={{ '/js/vendor/leaflet.markercluster.js' | hash }}"></script>
   {% endif %}
 </head>
 <body{% if pagefindIgnore %} data-pagefind-ignore="all"{% endif %}>

been.njk

@@ -43,6 +43,7 @@ leafletMap: true
       function escHtml(s) {
         return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
       }
+      var cluster = L.markerClusterGroup({ maxClusterRadius: 40 });
       var markers = checkinPoints.map(function(p) {
         var safeName = escHtml(p.name);
         var safeUrl = (p.url && p.url.indexOf('https://') === 0) ? p.url : '';
@@ -51,9 +52,9 @@ leafletMap: true
           : safeName;
         return L.marker([p.lat, p.lng]).bindPopup(popup);
       });
-      markers.forEach(function(m) { m.addTo(map); });
+      markers.forEach(function(m) { cluster.addLayer(m); });
-      var group = L.featureGroup(markers);
+      map.addLayer(cluster);
-      map.fitBounds(group.getBounds().pad(0.2), { maxZoom: 13 });
+      map.fitBounds(cluster.getBounds().pad(0.2), { maxZoom: 13 });
     })();
   </script>
   {% endif %}

css/markercluster.css

@@ -0,0 +1,14 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}

css/markercluster.default.css

@@ -0,0 +1,60 @@
+.marker-cluster-small {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-small div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+.marker-cluster-medium {
+	background-color: rgba(241, 211, 87, 0.6);
+	}
+.marker-cluster-medium div {
+	background-color: rgba(240, 194, 12, 0.6);
+	}
+
+.marker-cluster-large {
+	background-color: rgba(253, 156, 115, 0.6);
+	}
+.marker-cluster-large div {
+	background-color: rgba(241, 128, 23, 0.6);
+	}
+
+	/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+	background-color: rgb(181, 226, 140);
+	}
+.leaflet-oldie .marker-cluster-small div {
+	background-color: rgb(110, 204, 57);
+	}
+
+.leaflet-oldie .marker-cluster-medium {
+	background-color: rgb(241, 211, 87);
+	}
+.leaflet-oldie .marker-cluster-medium div {
+	background-color: rgb(240, 194, 12);
+	}
+
+.leaflet-oldie .marker-cluster-large {
+	background-color: rgb(253, 156, 115);
+	}
+.leaflet-oldie .marker-cluster-large div {
+	background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.marker-cluster span {
+	line-height: 30px;
+	}