From 59f5f9f361152dca105db2954137b5bfa77d7c2b Mon Sep 17 00:00:00 2001 From: Christopher Baines Date: Tue, 3 Mar 2015 20:37:58 +0000 Subject: Use a MarkerClusterGroup for the vending machines layer Note that this does not affect the vending machines viewed as part of the indoor map. --- src/leaflet-soton.js | 50 ++++++++++++++++++++++++++++++++++++-------------- 1 file 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; -- cgit v1.2.3