44:["$","title",null,{"children":"SharedStreets + Vinyards | Kevin Webb | Observable"}] 4c: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.` } }4d:T137f,pointMap = { var map = new mapboxgl.Map({ container: pointContainer, center: mapCenter, zoom: 17, style: 'mapbox://styles/transportpartnership/cj8wm5xa0g8ql2smvduavi5gr' }); 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); }); }); }4e:T5f3,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 + '&dataSource=osm/planet-vinyard'); } else { queryUrl = String(server + 'match/point/' + lnglat.lng + ',' + lnglat.lat + ',' + bearing + '?auth=' + apiKey + '&searchRadius=' + searchRadius + '&maxCandidates=' + maxCandidates + '&dataSource=osm/planet-vinyard'); 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: []}; }4f:T17b2,pathMap = { var map = new mapboxgl.Map({ container: pathContainer, center: mapCenter, zoom: 17, style: 'mapbox://styles/transportpartnership/cj8wm5xa0g8ql2smvduavi5gr' }); 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); }); }); }50:Ted6,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 + '&dataSource=osm/planet-vinyard'; 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);51:[] 48:{"id":"3cae12a3d0caa20f","slug":"sharedstreets-vinyards","title":"SharedStreets + Vinyards","thumbnail":"3d847dbe1c2e5e4692794ee0a48fd91c3504949ca0fa32cfa0d4adb8dfb92944","access_level":"public","create_time":"$D2020-08-26T17:45:43.969Z","update_time":"$D2020-08-26T19:07:43.876Z","view_time":null,"first_public_time":"$D2020-08-26T19:08:55.513Z","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":"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":1737,"publish_version":1737,"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":"SharedStreets + Vinyards","cells":[{"id":0,"value":"md`# SharedStreets + Vinyards `","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":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":1720,"value":"\nmapCenter = {\n return [ -121.33288, 44.34477];\n}","pinned":true,"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":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":773,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":764,"value":"$50","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