diff options
| -rw-r--r-- | src/leaflet-soton.js | 50 |
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; |