2d:null 2e:["$","title",null,{"children":"Baileywick Park Interactive Drivetime Area | Ryan Cooper | Observable"}] 33:T45f,viewof map = { let container = DOM.element('div', { style: `width:${width}px;height:${width/1.5}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":"d6e49eb6d8a76e66","slug":"baileywick-park-interactive-drivetime-area","title":"Baileywick Park Interactive Drivetime Area","thumbnail":"28c90a88eae6e08df58f4e63d374bcd9c3bd6d34dbc1d8b56d044270d4ba1128","access_level":"public","create_time":"$D2019-07-01T16:09:32.470Z","update_time":"$D2019-07-02T12:39:19.798Z","view_time":null,"first_public_time":"$D2019-07-02T12:42:41.488Z","has_unpublished_edits":null,"fork":{"id":"ccd66d95f4e81384","slug":"turfjs-leaflet-interactive-buffer","title":"TurfJS, Leaflet, & Interactive Buffer","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":737,"publish_version":737,"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":1,"collection":{"id":"6c695eb46d89fd17","slug":"isolines","title":"Isolines","owner":{"id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper"}},"type":"notebook","body":{"title":"Baileywick Park Interactive Drivetime Area","cells":[{"id":259,"value":"md`# Baileywick Park Interactive Drivetime 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 Drive Time (minutes):
\n \n \n `;\n const range = div.querySelector(\"[type=range]\");\n const number = div.querySelector(\"[type=number]\");\n div.value = range.value = number.value = 5;\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`### Drivetime Area via Mapbox's Isochrone API`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"apNSA = (await fetch(`https://api.mapbox.com/isochrone/v1/mapbox/driving/${ap.features[0].geometry.coordinates[0]},${ap.features[0].geometry.coordinates[1]}?contours_minutes=${nsaSlider}&polygons=true&access_token=${mapboxToken}`)).json()","pinned":false,"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 drivetime polygon specified by the drivetime 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":"mapboxToken = 'pk.eyJ1IjoicHJjcmRldmxhYiIsImEiOiJjamljNWE0Z2owMGJjM2tzM3gxYmRrNXZnIn0.exFKTScPuDEIqeY-Rv36gQ'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"