25:["$","title",null,{"children":"GIS + SharedStreets | Emily Eros | Observable"}] 4b:T43f,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 Los Angeles. 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. - By editing the code below, you can use this interactive map to view, match, and export your own custom data. `4c:T509, md` ### Input data to match to SharedStreets (e.g. city GIS centerlines) 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. `4d: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.` } }4e: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); }); }); }4f:T1189,matchedpointMap = { var map = new mapboxgl.Map({ container: pointMapContainer, center: mapCenter, zoom: 14, style: 'mapbox://styles/mapbox/light-v9' }); 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); }); }); }50: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 {}; }51: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); }); }); }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: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);55:[] 47:{"id":"b31688c335473dae","slug":"gis-sharedstreets","title":"GIS + SharedStreets ","thumbnail":"71d76e15d927b084e59992f4119792b3837ed353186a58221072088a42c2c128","access_level":"public","create_time":"$D2019-03-06T00:22:58.854Z","update_time":"$D2019-04-01T05:31:48.312Z","view_time":null,"first_public_time":"$D2019-03-13T23:08:31.755Z","has_unpublished_edits":null,"fork":{"id":"e172d5fe00ea15a2","slug":"gis-sharedstreets","title":"GIS + SharedStreets ","owner":{"id":"a64354931bab0b08","login":"kpwebb","name":"Kevin Webb"}},"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":1814,"publish_version":1814,"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":3,"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":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":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":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1811,"value":"$4f","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&dataSource=osm/planet-180924' + '&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":"$50","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/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":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`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W55","stdlib":"1"}} 24:null