45:["$","title",null,{"children":"Seattle DOT GIS + SharedStreets | Kevin Webb | Observable"}] 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:T673,{ if(pathData != undefined && pathData.matched.features && pathData.matched.features.length > 0) { var segments = []; for(var item of pathData.matched.features[0].properties.segments) { if(item.range == undefined) segments.push({ referenceId:item.referenceId, start: -1, end: -1}); else segments.push({ referenceId:item.referenceId, start: item.range[0], end: item.range[1]}); } 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}`; } }, 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.` } }4f:T1d3b,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("streetKCCenterlines",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "streetKCCenterlines", "type": "line", "source": "streetKCCenterlines", "paint": { "line-width": scaledWidth(3), "line-color": "black", "line-opacity": 0.35, "line-dasharray" : [2,1] } }); map.addSource("streetSDOTCenterlines",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "streetSDOTCenterlines", "type": "line", "source": "streetSDOTCenterlines", "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("matchedSDOTStreets",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "matchedSDOTStreets", "type": "line", "source": "matchedSDOTStreets", "paint": { "line-width": scaledWidth(8), "line-offset": scaledWidth(4), "line-color": "blue", "line-opacity": 0.1 } }); // Create a popup, but don't add it to the map yet. var popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); map.on('mouseenter', 'matchedSDOTStreets', function(e) { // Change the cursor style as a UI indicator. map.getCanvas().style.cursor = 'pointer'; var coordinates = e.features[0].geometry.coordinates.slice(); // 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; } var description = ""; for(var segment of e.features[0].properties.segments) { description = description + "
segment.referenceId"; if(segment.range != undefined) { description = description + " (from " + Math.round(segment.range[0]) + " to " + Math.round(segment.range[1]) + ")"; } } popup.setLngLat(coordinates) .setHTML('SharedStreets References:
' + description) .addTo(map); }); map.on('mouseleave', 'matchedSDOTStreets', function() { map.getCanvas().style.cursor = ''; popup.remove(); }); map.addSource("matchedKCStreets",{ "type": "geojson", "data": {type:"FeatureCollection", features:[]}}); map.addLayer({ "id": "matchedKCStreets", "type": "line", "source": "matchedKCStreets", "paint": { "line-width": scaledWidth(8), "line-offset": scaledWidth(4), "line-color": "purple", "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('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: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; }51:Tb70,streetOverlay = { if(streetMap.isInit) { if(streetOverlays.includes('sdotCenterlines')) { if(showStreetMap === 'matched') { streetMap.map.getSource("matchedSDOTStreets").setData(matchedSDOTStreets.matched); streetMap.map.getSource("streetSDOTCenterlines").setData({type:"FeatureCollection", features:[]}); } else { streetMap.map.getSource("matchedSDOTStreets").setData({type:"FeatureCollection", features:[]}); streetMap.map.getSource("streetSDOTCenterlines").setData(sdot_streets); } } else { streetMap.map.getSource("matchedSDOTStreets").setData({type:"FeatureCollection", features:[]}); streetMap.map.getSource("streetSDOTCenterlines").setData({type:"FeatureCollection", features:[]}); } if(streetOverlays.includes('kcCenterlines')) { if(showStreetMap === 'matched') { streetMap.map.getSource("matchedKCStreets").setData(matchedKCStreets.matched); streetMap.map.getSource("streetKCCenterlines").setData({type:"FeatureCollection", features:[]}); } else { streetMap.map.getSource("matchedKCStreets").setData({type:"FeatureCollection", features:[]}); streetMap.map.getSource("streetKCCenterlines").setData(kc_streets); } } else { streetMap.map.getSource("matchedKCStreets").setData({type:"FeatureCollection", features:[]}); streetMap.map.getSource("streetKCCenterlines").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 {}; }52: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); }); }); }53: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: []}; }54:T17c7,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 } }); // map.addLayer({ // "id": "searchResultsPoint", // "type": "circle", // "source": "searchResultsPoints", // "paint": { // "circle-radius": 5, // "circle-opacity": 0.35, // "circle-color": "blue" // } // }); 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' } } }); // 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 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); }); }); }55:Te16,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(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);56:[] 49:{"id":"239a10a1a55651e8","slug":"seattle-dot-gis-sharedstreets","title":"Seattle DOT GIS + SharedStreets ","thumbnail":"48c1af8c7e898c846441208004fdc19e31d932611ec847a93d669f5914601b13","access_level":"public","create_time":"$D2018-07-11T06:08:57.458Z","update_time":"$D2018-09-24T12:27:02.406Z","view_time":null,"first_public_time":"$D2018-07-11T06:09:26.863Z","has_unpublished_edits":null,"fork":{"id":"cef0b6861128a612","slug":"sharedstreets-api","title":"Getting started with SharedStreets ","owner":{"id":"a64354931bab0b08","login":"kpwebb","name":"Kevin Webb"}},"stars":2,"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":1590,"publish_version":1590,"role":null,"authored":false,"authors":[{"type":"individual","id":"11bd00d66734027d","login":"kpwebb","name":"Kevin Webb","avatar_url":"https://avatars-next.observableusercontent.com/c66a6f9dd4ec19f0d2193a376e4f6a934f755ccaf76493919dc315d9f1b1119b","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"11bd00d66734027d","login":"kpwebb","name":"Kevin Webb","avatar_url":"https://avatars-next.observableusercontent.com/c66a6f9dd4ec19f0d2193a376e4f6a934f755ccaf76493919dc315d9f1b1119b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Seattle DOT GIS + SharedStreets ","cells":[{"id":0,"value":"md`# Seattle DOT GIS + SharedStreets `\n\n","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 three sample data feeds exported from the Seattle DOT's public GIS portal:\n\n- street centerlines\n- road closures \n- curbside parking regulations\n\nEach of these layers start as separate unrelated GIS data — none of the feautres relate to eachother other than appearing near one another when drawn on a map.\n\nUsing 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":922,"value":"viewof showStreetMap = radio({\n options: [\n { label: 'City GIS Data', value: 'gis' },\n { label: 'GIS matched to SharedStreets ', value: 'matched' }\n ],\n value: 'matched'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"viewof streetOverlays = checkbox({\n options: [\n { value: 'sdotCenterlines', label: 'SDOT Centerlines' },\n { value: 'kcCenterlines', label: 'King County Centerlines' },\n { value: 'parking', label: 'Parking' },\n { value: 'closures', label: 'Closures' }\n ],\n value: ['centerlines','parking','closures']\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"md`### Original features`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"sdot_streets = await d3.json(\"https://gist.githubusercontent.com/kpwebb/e3093b1e8ef466e6c5e3432c75e8cb79/raw/ddd4bd5702c7f87aa8f7c1ff9d958a78466c7edc/seattle_street_sample_small.geojson\")\n\n//https://gist.githubusercontent.com/kpwebb/e3093b1e8ef466e6c5e3432c75e8cb79/raw/43252bff5bf74153d1194f8f594a0b4579a09194/seattle_street_sample_small.geojson","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1542,"value":"kc_streets = await d3.json(\"https://gist.githubusercontent.com/kpwebb/fa5e0933ea01a516c0147a03163467de/raw/27f6bfdc7f090e39721df898fb3d3fc6fb3aec64/kc_street_sample.geojson\")\n\n//https://gist.githubusercontent.com/kpwebb/e3093b1e8ef466e6c5e3432c75e8cb79/raw/43252bff5bf74153d1194f8f594a0b4579a09194/seattle_street_sample_small.geojson","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"closures = await d3.json(\"https://gist.githubusercontent.com/kpwebb/f6239541bd62fb4fb88109192f68fff1/raw/1ec0570f6ffc21ce8aa2fb14be5347d0fc3c459d/seattle_street_closures.geojson\")\n\n//https://gist.githubusercontent.com/kpwebb/f6239541bd62fb4fb88109192f68fff1/raw/205d14df49d2623a6d5651caf592d3d6c9ef9005/seattle_street_closures.geojson","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1456,"value":"parking = { var parking = await d3.json('https://gist.githubusercontent.com/kpwebb/c8c7269f55a0e89efb68ca2c5d95ede2/raw/13beee5dd48b62c3f5ba160ed15055c732654625/seattle_curb_md.geojson')\n\n parking.features = parking.features.map((v) => {\n if(v.properties.SPACETYPE.startsWith(\"NP\") || v.properties.SPACETYPE.startsWith(\"TAZ\") )\n v.properties.color = \"red\";\n else if(v.properties.SPACETYPE.startsWith(\"PS\"))\n v.properties.color = \"blue\";\n else if(v.properties.SPACETYPE.includes(\"BUS\"))\n v.properties.color = \"green\";\n else if(v.properties.SPACETYPE.includes(\"LZ\") || v.properties.SPACETYPE.includes(\"TAXI\"))\n v.properties.color = \"orange\";\n \n return v;\n });\n \n return parking;\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":1418,"value":"md`### Matched features`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1445,"value":"sharedStreetsCenterlineData = {\n return matchedSDOTStreets.matched;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"sharedStreetsParkingData = {\n return matchedParking.matched;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1414,"value":"sharedStreetsClosureData = {\n return matchedClosures.matched;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"md` .\n\n## Point Match API\nLatitude and longitude positions, and optional bearings can be converted to SharedStreets references using the \\`/match/point\\` API. \n\nUse the map below to explore how points are matched to SharedStreets. Click the map to query for nearby matching SharedStreets References. Use the slider controls to adjust the query parameters. The red dot shows the selected location. The light blue circle is the search radius. Matching SharedStreets references are shown in blue. Arrows show the directional bearing for a given reference, and optionally the search bearing used to filter ID candidates. \n\nPoint API calls also have an optional \\`searchRadius\\` (in meteres) and \\`maxCandidates\\` filters as queryString prarameters. \n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"pointContainer = html`
` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"viewof bearing = slider({\n min: 0, \n max: 359, \n step: 1, \n value: 0, \n title: \"Search Bearing\", \n description: \"filter search by 0-360 degrees (-1 = disabled)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"viewof ignorePointBearing = checkbox({\n options: [\n { value: 'true', label: 'Ignore point bearing' }\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":93,"value":"viewof searchRadius = slider({\n min: 1, \n max: 100, \n step: 1, \n value: 20, \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":96,"value":"viewof maxCandidates =slider({\n min: 1, \n max: 10, \n step: 1, \n value: 5, \n title: \"Max Candidates\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"md`### Matched point candidates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`.\n\n## Geometry Match API \n\nSharedStreets \\`/match/geom\\` uses the same process as \\`/match/point\\`, but combines muliple points into a single path to find matching SharedStreets Reference segments. Paths can span multiple street segments, and the \\`/match/geom\\` API can match within street segements (e.g. to define a parking zone) or attempt to snap to complete street segments at nearby intersections. \n\nThe point bearing is calcuated based on the line connecting two points, but the API can also ignore line direction. Line length is considered when finding matching paths, and a length tolerance for potential matches is specified as a percent of total line length.\n\nClick on map to add points to path. Right click to clear path. The matching path is shown as a blue overlay, and the segments listed below the map.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"pathContainer = 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":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":"$4e","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 [-122.334882622622402, 47.608791594905626];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1357,"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/geom?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":1372,"value":"matchedSDOTStreets = {\n var filteredStreets = sdot_streets.features.filter((v) => {\n return true;//v.properties['SEGMENT_TY'] < 5;\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 \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":1568,"value":"matchedKCStreets = {\n var filteredStreets = kc_streets.features.filter((v) => {\n return true;//v.properties['SEGMENT_TY'] < 5;\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 \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":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"$55","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