43:["$","title",null,{"children":"Matching road networks to SharedStreets | Emily Eros | Observable"}] 4b:T510,md` This site is both a demo **and** an interactive tool. You can use it to explore what SharedStreets can do using pre-populated data. It's also live code that you can interact with to upload, match, and export your own custom data. No coding skills are required - instructions are included along the way. Feel free to play around with the code on this site. You can't break it - if something goes wrong, you might get an error, but it won't be saved. Just hit "Refresh" to reload the page, and it'll go back to the original version. ## Generating SharedStreets references The map below shows the results from matching a city's road centerlines to generate SharedStreets references. In this case, we've pre-loaded this site with data for San Francisco. To use this map: - Hold the shift key and drag to select an area of the map to query. - In the buttons below the map, you can toggle between viewing the city GIS data, and the resulting data matched to SharedStreets. Matched streets are shown in blue. Unmatched streets are shown in red. - Hover over street segments to see metadata returned by the matching. - By editing the code below, you can use this interactive map to view, match, and export your own custom data. `4c:T4d1,md` Data are provided in **.geojson** format, which can be opened in any GIS application and converted into different formats, if desired. The .geojson file contain three sets of features that will load into GIS as independent layers: - Matched features - Unmatched features - Invalid features (usually this is empty; if a non-street feature were included with the centerlines, it would not undergo matching and would be moved here instead) For each matched street, the data will contain the geometry of the SharedStreets reference and several attributes: - Reference ID (corresponds to the street and the direction of travel) - Geometry ID (corresponds to the street as a whole) - Other SharedStreets attributes [documented here](https://github.com/CityofToronto/bdit_shared_streets_conflator/blob/master/README.md) - The complete attributes of the corresponding city street segment (including the objectID) You can then join the original GIS file to the matched data, using the objectID (or any unique identifier in the city centerline data) as the linking field. Other datasets can be map-matched using SharedStreets, and this will enable a relationship between disparate datasets, based on the SharedStreets reference ID. ` 4d:T4de, md` ### Prepare your dataset Below is a link to where the pre-populated GIS data is stored. To use your own data, you'll need to follow a few steps: 1. Ensure that your data is in the WGS84 projection (or re-project it so that it is) 2. Export your data into a format called a geoJSON. ArcGIS, QGIS, and GDAL can all convert between a shapefile/geodatabase and a geoJSON. 3. Upload your data onto the internet in a place that's accessible (not password-protected). This example uses a Github Gist, which is a free service that lets you drag-and-drop the geoJSON to upload it. You can then click the "View RAW" button to view the geoJSON's text content in a webpage. Copy that URL. If you're not sure it's working, you can view an example in the pre-loaded link, below. 4. Paste the URL below. To do this, click on the white space to the left of "geoJsonUrl". It will turn into an editable field. Replace the current link (everything in quotation marks) with your new link. A blue triangle will appear in the top-right of the text box you are editing. Click that button to update the code. The map above will take a moment to match your custom GIS data to SharedStreets. You'll need to pan and zoom the map to your area of interest to see it. `4e:Tf32,streetMap = { var map = new mapboxgl.Map({ container: streetMapContainer, center: mapCenter, zoom: 15, style: 'mapbox://styles/mapbox/light-v9' }); // map.on('click', 'matchedStreets', (e) => { // var feature = {type:"Feature", geometry:JSON.parse(e.features[0].properties.original_geometry)}; // console.log(feature); // map.getSource("streetCenterlines").setData(feature); // }); 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("cityStreets",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "cityStreets", "type": "line", "source": "cityStreets", "paint": { "line-width": scaledWidth(3), "line-color": "black", "line-opacity": 0.35, "line-dasharray" : [2,1] } }); map.addSource("unmatchedCityStreets",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "unmatchedCityStreets", "type": "line", "source": "unmatchedCityStreets", "paint": { "line-width": scaledWidth(4), "line-color": "red", "line-opacity": 0.22, "line-dasharray" : [2,1] } }); map.addSource("matchedCityStreets",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "matchedCityStreets", "type": "line", "source": "matchedCityStreets", "paint": { "line-width": scaledWidth(8), "line-offset": scaledWidth(4), "line-color": "blue", "line-opacity": 0.15 } }); // Create a popup, but don't add it to the map yet. var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: true }); map.on('mouseenter', 'matchedCityStreets', function(e) { console.log(e); // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var description = "ShSt Geometry ID: " + e.features[0].properties.geometryId + "
"; description += "ShSt Reference ID: " + e.features[0].properties.referenceId + "
"; description += "Length: " + e.features[0].properties.referenceLength + "
"; description += "Road class: " + e.features[0].properties.roadClass + "
"; description += "Match score: " + e.features[0].properties.score + "
"; var streetName = JSON.parse(e.features[0].properties.originalFeature).properties.streetname; description += "Name: " + streetName + "
"; var originalID = JSON.parse(e.features[0].properties.originalFeature).properties.cnn; description += "Original objectID (CNN): " + originalID + "
"; popup.setLngLat(e.lngLat) .setHTML(description) .addTo(map); }); init = true; } }; return Generators.observe(change => { var initialValue = {map: map, isInit:init, bounds:map.getBounds()}; change(initialValue); map.on('load', (evt) => { initMap(); var updateValue = {map: map, isInit:init, bounds:map.getBounds()}; change(updateValue); }); map.on('moveend', e => { var updateValue = {map: map, isInit:init, bounds:map.getBounds()}; change(updateValue); }); }); }4f:[] 47:{"id":"c5141c863cae3cd9","slug":"matching-road-networks-to-sharedstreets","title":"Matching road networks to SharedStreets","thumbnail":"55d7ec801b04be9ff8ef3e8d80b0880dad7a5afc4f9cca367e3b5afcc45d790f","access_level":"public","create_time":"$D2019-04-01T04:28:05.573Z","update_time":"$D2019-04-05T20:08:38.345Z","view_time":null,"first_public_time":"$D2019-04-01T05:44:02.376Z","has_unpublished_edits":null,"fork":{"id":"b31688c335473dae","slug":"gis-sharedstreets","title":"GIS + SharedStreets ","owner":{"id":"737b6768f779006e","login":"emilyeros","name":"Emily Eros"}},"stars":0,"starred":false,"owner":{"type":"team","id":"737b6768f779006e","login":"emilyeros","name":"Emily Eros","avatar_url":"https://avatars-next.observableusercontent.com/582eb1846c85d11e9488c03f4e994af67dc5d5ef4d0ec99633829df851170cc7","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":2019,"publish_version":2019,"role":null,"authored":false,"authors":[{"type":"individual","id":"c1e13bc57cebafc8","login":"emilyeros","name":"Emily Eros","avatar_url":"https://avatars-next.observableusercontent.com/582eb1846c85d11e9488c03f4e994af67dc5d5ef4d0ec99633829df851170cc7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"c1e13bc57cebafc8","login":"emilyeros","name":"Emily Eros","avatar_url":"https://avatars-next.observableusercontent.com/582eb1846c85d11e9488c03f4e994af67dc5d5ef4d0ec99633829df851170cc7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Matching road networks to SharedStreets","cells":[{"id":0,"value":"md`# Matching road networks to SharedStreets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"streetMapContainer = html`

` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"viewof showStreetMap = radio({\n options: [\n { label: 'GIS Data', value: 'gis' },\n { label: 'GIS matched to SharedStreets ', value: 'matched' }\n ],\n value: 'matched'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1924,"value":"md`\n### Change the date of the source data\nSharedStreets generates global street references roughly once per month, using geometries from OpenStreetMap. To change the date of the source data, select a different tile set from the options below (formatted as yy-mm-dd).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1908,"value":"viewof dataSource1 = select({title:\"OSM source data\", options: osmDataSources()})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1929,"value":"md`\n### Change the features included\nThe \"tile hierarchy\" below refers to the types of roads that are included for matching. The default is 6, which includes residential roads but not service roads such as alleys. If more minor roads are not matching to SharedStreets, then you may wish to change this level.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1930,"value":"viewof tileHierarchy1 = select({title:\"Tile hierarchy\", options: dataSourceHierarchy(dataSource1)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1883,"value":"md`\n.\n## Exporting the matched streets\n\nThe matched street data lives in memory. You can download it by clicking the button below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1846,"value":"createJsonDownloadButton(matchedCityStreets, 'matched_city_streets.geojson', 'Download city streets: matched and unmatched')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"md`.\n## Try this with your own GIS data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1755,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1701,"value":"geoJsonUrl = 'https://gist.githubusercontent.com/emilyeros/5a46c284fdffa9677727eadbcffcc58a/raw/02896b50296164167d2c886d38c9937cfb18e21b/sf_centerline_snip.geojson'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1767,"value":"md` \n### Change the default center of the map\nThe coordinates below are where the map above will automatically center. If you are using this site to work with your own custom data, then you may want to update the coordinates to your area of interest.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1707,"value":"mapCenter = {\n return [ -122.4012, 37.7952 ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"md`.\n\n### .\n### .\n### .\n### .\n### .\n\n\n## Code/Imports\n\nCode powering the examples above is contained in the following cells:`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1918,"value":"dataSources = d3.json(server + 'data/sources')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1913,"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":1916,"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":1546,"value":"scaledWidth = (width) => {return {\n \"type\": \"exponential\",\n \"base\": 2,\n \"stops\": [\n [10, width * Math.pow(2, (10 - 16))],\n [16, width * Math.pow(2, (16 - 16))]\n ]\n }}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1372,"value":"matchedCityStreets = {\n\n results = {type:\"FeatureCollection\", features:[]}; \n if(streetMap.isInit) { \n\n var results = await d3.json(server + \"match/geoms?dataSource=osm/\" + dataSource1 + \"&tileHierarchy=\" + tileHierarchy1 + \"&auth=\" + apiKey + \"&snapTopology=true&bearingTolerance=120&includeMetadata=true\", \n {\n method:\"POST\",\n body: JSON.stringify(cityStreets),\n headers: {\n \"Content-type\": \"application/json; charset=UTF-8\"\n }\n });\n }\n return results \n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"cityStreets = await d3.json(geoJsonUrl)\n \n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"streetOverlay = { \n if(streetMap.isInit) {\n \n if(showStreetMap === 'matched') {\n streetMap.map.getSource(\"matchedCityStreets\").setData(matchedCityStreets.matched);\n streetMap.map.getSource(\"unmatchedCityStreets\").setData(matchedCityStreets.unmatched);\n streetMap.map.getSource(\"cityStreets\").setData({type:\"FeatureCollection\", features:[]});\n }\n else {\n streetMap.map.getSource(\"matchedCityStreets\").setData({type:\"FeatureCollection\", features:[]});\n streetMap.map.getSource(\"unmatchedCityStreets\").setData({type:\"FeatureCollection\", features:[]});\n streetMap.map.getSource(\"cityStreets\").setData(cityStreets);\n }\n \n }\n return {};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"apiKey = \"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":873,"value":"server = 'https://api.sharedstreets.io/v0.1.0/'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.45.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":41,"value":"d3 = require(\"d3@5\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"import {select, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1844,"value":"import { createJsonDownloadButton } from \"@trebor/download-json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"mapboxCss = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 42:null