Use Leaflet Marker Cluster plugin

leaflet/markercluster.css

@@ -0,0 +1 @@
+.leaflet-cluster-anim .leaflet-marker-icon,.leaflet-cluster-anim .leaflet-marker-shadow{-webkit-transition:-webkit-transform .3s ease-out,opacity .3s ease-in;-moz-transition:-moz-transform .3s ease-out,opacity .3s ease-in;-o-transition:-o-transform .3s ease-out,opacity .3s ease-in;transition:transform .3s ease-out,opacity .3s ease-in}.leaflet-cluster-spider-leg{-webkit-transition:-webkit-stroke-dashoffset .3s ease-out,-webkit-stroke-opacity .3s ease-in;-moz-transition:-moz-stroke-dashoffset .3s ease-out,-moz-stroke-opacity .3s ease-in;-o-transition:-o-stroke-dashoffset .3s ease-out,-o-stroke-opacity .3s ease-in;transition:stroke-dashoffset .3s ease-out,stroke-opacity .3s ease-in}

leaflet/markercluster.default.css

@@ -0,0 +1 @@
+.marker-cluster-small{background-color:rgba(181,226,140,.6)}.marker-cluster-small div{background-color:rgba(110,204,57,.6)}.marker-cluster-medium{background-color:rgba(241,211,87,.6)}.marker-cluster-medium div{background-color:rgba(240,194,12,.6)}.marker-cluster-large{background-color:rgba(253,156,115,.6)}.marker-cluster-large div{background-color:rgba(241,128,23,.6)}.leaflet-oldie .marker-cluster-small{background-color:#b5e28c}.leaflet-oldie .marker-cluster-small div{background-color:#6ecc39}.leaflet-oldie .marker-cluster-medium{background-color:#f1d357}.leaflet-oldie .marker-cluster-medium div{background-color:#f0c20c}.leaflet-oldie .marker-cluster-large{background-color:#fd9c73}.leaflet-oldie .marker-cluster-large div{background-color:#f18017}.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}

original-assets/styles/styles.scss

@@ -269,6 +269,10 @@ details summary {
 
 #map {
   height: 400px;
+
+  * {
+    max-width: unset;
+  }
 }
 
 #announcement {

templates/assets/css/styles.css

@@ -228,6 +228,9 @@ details summary > *:first-child {
 #map {
   height: 400px;
 }
+#map * {
+  max-width: unset;
+}
 
 #announcement {
   padding: 5px;
@@ -244,25 +247,21 @@ details summary > *:first-child {
     --primary: #000;
     color: #000;
   }
-
   body {
     font-family: serif;
     max-width: inherit;
   }
-
   nav,
-.actions,
-#tts,
-#interactions,
-#tor,
-#announcement {
+  .actions,
+  #tts,
+  #interactions,
+  #tor,
+  #announcement {
     display: none;
   }
-
   a {
     text-decoration: none;
   }
-
   .e-content a[href]:after {
     content: " [" attr(href) "]";
   }

templates/assets/js/geomap.js

@@ -46,17 +46,17 @@
         }).addTo(map)
 
         // Load map features
+        let cluster = L.markerClusterGroup().addTo(map)
 
-        let features = []
         function fitFeatures() {
             // Make the map fit the features
-            map.fitBounds(L.featureGroup(features).getBounds(), { padding: [5, 5] })
+            map.fitBounds(cluster.getBounds(), { padding: [5, 5] })
         }
 
         // Map page
         getMapJson(mapEl.dataset.locations, locations => {
             locations.forEach(loc => {
-                features.push(L.marker([loc.Lat, loc.Lon]).addTo(map).on('click', function () {
+                cluster.addLayer(L.marker([loc.Lat, loc.Lon]).on('click', function () {
                     window.open(loc.Post, '_blank').focus()
                 }))
             })
@@ -66,12 +66,12 @@
             tracks.forEach(track => {
                 track.Paths.forEach(path => {
                     // Use random color on map page for paths to better differentiate
-                    features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: randomColor() }).addTo(map).on('click', function () {
+                    cluster.addLayer(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: randomColor() }).on('click', function () {
                         window.open(track.Post, '_blank').focus()
                     }))
                 })
                 track.Points.forEach(point => {
-                    features.push(L.marker([point.Lat, point.Lon]).addTo(map).on('click', function () {
+                    cluster.addLayer(L.marker([point.Lat, point.Lon]).on('click', function () {
                         window.open(track.Post, '_blank').focus()
                     }))
                 })
@@ -81,13 +81,13 @@
         // Post map
         getMapJson(mapEl.dataset.paths, paths => {
             paths.forEach(path => {
-                features.push(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: 'blue' }).addTo(map))
+                cluster.addLayer(L.polyline(path.map(point => [point.Lat, point.Lon]), { color: 'blue' }))
             })
             fitFeatures()
         })
         getMapJson(mapEl.dataset.points, points => {
             points.forEach(point => {
-                features.push(L.marker([point.Lat, point.Lon]).addTo(map))
+                cluster.addLayer(L.marker([point.Lat, point.Lon]))
             })
             fitFeatures()
         })
@@ -102,9 +102,26 @@
     css.href = '/-/leaflet/leaflet.css?v=1.9.4'
     document.head.appendChild(css)
 
+    // Marker Cluster plugin
+    let pluginCss1 = document.createElement('link')
+    pluginCss1.rel = 'stylesheet'
+    pluginCss1.href = '/-/leaflet/markercluster.css?v=1.5.3'
+    document.head.appendChild(pluginCss1)
+
+    let pluginCss2 = document.createElement('link')
+    pluginCss2.rel = 'stylesheet'
+    pluginCss2.href = '/-/leaflet/markercluster.default.css?v=1.5.3'
+    document.head.appendChild(pluginCss2)
+
     // JS
     let script = document.createElement('script')
     script.src = '/-/leaflet/leaflet.js?v=1.9.4'
-    script.onload = loadMap
+    script.onload = function () {
+        // Marker Cluster plugin
+        let plugin = document.createElement('script')
+        plugin.src = '/-/leaflet/markercluster.js?v=1.5.3'
+        plugin.onload = loadMap
+        document.head.appendChild(plugin)
+    }
     document.head.appendChild(script)
 })()