31:T6f3,map = { let container = DOM.element('div', { style: `width:${width}px;height:${width / 1.1}px;` }); yield container; // Now we create a map object and add a layer to it. let map = L.map(container, { fullscreenControl1: true }); 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); // for some reason this toggles fullscreen then leaves fullscreen. Tested so far in safari. iframe issue?!? // pseudoFullscreen: true doesn't work in observable either // L.Control.Fullscreen doesn't get defined in Firefox or Chrome? That's why it's `&&`ed // back out for now L.Control.Fullscreen && map.addControl(new L.Control.Fullscreen({ position: 'bottomleft' })); osmLayer.setOpacity(0.3); let allDataLayer = L.geoJSON(protectionLevels, { style: feature => feature.properties }); //.addTo(map) let differentDataLayers = R.omit(['sidewalk'], protectionLayers); Object.values(differentDataLayers).map(layer => map.addLayer(layer)); // L.control.layers({}, { // // List these out one by one to ensure they are in the right order. …smh JS can't sort an object… // 'Shared': differentDataLayers.shared, // 'Unprotected': differentDataLayers.unprotected, // 'Bollards': differentDataLayers.bollards, // 'Protected': differentDataLayers.protected, // 'Dedicated': differentDataLayers.dedicated // }).addTo(map) const bounds = allDataLayer.getBounds(); map.fitBounds(bounds); map.setMinZoom(map.getZoom()); map.setMaxBounds(bounds); }32:T76e,colorKey = { let sharrowLink = 'sharrows'; let paintAintEnough = 'painted bike lanes'; let red = `Red ${ simpleColors ? `bike lanes are shared with cars: ${sharrowLink} or ${paintAintEnough}.` : `are ${sharrowLink}, which might actually be more dangerous than roads with no special bike markings.` }`; let yellow = `Yellow are ${paintAintEnough}, where cars can constantly put vulnerable road users in danger.`; let green = `Green is a 'delineator'/flexpost/bollard protected lane. (Better than nothing, but usually cars just swerve between the bollards when they want to put VRUs in danger.)`; let blue = `Blue lanes are physically separated from car traffic in some fashion: ${ simpleColors ? `bollards, ` : `` } concrete curbs, planters, continuous metal rails, …. Sadly, until the city reduces reckless driver behavior even this often isn't enough to feel safe outside of a car.`; let purple = `Purple signifies an off-road bike trail or parkway.`; return true ? md` ${red} ${simpleColors ? '' : `${yellow} `} ${simpleColors ? '' : `${green} `} ${blue} ${purple} ` : md`(Not sure why this is here, but if I change the ternary structure observable errors out)`; }33:Teb3,protectionLevels = { const defaultStyles = { color: 'black' }; const withDataAdded = data ? { ...data, generator: `modified for Our Streets Minneapolis${ data.generator ? ` ${data.generator};` : '' }`, features: data.features.map(cleanAndIDFeature) } : {}; /* This will look at a feature's `properties` to determine * what "level of bikeway protection" it has and assign it * a color (and other visual attributes) accordingly */ function cleanAndIDFeature(feature, id) { let styles = [ sidewalk(feature), construction(feature), dedicated(feature), physicallyProtected(feature), bollardProtected(feature), // buffered(feature), unprotected(feature), shared(feature), defaultStyles ] .filter(id => id) .reverse(); const style = Object.assign(...styles); return { ...feature, properties: { ...feature.properties, ...style } }; } // purple function dedicated({ properties: props }) { if ( props['highway'] === 'cycleway' || props['highway'] === 'path' || // (props['footway'] === 'sidewalk' && props['bicycle'] === 'designated') || (props['highway'] === 'pedestrian' && props['bicycle'] === 'designated' && props['cycleway'] !== 'no') ) { return { color: 'purple', protection: 'dedicated' }; } } // blue function physicallyProtected({ properties: props }) { if ( [ props['cycleway:track'], props['cycleway:right:track'], props['cycleway:left:track'] ].indexOf('curb') > -1 || [ props['cycleway:track'], props['cycleway:right:track'], props['cycleway:left:track'] ].indexOf('planter') > -1 ) { return { color: 'blue', protection: 'protected' }; } } // green function bollardProtected({ properties: props }) { if ( [ props['cycleway'], props['cycleway:right'], props['cycleway:left'] ].indexOf('track') > -1 ) { //if(props['name'] === '"2nd Avenue South"') debugger return { color: simpleColors ? 'blue' : 'green', protection: 'bollards' }; } } // yellow (`#daa520`) function unprotected({ properties: props }) { if ( [ props['cycleway'], props['cycleway:right'], props['cycleway:left'] ].indexOf('lane') > -1 || [ props['cycleway'], props['cycleway:right'], props['cycleway:left'] ].indexOf('share_busway') > -1 ) { return { color: simpleColors ? 'red' : '#daa520', protection: 'unprotected' }; } } // shared lanes are red function shared({ properties: props }) { if (props.highway === 'footway') return {}; if ( props['cycleway'] === 'shared_lane' || props['cycleway:right'] === 'shared_lane' || props['cycleway:left'] === 'shared_lane' || (props['bicycle'] === 'designated' && props['cycleway'] === 'no') || (props['highway'] && props['bicycle'] === 'designated') ) { return { color: 'red', protection: 'shared' }; } } function sidewalk({ properties: props }) { if (props['highway'] === 'footway') { return { color: 'grey', protection: 'sidewalk', weight: 0, width: 0, 'stroke-width': 0, hide: true }; } } function construction({ properties: props }) { if ( props['highway'] === 'construction' || props['construction'] === 'cycleway' || props['opening_date'] ) { return { color: 'orange', dashArray: '20 3' }; } } return withDataAdded; }34:T6b6,data = { let existingData = JSON.parse(localStorage.getItem(cities)); // TODO add a boolean to bypass the preloaded data and fetch from // overpass after all. Some loading UI would also be nice? if (!existingData && preloadedData) { console.info('using preloaded map data'); existingData = preloadedData; } console.info('finding data', { cities, existingData, preloadedData }); if ( existingData && existingData.features && existingData.features.length > 0 ) { console.info('data already fetched, using existing'); return existingData; } else { console.info('querying overpass…'); // localStorage.removeItem(cities) return new Promise((resolve, reject) => { queryOverpass( query, function(error, data) { console.info('overpass query returned', { error, data, query }); if (error && error.statusCode === 429) return console.error('rate limited! oops'); // if(error) return {error: true, time: new Date(), ...error} // localStorage // .setItem(cities, JSON.stringify(data)) // .then(val => { // console.info('data saved locally'); // }) // .catch(err => { // // TODO handle localStorage QuotaExceeded error here. Delete other data? Seems bad. // // Safari won't let me store both Mpls and (Mpls; St. Paul) - chrome appears to // // have a higher localStorage limit? // console.error('localStorage failed to save', err); // }); resolve(data); }, { overpassUrl: 'https://overpass-api.de/api/interpreter' } ); }); } }35:[{"id":"72911177635eaa39e9e63cffc6eae264bc2b185f36cecd03c3dc4f4a5ce59df3e5616ed1863f17ed39accc4660e5a1b930f2655959fb0ee56329ecde28d8c633","href":"https://static.observableusercontent.com/files/72911177635eaa39e9e63cffc6eae264bc2b185f36cecd03c3dc4f4a5ce59df3e5616ed1863f17ed39accc4660e5a1b930f2655959fb0ee56329ecde28d8c633","name":"pdx-bikeways@1.geojson","type":"application/geo+json","lastModified":1589846935972.969,"size":10262914}] 2f:{"title":"Portland Bikeway Map","cells":[{"id":0,"value":"md`# Portland Bikeway Map\n\nBelow is a map of the bike infrastructure in the City of Portland, graded by how \"protected\" each instance is. The color code is spelled out below.\n\nCredits to Kjell Olsen to their [Minneapolis Bikeway Map](https://observablehq.com/@kjell/render-a-bikeway-map-in-observable)\n\nNOTE: This map is purely for analysis. This map should not be used for directions or navigation purposes.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"viewof simpleColors = checkbox({\n description: \"When checked, use 3 colors (off-road, protected, not protected). Otherwise each level gets its own color\",\n options: [{ value: \"toggle\", label: \"Simplify Color Scheme\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"protectionLayers = R.mapObjIndexed(\n (features, protection) => L.geoJson(\n {type: 'FeatureCollection', features},\n {\n ...features[0].properties,\n color: features[0].properties.color, \n weight: features[0].properties.weight || 3,\n onEachFeature: popupBuilder\n }\n ),\n R.groupBy(feat => feat.properties.protection, protectionLevels.features)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"popupBuilder = {\n return function(feature, layer) {\n const { name, ...otherTags } = feature.properties || {};\n\n layer.bindPopup(`${name ? `

${name}

` : ''}\n

${tagName}: ${val}

`);\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"// TODO add an input that allows for changing which city(ies) are shown here\n//viewof cities = html``\ncities = \"Portland\"\n// cities = \"Minneapolis\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"preloadedData = FileAttachment(\"pdx-bikeways@1.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"query = `\n[out:json];\n\n// Minneapolis + St Paul\n// (area[name=\"Minneapolis\"]; area[name=\"St. Paul\"];)->.searchArea;\n// area[name=\"${cities}\"]->.searchArea;\n// area[name=\"Chicago\"]->.searchArea;\n(${cities.split('; ').map(c => `area[name=\"${c}\"];`).join(\" \")})->.searchArea;\n// area[\"@id\"=10134135]->.searchArea; // How to target a specific area? (here, the relation for Seward)\n\n// gather bikeways\n(\n way[\"highway\"=cycleway][highway!=footway](area.searchArea);\n way[\"bicycle\"=designated](area.searchArea);\n way[\"cycleway\"][\"cycleway\"!=\"no\"](area.searchArea);\n way[\"cycleway:left\"][\"cycleway:left\"!=\"no\"](area.searchArea);\n way[\"cycleway:right\"][\"cycleway:right\"!=\"no\"](area.searchArea);\n way[highway=construction][bicycle=yes](area.searchArea);\n /* rel[route=bicycle][network=lcn](area.searchArea); */\n) -> .bikeways;\n\n// exclude 'Iron Horse Trail' in Alberta CA which is inexplicably included in the above query\n(.bikeways; - way(14975481););\n\nout body;\n>;\nout skel qt;`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"queryOverpass = require('https://bundle.run/query-overpass@1.5.5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"L = require('leaflet@1.6.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"L.fullscreen = resolve('leaflet-fullscreen/dist/Leaflet.fullscreen.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"R = require('ramda@0.25.0/dist/ramda.min.js')","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}