25:["$","title",null,{"children":"GIS + SharedStreets | Kevin Webb | Observable"}] 4b:T6de,{ 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.dist}); } 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.` } }4c:T127a,streetMap = { var map = new mapboxgl.Map({ container: streetMapContainer, center: mapCenter, zoom: 14, 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": "orange", "line-opacity": 0.35, "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.1 } }); map.addSource("caltransStreets",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "caltransStreets", "type": "line", "source": "caltransStreets", "paint": { "line-width": scaledWidth(4), "line-color": "red", "line-opacity": 0.35, "line-dasharray" : [1,1] } }); map.addSource("matchedCaltransStreets",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "matchedCaltransStreets", "type": "line", "source": "matchedCaltransStreets", "paint": { "line-color": "red", "line-width": scaledWidth(8), "line-offset": scaledWidth(4), "line-opacity": 0.5 } }); map.addSource("countyStreets",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "countyStreets", "type": "line", "source": "countyStreets", "paint": { "line-width": scaledWidth(4), "line-color": "green", "line-opacity": 0.35, "line-dasharray" : [1,1] } }); map.addSource("matchedCountyStreets",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "matchedCountyStreets", "type": "line", "source": "matchedCountyStreets", "paint": { "line-color": "green", "line-width": scaledWidth(8), "line-offset": scaledWidth(4), "line-opacity": 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: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); }); }); }4d:Tfa3,streetOverlay = { if(streetMap.isInit) { if(streetOverlays.includes('city')) { if(showStreetMap === 'matched') { streetMap.map.getSource("matchedCityStreets").setData(matchedLadotStreets.matched); streetMap.map.getSource("unmatchedCityStreets").setData(matchedLadotStreets.unmatched); streetMap.map.getSource("cityStreets").setData({type:"FeatureCollection", features:[]}); } else { streetMap.map.getSource("matchedCityStreets").setData({type:"FeatureCollection", features:[]}); streetMap.map.getSource("unmatchedCityStreets").setData({type:"FeatureCollection", features:[]}); streetMap.map.getSource("cityStreets").setData(ladotStreets); } } else { streetMap.map.getSource("matchedCityStreets").setData({type:"FeatureCollection", features:[]}); streetMap.map.getSource("cityStreets").setData({type:"FeatureCollection", features:[]}); } // if(streetOverlays.includes('county')) { // if(showStreetMap === 'matched') { // streetMap.map.getSource("matchedCountyStreets").setData(matchedCountyStreets.matched); // streetMap.map.getSource("countyStreets").setData({type:"FeatureCollection", features:[]}); // } // else { // streetMap.map.getSource("matchedCountyStreets").setData({type:"FeatureCollection", features:[]}); // streetMap.map.getSource("countyStreets").setData(countyStreets); // } // } // else { // streetMap.map.getSource("matchedCountyStreets").setData({type:"FeatureCollection", features:[]}); // streetMap.map.getSource("countyStreets").setData({type:"FeatureCollection", features:[]}); // } // if(streetOverlays.includes('caltrans')) { // if(showStreetMap === 'matched') { // streetMap.map.getSource("matchedCaltransStreets").setData(matchedCaltransStreets.matched); // streetMap.map.getSource("caltransStreets").setData({type:"FeatureCollection", features:[]}); // } // else { // streetMap.map.getSource("matchedCaltransStreets").setData({type:"FeatureCollection", features:[]}); // streetMap.map.getSource("caltransStreets").setData(caltransStreets); // } // } // else { // streetMap.map.getSource("matchedCaltransStreets").setData({type:"FeatureCollection", features:[]}); // streetMap.map.getSource("caltransStreets").setData({type:"FeatureCollection", features:[]}); // } // if(streetOverlays.includes('closures')) { // if(showStreetMap === 'matched') { // streetMap.map.getSource("matchedClosures").setData(matchedClosures.matched); // streetMap.map.getSource("streetClosures").setData({type:"FeatureCollection", features:[]}); // } // else { // streetMap.map.getSource("matchedClosures").setData({type:"FeatureCollection", features:[]}); // streetMap.map.getSource("streetClosures").setData(closures); // } // } // else { // streetMap.map.getSource("matchedClosures").setData({type:"FeatureCollection", features:[]}); // streetMap.map.getSource("streetClosures").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 {}; }4e:T1360,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.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 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); }); }); }4f: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: []}; }50: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); }); }); }51:Teb3,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/geoms?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 + '&snapTopology=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);52:[] 47:{"id":"e172d5fe00ea15a2","slug":"gis-sharedstreets","title":"GIS + SharedStreets ","thumbnail":null,"access_level":"public","create_time":"$D2019-03-05T20:25:18.828Z","update_time":"$D2020-08-26T17:54:31.583Z","view_time":null,"first_public_time":"$D2020-08-26T19:22:34.385Z","has_unpublished_edits":null,"fork":{"id":"9971d81ed76e8445","slug":"ladot-gis-sharedstreets","title":"LADOT GIS + SharedStreets ","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":1712,"publish_version":1712,"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":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"GIS + SharedStreets ","cells":[{"id":0,"value":"md`# GIS + SharedStreets `","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":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":1357,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1360,"value":"matchUrl = server + 'match/geoms?lengthTolerance=0.25' + '&ignoreDirection=true&bearingTolerance=' +35 + '&searchRadius=' + 25 + '&auth=' + apiKey\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":"matchedLadotStreets = {\n \n var results = await d3.json(matchUrl + \"&snapTopology=true&bearingTolerance=120\", {\n method:\"POST\",\n body: JSON.stringify(ladotStreets),\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":"// matchedCountyStreets = {\n \n// var results = await d3.json(matchUrl + \"&snapTopology=true&bearingTolerance=120\", {\n// method:\"POST\",\n// body: JSON.stringify(countyStreets),\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":1381,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"$51","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":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