45:["$","title",null,{"children":"Explore SharedStreets References | Kevin Webb | Observable"}] 4d:T1352,streetMap = { var map = new mapboxgl.Map({ container: streetMapContainer, center: mapCenter, zoom: 15, style: 'mapbox://styles/mapbox/light-v9' }); var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on('mouseenter', 'shstData', function(e) { console.log(e); // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var description = "ShSt Geometry Id: " + e.features[0].properties.id + "
"; description += "Road Class: " + e.features[0].properties.roadClass + "
"; var forwardRef = JSON.parse(e.features[0].properties.forwardReference); description += "Forward RefId: " + forwardRef.id + "
"; if(e.features[0].properties.backReference != "null") { var backRef = JSON.parse(e.features[0].properties.backReference); description += "Back RefId: " + backRef.id + "
"; } var fromIntersection = JSON.parse(e.features[0].properties.fromIntersection); var toIntersection = JSON.parse(e.features[0].properties.toIntersection); var metadata = JSON.parse(e.features[0].properties.metadata); description += "From OSM node: " + fromIntersection.nodeId; description += " to node: " + toIntersection.nodeId + "
"; var wayIds = []; for(var way of metadata.waySections) { wayIds.push(way.wayId); } description += "OSM ways: " + wayIds.join(",") + "
"; // Ensure that if the map is zoomed out such that multiple // copies of the feature are visible, the popup appears // over the copy being pointed to. // while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { // coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; // } // Populate the popup and set its coordinates // based on the feature found. popup.setLngLat(e.lngLat) .setHTML(description) .addTo(map); }); map.on('click', function() { map.getCanvas().style.cursor = ''; popup.remove(); }); var init = false; var scaledWidth = (width) => {return { "type": "exponential", "base": 2, "stops": [ [10, width * Math.pow(2, (10 - 16))], [16, width * Math.pow(2, (16 - 16))] ] }}; var initMap = () => { if(!init) { map.addSource("shstData",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "shstData", "type": "line", "source": "shstData", "paint": { "line-color": [ 'match', ['get', 'roadClass'], 'Motorway', '#fbb03b', 'Trunk', '#e55e5e', 'Primary', '#e55e5e', 'Secondary', '#3bb2d0', 'Tertiary', '#3bb2d0', 'Residential', '#3bf2d0', 'Unclassified', '#3bb2f0', 'Service', '#fbb2d0', /* other */ '#ccc' ], "line-width": scaledWidth(4), "line-dasharray": [1.0, 0.5] } }); // map.addLayer({ // "id": "shstDataCompare", // "type": "line", // "source": "shstData", // "paint": { // "line-color": [ // 'match', // ['get', 'matchType'], // 'unchanged', '#ccc', // 'matched_ref_changed', 'green', // 'matched_geom_changed', 'orange', // 'matched_candidates', 'blue', // 'unmatched', 'red', // /* other */ 'teal' // ], // "line-width": scaledWidth(4), // "line-dasharray": [1.0, 0.5] // } // }); // Create a popup, but don't add it to the map yet. var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); init = true; } }; return Generators.observe(change => { var initialValue = {map: map, isInit:init, bounds:undefined}; change(initialValue); map.on('load', (evt) => { initMap(); var updateValue = {map: map, isInit:init, bounds:undefined}; change(updateValue); }); map.on('boxzoomend', e => { var updateValue = {map: map, isInit:init, bounds:e.boxZoomBounds}; change(updateValue); }); }); }4e:[] 49:{"id":"92e7fe5ee615f5b1","slug":"exploring-sharedstreets-references","title":"Explore SharedStreets References","thumbnail":"d2cc8e65bd87b9242efcc0939ec4e5eb856408d867369cf8086f551f0d09b165","access_level":"public","create_time":"$D2019-02-06T16:37:22.964Z","update_time":"$D2019-03-26T18:30:40.623Z","view_time":null,"first_public_time":"$D2019-02-06T17:44:20.473Z","has_unpublished_edits":null,"fork":{"id":"91085d7cc25b7721","slug":"comparing-and-fast-forwarding-sharedstreets-references","title":"Comparing (and fast-forwarding) SharedStreets References","owner":{"id":"a64354931bab0b08","login":"kpwebb","name":"Kevin Webb"}},"stars":0,"starred":false,"owner":{"type":"team","id":"a64354931bab0b08","login":"kpwebb","name":"Kevin Webb","avatar_url":"https://avatars-next.observableusercontent.com/c66a6f9dd4ec19f0d2193a376e4f6a934f755ccaf76493919dc315d9f1b1119b","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":274,"publish_version":274,"role":null,"authored":false,"authors":[{"type":"individual","id":"11bd00d66734027d","login":"kpwebb","name":"Kevin Webb","avatar_url":"https://avatars-next.observableusercontent.com/c66a6f9dd4ec19f0d2193a376e4f6a934f755ccaf76493919dc315d9f1b1119b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"11bd00d66734027d","login":"kpwebb","name":"Kevin Webb","avatar_url":"https://avatars-next.observableusercontent.com/c66a6f9dd4ec19f0d2193a376e4f6a934f755ccaf76493919dc315d9f1b1119b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Explore SharedStreets References","cells":[{"id":0,"value":"md`# Explore SharedStreets References\n\nShift key + drag to select area for query.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"streetMapContainer = html`

` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"html`Lines represent SharedStreets Geometries. Color represents roadClass. Hover over segments for metadata.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof dataSource1 = select({title:\"Original dataSource\", options: osmDataSources()})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"viewof tileHierarchy1 = select({title:\"Original tileHierarchy\", options: dataSourceHierarchy(dataSource1)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"shstData = { \n results = {type:\"FeatureCollection\", features:[]}; \n if(streetMap.isInit && streetMap.bounds) { \n \n var bbox = streetMap.bounds._sw.lng + ',' + streetMap.bounds._sw.lat + ',' + streetMap.bounds._ne.lng + ',' + streetMap.bounds._ne.lat; \n var results = await d3.json(server + \"v0.1.0/geom/within?includeMetadata=true&dataSource=osm/\" + dataSource1 + \"&tileHierarchy=\" + tileHierarchy1 + \"&\" + authKey + \"&bounds=\" + bbox, {\n method:\"GET\"\n }); \n \n streetMap.map.getSource(\"shstData\").setData(results); \n }\n return results;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"dataSources = d3.json(server + 'v0.1.0/data/sources')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"osmDataSources = () => Object.keys(dataSources['osm'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"dataSourceHierarchy = function(source){return dataSources['osm'][source]}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"server = 'https://api.sharedstreets.io/'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"authKey = \"authKey=bdd23fa1-7ac5-4158-b354-22ec946bb575\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"mapCenter = { \n return [-122.4194, 37.7749];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.48.0');\n mapboxgl.accessToken = 'pk.eyJ1IjoidHJhbnNwb3J0cGFydG5lcnNoaXAiLCJhIjoiY2ppNnhwank3MDVobjNrazJhaWY2YzF2aiJ9.iWYaTrAHvt_IayxLeZjv6w';\n return mapboxgl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"mapboxCss = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"import {select} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 44:null