Use a MarkerClusterGroup for the vending machines layer

Note that this does not affect the vending machines viewed as part of the
indoor map.

1 files changed, 36 insertions, 14 deletions

diff --git a/src/leaflet-soton.js b/src/leaflet-soton.js
index ba5a138..3edb8ba 100644
--- a/src/leaflet-soton.js
+++ b/src/leaflet-soton.js
@@ -144,23 +144,45 @@
         getVendingMachinesLayer: function() {
             var features = this.data.vendingMachines.features;
 
-            var layer = new L.GeoJSON(features, {
-                pointToLayer: vendingPointToLayer,
-                onEachFeature: function(feature, layer) {
-                    layer.on('click', function(e) {
+            var layer = new L.MarkerClusterGroup({
+                maxClusterRadius: function(zoom) {
+                    if (zoom < 21) {
+                      return 80;
+                    } else {
+                      return 1;
+                    }
+                },
+                disableClusteringAtZoom: 22,
+                showCoverageOnHover: false,
+                iconCreateFunction: function(cluster) {
+                    return icons.vendingHotDrinks;
+                }
+            });
 
-                        // If this is a leaflet-soton map
-                        if ("showInfo" in this._map) {
-                          var popupOptions = {
-                              offset: icons.vendingHotDrinks.options.popupAnchor
-                          };
+            features.forEach(function(feature) {
+                if (!("geometry" in feature)) {
+                    return;
+                }
 
-                          var content = LS.infoTemplates.vendingMachine(feature.properties);
+                var latlon = L.GeoJSON.coordsToLatLng(feature.geometry.coordinates);
 
-                          this._map.showInfo(content, e.latlng, popupOptions);
-                        }
-                    });
-                }
+                var marker = vendingPointToLayer(feature, latlon);
+
+                marker.on('click', function(e) {
+
+                    // If this is a leaflet-soton map
+                    if ("showInfo" in this._map) {
+                      var popupOptions = {
+                          offset: icons.vendingHotDrinks.options.popupAnchor
+                      };
+
+                      var content = LS.infoTemplates.vendingMachine(feature.properties);
+
+                      this._map.showInfo(content, e.latlng, popupOptions);
+                    }
+                });
+
+                layer.addLayer(marker);
             });
 
             return layer;