2d:null 2e:["$","title",null,{"children":"Baileywick Park Interactive Service Area | Ryan Cooper | Observable"}] 33:T45b,viewof map = { let container = DOM.element('div', { style: `width:${width}px;height:${width}px`}); yield container; const map = container.value = L.map(container).setView([ap.features[0].geometry.coordinates[1],ap.features[0].geometry.coordinates[0]], 13); let base = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { attribution: '© OpenStreetMap contributors © CARTO', subdomains: 'abcd', maxZoom: 19 }).addTo(map) //================ // FEATURE LAYERS //================ // Park Boundary L.geoJSON(parkBoundary, { style: { fillColor: "#B71C1C", fillOpacity: 0.3, weight: 0 } }).addTo(map); // Park Access Point L.geoJSON(ap, { pointToLayer: (feature, latlng) => { return L.circleMarker(latlng, { radius: 7, weight: 7, color: "#FFEB3B", opacity: 0.25, fillOpacity: 1 }) } }).addTo(map); // Drivetime Area Feature Group apNSAFG.addTo(map) }34:[] 31:{"id":"a6f600e178d2c920","slug":"baileywick-park-interactive-service-area","title":"Baileywick Park Interactive Service Area","thumbnail":"53d4fdcab21ee84553c1b1809cadedbeef0a8abc34fa81ed69ac5253af353d68","access_level":"public","create_time":"$D2019-07-02T14:27:17.249Z","update_time":"$D2019-08-22T18:39:42.649Z","view_time":null,"first_public_time":"$D2019-07-02T15:48:16.310Z","has_unpublished_edits":null,"fork":{"id":"d6e49eb6d8a76e66","slug":"baileywick-park-interactive-drivetime-area","title":"Baileywick Park Interactive Drivetime Area","owner":{"id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper"}},"stars":0,"starred":false,"owner":{"type":"team","id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":"starter_2024"},"version":831,"publish_version":831,"role":null,"authored":false,"authors":[{"type":"individual","id":"cae231bf35ff5917","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":null}],"members":[{"type":"individual","id":"cae231bf35ff5917","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6c695eb46d89fd17","slug":"isolines","title":"Isolines","owner":{"id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper"}},"type":"notebook","body":{"title":"Baileywick Park Interactive Service Area","cells":[{"id":259,"value":"md`# Baileywick Park Interactive Service Area`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"viewof nsaSlider = {\n const div = html`\n Service Area (miles):
\n \n \n `;\n const range = div.querySelector(\"[type=range]\");\n const number = div.querySelector(\"[type=number]\");\n div.value = range.value = number.value = 3;\n range.oninput = () => number.value = div.value = range.valueAsNumber;\n number.oninput = () => range.value = div.value = number.valueAsNumber;\n \n return div\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"md`### Baileywick Park Boundary`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"parkBoundary = (await fetch(\"https://services.arcgis.com/v400IkDOw1ad7Yad/arcgis/rest/services/Parks/FeatureServer/0/query?where=NAME='Baileywick'&outFields=OBJECTID,NAME,PARKID&outSR=4326&f=geojson\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"md`### Baileywick Access Point`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"ap = (await fetch(\"https://services.arcgis.com/v400IkDOw1ad7Yad/arcgis/rest/services/Park_Access_Points/FeatureServer/0/query?where=AP_CODE%3D%27156-004%27&outFields=*&returnGeometry=true&outSR=4326&f=geojson\")).json()\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`### Isodistance via HERE's Routing API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"apNSA = {\n let hereResult = (await fetch(`https://isoline.route.api.here.com/routing/7.2/calculateisoline.json\n?app_id=${hereApp.id}\n&app_code=${hereApp.code}\n&mode=balanced;pedestrian;traffic:disabled\n&start=geo!${ap.features[0].geometry.coordinates[1]},${ap.features[0].geometry.coordinates[0]}\n&range=${Math.round(nsaSlider*1609.34)}\n&rangetype=distance`).then(data =>{\n return data.json()\n }).then(json => {\n return json\n }))\n return hereIsolineToGeoJSON(hereResult)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"md`HERE does not return GeoJSON so it needs to parsed. This function is mostly a crazy chain of mappings to at least get things into shape for this particular case. Not sure how robust this solution actually is though.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"function hereIsolineToGeoJSON(json) {\n let isolineArrays = json.response.isoline.map(components => components.component.map(shapes => shapes.shape.map(coordinateStrings => coordinateStrings.split(\",\").map(coordinates => parseFloat(coordinates)).slice().reverse())))\n \n return turf.featureCollection([turf.multiPolygon(isolineArrays)])\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`An empty feature group is used to hold the isodistance polygon specified by the isodistance slider.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"apNSAFG = L.featureGroup()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"md`When the drivetime slider changes, the resulting GeoJSON is used to create a new Leaflet layer that is then added to the apNSAFG.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"apNSALayer = {\n apNSAFG.clearLayers();\n let apNSAFeature = L.geoJSON(apNSA, {\n style: (feature) => {\n return {\n color: \"#18FFFF\",\n weight: 1,\n opacity: 0.8,\n fillOpacity: 0.1\n }\n }\n })\n \n return apNSAFG.addLayer(apNSAFeature);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"L = require('leaflet@1.2.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"turf = require('https://npmcdn.com/@turf/turf/turf.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"hereApp = {\n return {\n id: \"ZV4i6i2Ne3wEFgz2FZ5U\",\n code: \"6srjQu7rkRxj4TCLTHgu0g\"\n }\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"