2d:null 2e:["$","title",null,{"children":"TurfJS, Leaflet, & Interactive Buffer | Ryan Cooper | Observable"}] 33:[] 31:{"id":"ccd66d95f4e81384","slug":"turfjs-leaflet-interactive-buffer","title":"TurfJS, Leaflet, & Interactive Buffer","thumbnail":"5a8fe2c4176cc0ac13e43b9bb1cad3d0d36dbecf289fb4eba36db6b941482e8b","access_level":"public","create_time":"$D2018-02-02T03:12:20.127Z","update_time":"$D2019-05-24T00:18:13.879Z","view_time":null,"first_public_time":"$D2018-02-02T04:43:35.197Z","has_unpublished_edits":null,"fork":{"id":"21ae4d64be7f01e9","slug":"mapping-trees-in-west-park-raleigh-nc","title":"Mapping Trees in West Park, Raleigh, NC","owner":{"id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper"}},"stars":2,"starred":false,"owner":{"type":"team","id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper","avatar_url":"https://avatars-next.observableusercontent.com/868e065c57a1f44e8422aaae8c978ef82dc1ada2d596eae26d808adebb8b4b6a","tier":"starter_2024"},"version":608,"publish_version":608,"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":8,"collection":{"id":"195efd48c9c840bc","slug":"spatial-analysis","title":"Spatial Analysis","owner":{"id":"9d55030af7c597b4","login":"maptastik","name":"Ryan Cooper"}},"type":"notebook","body":{"title":"TurfJS, Leaflet, & Interactive Buffer","cells":[{"id":259,"value":"md`# TurfJS, Leaflet, & Interactive Buffer`","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":276,"value":"md`### Load Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"track = (await fetch(\"https://gist.githubusercontent.com/maptastik/0555471e66d2606aaf8c25f5137084e7/raw/d0643424045c0e4caa56d1bb11ee6e0bf03f4687/test_track.geojson\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"md`### Buffer Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"trackBuff = turf.buffer(track, sliderTrack, {units: unitSelect})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"md`An empty feature group to hold our buffer result`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"trackBuffFG = L.featureGroup()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":455,"value":"md`## Interactive buffer of a line\nMove the slider to change the width of the buffer. Select a unit from the dropdown to change the buffer's measurement unit.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"viewof sliderTrack = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"viewof unitSelect = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"viewof map = {\n let container = DOM.element('div', { style: `width:${width}px;height:${width/2.5}px`});\n yield container;\n \n const map = container.value = L.map(container).setView([35.792136, -78.675752],15);\n let base = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap © CartoDB',\n subdomains: 'abcd',\n maxNativeZoom:19,\n maxZoom: 22\n\t}).addTo(map)\n \n function lineStyle(feature) {\n return {\n color: \"#64FFDA\",\n weight: 2,\n lineCap: \"butt\",\n opacity: 0.8\n }\n }\n \n let trackLayer = L.geoJSON(track, {\n style: lineStyle\n }).addTo(map);\n \n trackBuffFG.addTo(map)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"md`Update buffer layer when there's some change`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"trackBuffLayer = {\n trackBuffFG.clearLayers();\n let trackBuffFeature = L.geoJSON(trackBuff, {\n style: (feature) => {\n return {\n color: \"#FF4081\",\n weight: 1,\n opacity: 0.8,\n fillOpacity: 0\n }\n }\n })\n \n return trackBuffFG.addLayer(trackBuffFeature);\n}","pinned":true,"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"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"