2e:null 2f:["$","title",null,{"children":"Minneapolis Bikeway Map | Kjell Olsen | Observable"}] 34:T750,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,}) let osmLayerWikmedia = L.tileLayer('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}@2x.png', { attribution: 'Wikimedia maps | © OpenStreetMap contributors', }) let osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© 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) }35:T754,colorKey = { let sharrowLink = 'sharrows' let paintAintEnough = 'painted bike lanes' let red = `Red ${simpleColors || snowMode ? `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 || snowMode ? '' : `${yellow} `} ${simpleColors ? '' : `${green} `} ${blue} ${purple} ` : md`(Not sure why this is here, but if I change the ternary structure observable errors out)` }36:Tcbd,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: {tags: 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: {tags: 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: {tags: 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: {tags: 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 || snowMode ? 'red' : '#daa520', protection: 'unprotected'} } } // shared lanes are red function shared({properties: {tags: 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: {tags}}) { if(tags['highway'] === 'footway') { return {color: 'grey', protection: 'sidewalk', weight: 0, width: 0, 'stroke-width': 0, hide: true} } } function construction({properties: {tags}}) { if( tags['highway'] === 'construction' || tags['construction'] === 'cycleway' || tags['opening_date'] ) { return {color: 'orange', dashArray: '20 3'} } } return withDataAdded }37:T60c,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'}) }) } }38:[{"id":"9aa5eb6b907943666d0b52dc80eae8aff2b09b431a470a2b099cf90fa7543e54ad604fef65b61f35df1a9f3a9838cfa1a54910787ba2ea6353322e1f4787291b","href":"https://static.observableusercontent.com/files/9aa5eb6b907943666d0b52dc80eae8aff2b09b431a470a2b099cf90fa7543e54ad604fef65b61f35df1a9f3a9838cfa1a54910787ba2ea6353322e1f4787291b","name":"msp-bikeways.overpass-turbo.json","type":"application/json","lastModified":1576207538437.546,"size":1203061}] 32:{"id":"246db7923f8d2aca","slug":"render-a-bikeway-map-in-observable","title":"Minneapolis Bikeway Map","thumbnail":"ed79b8d00a892860ec7985e4b1ae113c4c96773a980644d3f18c6147f271f357","access_level":"public","create_time":"$D2019-11-06T19:07:29.078Z","update_time":"$D2020-09-29T22:18:04.747Z","view_time":null,"first_public_time":"$D2019-11-07T02:39:18.145Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"79a2b12eba5e6063","login":"kjell","name":"Kjell Olsen","avatar_url":"https://avatars-next.observableusercontent.com/637f747fa8a9c2b5fe28a7035e6f284e182f8c6fb94ac23b389d472b099c832f","tier":"starter_2024"},"version":560,"publish_version":560,"role":null,"authored":false,"authors":[{"type":"individual","id":"4e191ee0be04cec8","login":"kjell","name":"Kjell Olsen","avatar_url":"https://avatars-next.observableusercontent.com/637f747fa8a9c2b5fe28a7035e6f284e182f8c6fb94ac23b389d472b099c832f","tier":null}],"members":[{"type":"individual","id":"4e191ee0be04cec8","login":"kjell","name":"Kjell Olsen","avatar_url":"https://avatars-next.observableusercontent.com/637f747fa8a9c2b5fe28a7035e6f284e182f8c6fb94ac23b389d472b099c832f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Minneapolis Bikeway Map","cells":[{"id":0,"value":"md`# Minneapolis Bikeway Map\n\nBelow is a map of the bike infrastructure in the City of Minneapolis, graded by how \"protected\" each instance is. The color code is spelled out below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"// TODO hide this when simplify colors is on, because that also merges red and yellow\n\nviewof snowMode = checkbox({\n description: \"In the winter, unprotected paint only bike lanes are unusable because of the City's refusal to enforce Minnesota's 'no parking in the bike lane' law. This colors both painted and shared bike facilities red to indicate how dangerous they become.\",\n options: [{ value: \"toggle\", label: \"Snow Mode\" }],\n value: \"offByDefault\",\n style: 'display: none',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"md`## TODO / Ideas\n\n☐ improve first load experience - ~10s in a private browser window \n☐ fix Marq and 2nd Ave downtown where \\`cycleway:left: opposite_share_busway\\` renders green. I think it should be red or yellow? …Then all the other odd data edge cases. \n✓ key to show what different colors mean \n☐ add an input to change city (ie choose St Paul. also a button to fetch the latest from overpass) \n☐ animate the map, cycling from all to each individual type? \n☐ fix bug to enable entering full screen mode - L.Control.fullscreen doesn't work \n✓ \"snow mode\" checkbox that changes all the yellow lanes to red \n☐ 'Only show safe' / 'Only show unsafe' buttons? \n☐ 'invert button' to toggle all the layers (for all the layers: if it's on, turn it off; off, turn it on) \n\nPlease fork this to add your own ideas or [email me](mailto:kjell+bikeway@leanside.com) to talk about them.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"popupBuilder = {\n return function(feature, layer) {\n const {name, ...otherTags} = feature.properties.tags || {}\n \n layer.bindPopup(`${name ? `

${name}

` : ''}\n

${tagName}: ${val}

`)\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"// TODO add an input that allows for changing which city(ies) are shown here\n//viewof cities = html``\ncities = \"Minneapolis\"\n// cities = \"Minneapolis\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"preloadedData = FileAttachment(\"msp-bikeways.overpass-turbo.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"queryOverpass = require('https://bundle.run/query-overpass@1.5.4')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"import {localStorage} from \"@mbostock/safe-local-storage\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"L.fullscreen = resolve('leaflet-fullscreen/dist/Leaflet.fullscreen.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"R = require('ramda@0.25.0/dist/ramda.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"