44:["$","title",null,{"children":"Detroit GIS + SharedStreets | Kevin Webb | Observable"}] 4c:T6df,{ var points = []; for(var item of pointData.features) { points.push({ referenceId:item.properties.referenceId, location:item.properties.location, bearing:item.properties.bearing, dist:item.properties.score}); } if(points.length > 0) { return table(points, { rank: true, columns: { dist: { title: 'Distance from point (m)', formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. return d3.format('.2f')(val); } }, location: { title: 'Location along line (m)', formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. return d3.format('.2f')(val); } }, bearing: { title: 'Bearing °', formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. if(val < 0) val = val + 360; return d3.format('.0f')(val); } }, referenceId: { title: 'Reference ID', formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. //var id = ((val.length > 12) ? val.substr(0, 12-1) + '…' : val); return html`${val}`; } } } }); } else { return html`No candidates selected.` } }4d:T7a5,{ if(pathData != undefined && pathData.matched.features && pathData.matched.features.length > 0) { var segments = [] if(pathData.matched.features[0].properties.section) segments.push({ referenceId:pathData.matched.features[0].properties.referenceId, side:pathData.matched.features[0].properties.side, start: pathData.matched.features[0].properties.section[0], end: pathData.matched.features[0].properties.section[1]}); else segments.push({ referenceId:pathData.matched.features[0].properties.referenceId, side:pathData.matched.features[0].properties.side, start: 0, end: pathData.matched.features[0].properties.referenceLength}); return table(segments, { rank: true, columns: { referenceId: { title: 'Reference ID', formatter(val, i) { // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. //var id = ((val.length > 12) ? val.substr(0, 12-1) + '…' : val); return html`${val}`; } }, side: { title: 'Side of Street', }, start: { title: 'Start Location (m)', formatter(val, i) { if(val < 0) return "-"; // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. return d3.format('.2f')(val); } }, end: { title: 'End Location (m)', formatter(val, i) { if(val < 0) return "-"; // A formatter that changes its behavior based on the row index, // so we don’t repeat the $ for every row. return d3.format('.2f')(val); } }, } }); } else { return html`No segments selected.` } }4e:T147f,streetMap = { var map = new mapboxgl.Map({ container: streetMapContainer, center: mapCenter, zoom: 17, 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("streetCenterlines",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "streetCenterlines", "type": "line", "source": "streetCenterlines", "paint": { "line-width": scaledWidth(3), "line-color": "black", "line-opacity": 0.35, "line-dasharray" : [2,1] } }); map.addSource("unmatchedStreetCenterlines",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "unmatchedStreetCenterlines", "type": "line", "source": "unmatchedStreetCenterlines", "paint": { "line-width": scaledWidth(3), "line-color": "orange", "line-opacity": 0.35, "line-dasharray" : [2,1] } }); map.addSource("matchedStreets",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "matchedStreets", "type": "line", "source": "matchedStreets", "paint": { "line-width": scaledWidth(8), "line-offset": scaledWidth(4), "line-color": "blue", "line-opacity": 0.1 } }); map.addSource("streetClosures",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "streetClosures", "type": "line", "source": "streetClosures", "paint": { "line-width": scaledWidth(3), "line-color": "orange", "line-opacity": 0.35, "line-dasharray" : [2,1] } }); map.addSource("matchedClosures",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "matchedClosures", "type": "line", "source": "matchedClosures", "paint": { "line-color": "orange", "line-width": scaledWidth(8), "line-offset": scaledWidth(4), "line-opacity": 1.0 } }); map.addSource("streetParking",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "streetParking", "type": "line", "source": "streetParking", "paint": { "line-width": scaledWidth(3), "line-color": ["get", "color"], "line-opacity": 0.35, "line-dasharray" : [1,1] } }); map.addSource("matchedParking",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "matchedParkingRight", "type": "line", "source": "matchedParking", "paint": { "line-color": ["get", "color"], "line-width": scaledWidth(8), "line-offset": scaledWidth(12), "line-opacity": 0.5 }, filter:["==", "side", "right"] }); map.addLayer({ "id": "matchedParkingLeft", "type": "line", "source": "matchedParking", "paint": { "line-color": ["get", "color"], "line-width": scaledWidth(8), "line-offset": scaledWidth(-12), "line-opacity": 0.5 }, filter:["==", "side", "left"] }); // 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:map.getBounds()}; change(initialValue); map.on('click', (evt) => { clickedFeatures.push(evt); }); 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:T410, matchedParking = { var tmpParking = await d3.json(matchUrl + "&snapSideOfStreet=right", { method:"POST", body: JSON.stringify(parking), headers: { "Content-type": "application/json; charset=UTF-8" } }); tmpParking.matched.features = tmpParking.matched.features.map((v) => { if(v.properties.originalFeature.properties.SPACETYPE.startsWith("NP") || v.properties.originalFeature.properties.SPACETYPE.startsWith("TAZ") ) v.properties.color = "red"; else if(v.properties.originalFeature.properties.SPACETYPE.startsWith("PS")) v.properties.color = "blue"; else if(v.properties.originalFeature.properties.SPACETYPE.includes("BUS")) v.properties.color = "green"; else if(v.properties.originalFeature.properties.SPACETYPE.includes("LZ") || v.properties.originalFeature.properties.SPACETYPE.includes("TAXI")) v.properties.color = "orange"; return v; }); return tmpParking; }50:T8c4,streetOverlay = { if(streetMap.isInit) { if(streetOverlays.includes('centerlines')) { if(showStreetMap === 'matched') { streetMap.map.getSource("matchedStreets").setData(matchedStreets.matched); streetMap.map.getSource("streetCenterlines").setData({type:"FeatureCollection", features:[]}); } else { streetMap.map.getSource("matchedStreets").setData({type:"FeatureCollection", features:[]}); streetMap.map.getSource("streetCenterlines").setData(streets); } } else { streetMap.map.getSource("matchedStreets").setData({type:"FeatureCollection", features:[]}); streetMap.map.getSource("streetCenterlines").setData({type:"FeatureCollection", features:[]}); } if(streetOverlays.includes('failures')) { if(showStreetMap === 'matched') { streetMap.map.getSource("unmatchedStreetCenterlines").setData(matchedStreets.unmatched); //streetMap.map.getSource("unmatchedStreetCenterlines").setData({type:"FeatureCollection", features:[]}); } else { streetMap.map.getSource("unmatchedStreetCenterlines").setData({type:"FeatureCollection", features:[]}); //streetMap.map.getSource("unmatchedStreetCenterlines").setData(closures); } } else { streetMap.map.getSource("unmatchedStreetCenterlines").setData({type:"FeatureCollection", features:[]}); //streetMap.map.getSource("unmatchedStreetCenterlines").setData({type:"FeatureCollection", features:[]}); } if(streetOverlays.includes('parking')) { if(showStreetMap === 'matched') { streetMap.map.getSource("matchedParking").setData(matchedParking.matched); streetMap.map.getSource("streetParking").setData({type:"FeatureCollection", features:[]}); } else { streetMap.map.getSource("matchedParking").setData({type:"FeatureCollection", features:[]}); streetMap.map.getSource("streetParking").setData(parking); } } else { streetMap.map.getSource("matchedParking").setData({type:"FeatureCollection", features:[]}); streetMap.map.getSource("streetParking").setData({type:"FeatureCollection", features:[]}); } } return {}; }51:T1361,pointMap = { var map = new mapboxgl.Map({ container: pointContainer, center: mapCenter, zoom: 17, style: 'mapbox://styles/mapbox/light-v9' }); var init = false; var initMap = () => { if(!init) { map.addSource("searchPoint", { "type": "geojson", "data": { type: "FeatureCollection", features: [] }}); map.addSource("searchPointTriangle", { "type": "geojson", "data": { type: "FeatureCollection", features: [] }}); map.addSource("searchHalo", { "type": "geojson", "data": { type: "FeatureCollection", features: [] }}); map.addSource("searchResults",{ "type": "geojson", "data": { type: "FeatureCollection", features: [] }}); map.addSource("searchResultTriangles", { "type": "geojson", "data": { type: "FeatureCollection", features: [] }}); map.addLayer({ "id": "searchHalo", "type": "fill", "source": "searchHalo", "layout": {}, "paint": { "fill-color": "blue", "fill-opacity": 0.05 } }); map.addLayer({ "id": "searchPoint", "type": "circle", "source": "searchPoint", "paint": { "circle-radius": 5, "circle-color": "red" } }); map.addLayer({ "id": "searchResults", "type": "circle", "source": "searchResults", "paint": { "circle-radius": 5, "circle-color": "#0088ff" } }); map.addLayer({ "id": "searchResultTriangles", 'type': 'symbol', "source": "searchResults", 'layout': { 'icon-image': 'triangle-11', 'icon-allow-overlap': true, 'icon-ignore-placement': true, 'icon-size' : 1.5, 'icon-offset': [0, -8], 'icon-rotate': { 'type': 'identity', 'property': 'bearing' } } }); map.addLayer({ "id": "searchPointTriangle", 'type': 'symbol', "source": "searchPointTriangle", 'layout': { 'icon-image': 'triangle-11', 'icon-allow-overlap': true, 'icon-ignore-placement': true, 'icon-size' : 1.5, 'icon-offset': [0, -8], 'icon-rotate': { 'type': 'identity', 'property': 'bearing' } } }); // Create a popup, but don't add it to the map yet. var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on('mouseenter', 'searchResultTriangles', function(e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var description = e.features[0].properties.description; // 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. var location = Math.round(e.features[0].properties.location * 100) / 100; var distance = Math.round(e.features[0].properties.score * 100) / 100; var bearing = Math.round(e.features[0].properties.bearing * 100) / 100; popup.setLngLat(coordinates) .setHTML('SharedStreets Reference ID:
' + e.features[0].properties.referenceId + '
at ' + location + ' meters along reference bearing ' + bearing + ' (' + distance + ' from search point)') .addTo(map); }); map.on('mouseleave', 'searchResultTriangles', function() { map.getCanvas().style.cursor = ''; popup.remove(); }); var firstPoint = {lng: -122.33480029348291,lat: 47.60835864388494}; map.fire("click", {lngLat: firstPoint, pt: map.project(firstPoint)}); init = true; } }; map.on('load', (evt) => { initMap(); }); return Generators.observe(change => { var initialValue = {map: map, isInit:() => {return init;}, lnglat: {lng: -122.33480029348291,lat: 47.60835864388494}}; change(initialValue); map.on('click', e => { var updateValue = {map: map, isInit:() => {return init;}, lnglat: e.lngLat}; change(updateValue); }); }); }52:T5ad,pointData = { if(pointMap && pointMap.isInit()) { var lnglat = pointMap.lnglat; pointMap.map.getSource("searchHalo").setData(createGeoJSONCircle([lnglat.lng, lnglat.lat], searchRadius / 1000)); pointMap.map.getSource("searchPoint").setData({ type: "Feature", geometry: {type: "Point", coordinates: [lnglat.lng, lnglat.lat]} }); var queryUrl; var searchPointTriangleData = { type: "FeatureCollection", features: [] }; if(ignorePointBearing) { queryUrl = String(server + 'match/point/' + lnglat.lng + ',' + lnglat.lat + '?auth=' + apiKey + '&searchRadius=' + searchRadius + '&maxCandidates=' + maxCandidates); } else { queryUrl = String(server + 'match/point/' + lnglat.lng + ',' + lnglat.lat + ',' + bearing + '?auth=' + apiKey + '&searchRadius=' + searchRadius + '&maxCandidates=' + maxCandidates); searchPointTriangleData = { type: "Feature", properties: { bearing: bearing }, geometry: { type: "Point", coordinates: [lnglat.lng, lnglat.lat] } }; } pointMap.map.getSource("searchPointTriangle").setData(searchPointTriangleData); var points = await d3.json(queryUrl); pointMap.map.getSource("searchResults").setData(points); return points; } return {type: "FeatureCollection", features: []}; }53:T1793,pathMap = { var map = new mapboxgl.Map({ container: pathContainer, center: mapCenter, zoom: 17, style: 'mapbox://styles/mapbox/light-v9' }); var init = false; var initMap = () => { if(!init) { map.addSource("searchPoint", { "type": "geojson", "data": { type: "FeatureCollection", features: [] }}); map.addSource("searchPath", { "type": "geojson", "data": { type: "FeatureCollection", features: [] }}); map.addSource("searchPointTriangle", { "type": "geojson", "data": { type: "FeatureCollection", features: [] }}); map.addSource("searchHalo", { "type": "geojson", "data": { type: "FeatureCollection", features: [] }}); map.addSource("searchResults",{ "type": "geojson", "data": { type: "FeatureCollection", features: [] }}); map.addSource("searchResultsPoints", { "type": "geojson", "data": { type: "FeatureCollection", features: [] }}); map.addLayer({ "id": "searchHalo", "type": "fill", "source": "searchHalo", "layout": {}, "paint": { "fill-color": "blue", "fill-opacity": 0.05 } }); map.addLayer({ "id": "searchPoint", "type": "circle", "source": "searchPoint", "paint": { "circle-radius": 5, "circle-opacity": 0.35, "circle-color": "red" } }); map.addLayer({ "id": "searchPath", "type": "line", "source": "searchPath", "paint": { "line-width": 2, "line-color": "red", "line-opacity": 0.35, 'line-dasharray' : [1,1] } }); map.addLayer({ "id": "searchResults", "type": "line", "source": "searchResults", "paint": { "line-width": 10, "line-color": "blue", "line-opacity": 0.35 }, filter:["==", "side", "unknown"] }); map.addLayer({ "id": "searchResultsRight", "type": "line", "source": "searchResults", "paint": { "line-color": "blue", "line-width": scaledWidth(8), "line-offset": scaledWidth(12), "line-opacity": 0.35 }, filter:["==", "side", "right"] }); map.addLayer({ "id": "searchResultsLeft", "type": "line", "source": "searchResults", "paint": { "line-color": "blue", "line-width": scaledWidth(8), "line-offset": scaledWidth(-12), "line-opacity": 0.35 }, filter:["==", "side", "left"] }); map.addLayer({ "id": "searchResultTriangles", 'type': 'symbol', "source": "searchResultsPoints", 'layout': { 'icon-image': 'triangle-11', 'icon-allow-overlap': true, 'icon-ignore-placement': true, 'icon-size' : 1.5, 'icon-offset': [0, -8], 'icon-rotate': { 'type': 'identity', 'property': 'bearing' } } }); // Create a popup, but don't add it to the map yet. var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on('mouseenter', 'searchResultTriangles', function(e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); var description = e.features[0].properties.description; // 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. var location = Math.round(e.features[0].properties.location * 100) / 100; var distance = Math.round(e.features[0].properties.dist * 100) / 100; var bearing = Math.round(e.features[0].properties.bearing * 100) / 100; popup.setLngLat(coordinates) .setHTML('SharedStreets Reference ID:
' + e.features[0].properties.referenceId + '
at ' + location + ' meters along reference bearing ' + bearing + ' (' + distance + ' from search point)') .addTo(map); }); map.on('mouseleave', 'searchResultTriangles', function() { map.getCanvas().style.cursor = ''; popup.remove(); }); var secondPoint = {lng:-122.33395994272226,lat: 47.60869886212237}; map.fire("click", {lngLat: secondPoint, pt: map.project(secondPoint)}); init = true; } }; map.on('load', (evt) => { initMap(); }); var mapData = {map: map, isInit:() => {return init;}, points: {type:"FeatureCollection", features:[]}}; return Generators.observe(change => { var firstPoint = [-122.33482897844316,47.60832634703897]; mapData.points.features.push({type:"Feature", geometry:{type:"Point", coordinates: firstPoint}}); change(mapData); map.on('click', e => { mapData.points.features.push({type:"Feature", geometry:{type:"Point", coordinates:[e.lngLat.lng, e.lngLat.lat]}}); change(mapData); }); map.on('contextmenu', e => { console.log(e); mapData.points.features = []; change(mapData); }); }); }54:Teb9,pathData = { if(pathMap && pathMap.isInit()) { pathMap.map.getSource("searchPoint").setData(pathMap.points); var haloFeatures = {type:"FeatureCollection", features:[]}; var pathFeature = {type:"Feature", geometry:{type:"LineString", coordinates:[]}}; var i = 0; for(var feature of pathMap.points.features) { if(i == 0 || i == pathMap.points.features.length - 1) haloFeatures.features.push(createGeoJSONCircle([feature.geometry.coordinates[0], feature.geometry.coordinates[1]], pathSearchRadius / 1000)); pathFeature.geometry.coordinates.push(feature.geometry.coordinates); i++; } pathMap.map.getSource("searchHalo").setData(haloFeatures); pathMap.map.getSource("searchPath").setData(pathFeature); pathFeature.properties = {}; if(pathFeature.geometry.coordinates.length > 1) { var lengthTolerance = pathLengthTolerance / 100; var urlStr = server + 'match/geom?lengthTolerance=' + lengthTolerance + '&bearingTolerance=' + pathBearingTolerance + '&searchRadius=' + pathSearchRadius + '&auth=' + apiKey; if(snapSideOfStreet != undefined && snapSideOfStreet != 'center') { urlStr = urlStr + '&snapSideOfStreet=' + snapSideOfStreet; } if(ignoreDirection != undefined && ignoreDirection == 'true') urlStr = urlStr + '&ignoreDirection=true'; if(snapToIntersections != undefined && snapToIntersections == 'true') urlStr = urlStr + '&snapToIntersections=true'; var results = await d3.json(urlStr, { method:"POST", body: JSON.stringify(pathFeature), headers: { "Content-type": "application/json; charset=UTF-8" } }); pathMap.map.getSource("searchResults").setData(results.matched); if(results && results.matched.features && results.matched.features.length > 0) { var pointData = {type:"FeatureCollection", features:[results.matched.features[0].properties.start, results.matched.features[0].properties.end]}; pathMap.map.getSource("searchResultsPoints").setData(pointData); } else { var pointData = {type:"FeatureCollection", features:[]} pathMap.map.getSource("searchResultsPoints").setData(pointData); } return results; } else { var pointData = {type:"FeatureCollection", features:[]} pathMap.map.getSource("searchResultsPoints").setData(pointData); pathMap.map.getSource("searchResults").setData({type:"FeatureCollection", features:[]}); } } } //return "Location: " + pathMap.lnglat.lng + "," + pathMap.lnglat.lat // var queryUrl; // var searchPointTriangleData = { // type: "FeatureCollection", // features: [] // }; // if(bearing < 0) { // queryUrl = String('https://api.sharedstreets.io/match/point/' + lnglat.lng + ',' + lnglat.lat + '?auth=' + apiKey + '&searchRadius=' + searchRadius + '&maxCandidates=' + maxCandidates); // } // else { // queryUrl = String('https://api.sharedstreets.io/match/point/' + lnglat.lng + ',' + lnglat.lat + ',' + bearing + '?auth=' + apiKey + '&searchRadius=' + searchRadius + '&maxCandidates=' + maxCandidates); // searchPointTriangleData = { // type: "Feature", // properties: { // bearing: bearing // }, // geometry: { // type: "Point", // coordinates: [lnglat.lng, lnglat.lat] // } // }; // } // pathMap.map.getSource("searchPointTriangle").setData(searchPointTriangleData); // var points = await d3.json(queryUrl); // pathMap.map.getSource("searchResults").setData(points);55:[] 48:{"id":"54df233b614d4af2","slug":"detroit-gis-sharedstreets","title":"Detroit GIS + SharedStreets ","thumbnail":"123d6b608d866971176a3436529cd84f4e2bdcd973efa018fbbc154b4d709568","access_level":"public","create_time":"$D2018-10-05T11:51:26.273Z","update_time":"$D2018-10-15T14:50:57.517Z","view_time":null,"first_public_time":"$D2018-10-05T18:55:36.180Z","has_unpublished_edits":null,"fork":{"id":"cef0b6861128a612","slug":"sharedstreets-api","title":"Getting started with SharedStreets ","owner":{"id":"a64354931bab0b08","login":"kpwebb","name":"Kevin Webb"}},"stars":1,"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":1655,"publish_version":1655,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Detroit GIS + SharedStreets ","cells":[{"id":0,"value":"md`# Detroit GIS + SharedStreets \n\nSharedStreets data standards are a way to uniquely identify street space and link data related to streets into a unified view. SharedStreets makes maps connectable, and allows porting of data between different street representations, whether data linked to OpenStreetMap, a city-managed GIS system, or a commercial basemap.\n\n## Connecting streets\n\nCities today depend on geographic information systems (GIS) to collect and share street data, but this process requires everyone using the data to first agree on a common map, or a prefined set of identifiers to describe streets. \n\nThis limits the potential for collaboration and data sharing between government agencies, and with the private sector. Use of proprietary maps and identification systems can undermine cities’ ability to use and share critical public information about streets.\n\nSharedStreets provides a global, non-proprietary system for describing streets, and connecting a wide range of street-linked data.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1179,"value":"html`

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1410,"value":"md `## Linking GIS data \n\nThe map below shows street centerline data feed exported from the SEMCOG public GIS portal.Using the SharedStreets API data is converted automatically to a common referenced location along the street.\n\nYou can togggle between the original GIS data and referenced features in the map,and view the raw GIS and matched SharedStreets references returned by the API in GeoJSON format below.\n\n`","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":658,"value":"viewof pathSearchRadius = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 15, \n title: \"Search Radius\", \n description: \"1-100 meters\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"viewof pathBearingTolerance = slider({\n min: 1, \n max: 360, \n step: 1, \n value: 10, \n title: \"Bearing Tolerance\", \n description: \"1-360 degrees\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"viewof pathLengthTolerance = slider({\n min: 0.0001, \n max: 50, \n step: 1, \n value: 10, \n title: \"Length Tolerance\", \n description: \"0-50%\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1536,"value":"viewof snapSideOfStreet = radio({\n title: \"Snap side of street based on direction of travel\",\n \n options: [\n { label: 'Don\\'t snap', value: 'center' },\n { label: 'Right-hand traffic', value: 'right' },\n { label: 'Left-hand traffic', value: 'left' }\n ],\n value: 'center'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"viewof ignoreDirection = checkbox({\n options: [\n { value: 'true', label: 'Ignore line direction' }\n ],\n value: 'true'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"viewof snapToIntersections = checkbox({\n description: 'Snaps line to nearest intersections if within search radius.',\n options: [\n { value: 'true', label: 'Snap to intersections ' }\n ],\n value: 'true'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"md`### Matched Segments`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"$4d","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## Code/Imports\n\nCode powering the examples above:`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1333,"value":"mapCenter = {\n return [ -83.064922795700795, 42.396305557048102];\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":1360,"value":"matchUrl = { \n\n if(strictMatch && strictMatch.includes('strict')) {\n return server + 'match/geom?lengthTolerance=0.25' + '&ignoreDirection=true&bearingTolerance=' + 35 + '&searchRadius=' + 25 + '&auth=' + apiKey;\n }\n else {\n return server + 'match/geom?lengthTolerance=0.25' + '&ignoreDirection=true&bearingTolerance=' + 55 + '&searchRadius=' + 50 + '&auth=' + apiKey; \n }\n\n}\n\n ","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":"matchedStreets = {\n var filteredStreets = streets.features.filter((v) => {\n return true;\n });\n \n var formOfWay = (v) => {\n if(v.properties['SEGMENT_TY'] >= 2 && v.properties['SEGMENT_TY'] <= 4)\n return [\"Motorway\", \"MultipleCarriageway\", \"SlipRoad\", \"Undefined\"];\n else \n return null;\n };\n \n \n var mappedFeatures = {type:\"FeatureCollection\", features: filteredStreets.map((v) => {\n var filterParameters = { toId: v.properties['T_INTR_ID'], \n fromId: v.properties['F_INTR_ID'], \n formOfWay: formOfWay(v) };\n \n v.properties['filterParameters'] = filterParameters;\n return v;\n })};\n \n var results = await d3.json(matchUrl + \"&snapTopology=true\", {\n method:\"POST\",\n body: JSON.stringify(mappedFeatures),\n headers: {\n \"Content-type\": \"application/json; charset=UTF-8\"\n }\n });\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":1375,"value":"matchedClosures = await d3.json(matchUrl + \"&snapTopology=true\", {\n method:\"POST\", \n body: JSON.stringify(closures),\n headers: {\n \"Content-type\": \"application/json; charset=UTF-8\"\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"clickedFeatures = []","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"$54","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/'","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":173,"value":"import {checkbox, slider, 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":684,"value":"import {table} from \"@tmcw/tables@444\"","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":21,"value":"mapboxCss = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"createGeoJSONCircle = function(center, radiusInKm, points) {\n if(!points) points = 64;\n\n var coords = {\n latitude: center[1],\n longitude: center[0]\n };\n\n var km = radiusInKm;\n\n var ret = [];\n var distanceX = km/(111.320*Math.cos(coords.latitude*Math.PI/180));\n var distanceY = km/110.574;\n\n var theta, x, y;\n for(var i=0; i