31:Tde2,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()); }32:T460,html` `33:[] 2f:{"title":"Slow Streets | Safe Streets Map","cells":[{"id":39,"value":"md`# Slow Streets | Safe Streets Map\n\nUsing [Leaflet](https://leafletjs.com), [Open Cycle Map](https://www.opencyclemap.org/), and [Portland's Open Data Portal](https://gis-pdx.opendata.arcgis.com/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":384,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"function fetchJSON(url) {\n return fetch(url).then(r => r.json())\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"greenways_geojson = fetchJSON(\n 'https://rjsheperd.nyc3.digitaloceanspaces.com/public/greenways_geojson.json'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"barriers_geojson = fetch(\n 'https://rjsheperd.nyc3.digitaloceanspaces.com/public/barriers_geojson.json'\n).then(r => r.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"planned_geojson = fetchJSON(\n 'https://rjsheperd.nyc3.digitaloceanspaces.com/public/planned_geojson.json'\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"L = require('leaflet@latest')","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"(L.fullscreen = resolve('leaflet-fullscreen/dist/Leaflet.fullscreen.min.js'))","pinned":true,"hidden":false,"mode":"ojs"},{"id":397,"value":"html``\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}