map = { // You'll often see Leaflet examples initializing a map like L.map('map'), // which tells the library to look for a div with the id 'map' on the page. // In Observable, we instead create a div from scratch in this cell, so it's // completely self-contained. let container = DOM.element('div', { style: `width:${width}px;height:${width / 1.6}px`, class: 'map' }); // Note that I'm yielding the container pretty early here: this allows the // div to be placed on the page. This is important, because Leaflet uses // the div's .offsetWidth and .offsetHeight to size the map. If I were // to only return the container at the end of this method, Leaflet might // get the wrong idea about the map's size. yield container; // Now we create a map object and add a layer to it. let map = L.map(container); const apiKey = 'e249cd1fdb1e4e54a60d30b70cd64e5d'; let osmLayer = L.tileLayer( 'https://b.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=' + apiKey, { opacity: 0.8, attribution: 'OpenCycleMap | © OpenStreetMap contributors' } ).addTo(map); osmLayer.setOpacity(0.3); let greenways = L.geoJSON(greenways_geojson, { weight: 3, color: 'green' }).bindPopup(layer => layer.feature.properties.segmentnam); let planned_greenways = L.geoJSON(planned_geojson, { weight: 3, color: '#0868ac', dashArray: '5 10', opacity: 1 }).bindPopup(layer => `${layer.feature.properties.segmentnam} - PLANNED`); function barrierIcon(id) { return L.divIcon({ className: 'barrier-icon--wrapper', iconSize: 40, html: `

${id}

` }); } let barriers = L.geoJSON(barriers_geojson, { pointToLayer: (geojsonPoint, latlng) => { const barrier_id = geojsonPoint.properties.barrier_id; return L.marker(latlng, { icon: barrierIcon(barrier_id) }); } // L.circleMarker(latlng, { radius: 4, color: 'orange' }) }).bindPopup(layer => layer.feature.properties.name.replace( /\d\d\./, layer.feature.properties.barrier_id + ' - ' ) ); const layers_order = [barriers, greenways, planned_greenways]; _.reverse(layers_order).forEach(l => l.addTo(map)); var legend = L.control({ position: 'bottomleft' }); legend.onAdd = function(map) { var div = L.DomUtil.create('div', 'info legend'); let labels = ['Legend'], categories = [ { label: 'Slow Streets Barriers', color: 'orange' }, { label: 'Active Greenways', color: 'green' }, { label: 'Planned Greenways', color: '#0868ac' } ]; for (var i = 0; i < categories.length; i++) { div.innerHTML += labels.push( ' ' + (categories[i] ? categories[i].label : '+') ); } div.innerHTML = labels.join('
'); return div; }; legend.addTo(map); map.on('zoom', e => { const zoom = map.getZoom(); const zoomClasses = _.filter(container.classList, c => c.startsWith('zoom') ); _.each(zoomClasses, c => container.classList.remove(c)); container.classList.add(`zoom-${zoom}`); }); // GeoLocation map.locate({ watch: true }); map.on('locationfound', e => container.dispatchEvent( new CustomEvent('locationfound', { bubbles: true, detail: { latlng: e.latlng } }) ) ); map.fitBounds(greenways.getBounds()); }

Purpose-built for displays of data