map = { let container = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); yield container; const map = L.map(container); const osmLayer = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', { attribution: 'Wikimedia maps beta, © OpenStreetMap contributors' }).addTo(map); const bicycleStationsLayer = L.geoJson(bicycleStations, { onEachFeature: function(feature, layer) { layer.bindTooltip(feature.properties.streetName, {sticky: true}); const totalSlots = Number(feature.properties.slots) + Number(feature.properties.bikes); const occupancyPercent = Math.floor((feature.properties.slots / totalSlots) * 100); console.log(feature.properties.type, totalSlots, occupancyPercent); layer.bindPopup(`

${feature.properties.streetName}

${feature.properties.slots} empty slots, ${feature.properties.bikes} bicycles. `); console.log(feature.properties.type); }, style: { weight: 5, color: '#432' } }); const markers = L.markerClusterGroup({ showCoverageOnHover: false }); markers.getAttribution = () => 'bicycle information is a derivative from Open Data BCN used under CC BY'; markers.addLayer(bicycleStationsLayer); map.addLayer(markers); map.fitBounds(markers.getBounds()); }