2d:null 2e:["$","title",null,{"children":"Mapping Trees in West Park, Raleigh, NC | Ryan Cooper | Observable"}] 33:T5d4,treeMap = { let container = DOM.element("div", { style: `width:${width}px;height:${width / 2}px` }); yield container; let map = L.map(container).setView([35.785644, -78.654006], 17); let toner = L.tileLayer( "https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.{ext}", { minZoom: 0, maxNativeZoom: 20, attribution: '© Stadia Maps © Stamen Design © OpenMapTiles © OpenStreetMap contributors', ext: "png", maxZoom: 22 } ).addTo(map); function getColor(d) { return d == conditions[0] ? colors[3] : d == conditions[1] ? colors[4] : d == conditions[2] ? colors[2] : d == conditions[3] ? colors[0] : d == conditions[4] ? colors[1] : "#000000"; } function onEachFeature(feature, layer) { layer.bindPopup(feature.properties.COMMON_NAME); } let treesLayer = L.geoJSON(trees, { pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, { radius: 6, color: "#fff", fillColor: getColor(feature.properties.CONDITION), weight: 1, opacity: 1, fillOpacity: 0.75 }); }, onEachFeature: onEachFeature }).addTo(map); }34:[] 31:{"id":"21ae4d64be7f01e9","slug":"mapping-trees-in-west-park-raleigh-nc","title":"Mapping Trees in West Park, Raleigh, NC","thumbnail":"8a665dcf4f749a204a5c57ded728d8ca9e8a1140d66ab3cb279d0cb00566934d","access_level":"public","create_time":"$D2018-01-31T22:39:17.285Z","update_time":"$D2023-11-22T15:39:13.154Z","view_time":null,"first_public_time":"$D2018-02-01T05:06:06.423Z","has_unpublished_edits":null,"fork":false,"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":260,"publish_version":null,"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":2,"collection":null,"type":"notebook","body":{"title":"Mapping Trees in West Park, Raleigh, NC","cells":[{"id":0,"value":"md`# Mapping Trees in West Park, Raleigh, NC\nThis started out as me testing Observable and ended with me learning some JavaScript. I've been doing a lot of Python lately and my JavaScript skills were getting rusty (They were already pretty dull!). As I tried to work through and build upon a Leaflet-based map, I found myself inspired by this notebook to extend my code and try new things.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md`First, we load Leaflet!`","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":242,"value":"md`Load some GeoJSON data of trees in West Park, Raleigh, NC from ArcGIS Online. I haven't really kept up with the new features in JavaScript like await and fetch. Working through this example I learned that these seem to take some of the complexity out of loading data from remote sources into a Leaflet map. I enjoy jQuery, but I do like that I can use vanilla JavaScript to load data more easily.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"trees = (await fetch('https://services.arcgis.com/v400IkDOw1ad7Yad/arcgis/rest/services/WestParkTree_(Public)/FeatureServer/0/query?where=PARK_NAME%3D%27West+Park%27&objectIds=&time=&geometry=&geometryType=esriGeometryEnvelope&inSR=2264&spatialRel=esriSpatialRelIntersects&resultType=none&distance=0.0&units=esriSRUnit_Meter&returnGeodetic=false&outFields=*&returnHiddenFields=false&returnGeometry=true&multipatchOption=xyFootprint&maxAllowableOffset=&geometryPrecision=&outSR=4326&datumTransformation=&applyVCSProjection=false&returnIdsOnly=false&returnCountOnly=false&returnExtentOnly=false&returnDistinctValues=false&orderByFields=&groupByFieldsForStatistics=&outStatistics=&having=&resultOffset=&resultRecordCount=&returnZ=false&returnM=false&returnExceededLimitFeatures=true&quantizationParameters=&sqlFormat=none&f=pgeojson')).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md`I didn't really know what fields I was working with so I looked up the keys for the first feature in trees. I [learned](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) that you can use the Object.keys() method to get an array of all the keys for an object.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"Object.keys(trees.features[0].properties)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`I thought CONDITION might be interesting, but I wanted to explore more. I wanted to see what condition values existed in the dataset. I used a for loop to iterate over each feature in my dataset. If it found a CONDITION value that wasn't in the array x, that value was pushed to the array. In the end, I got back an array of 5 unique values for CONDITION`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"conditions = {\n let x = [], condition;\n for (let i=0; iconditions array doesn't follow the same order as the colors array. I'm sure there's a better way to handle that`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"colors = ['#d7191c','#fdae61','#ffffbf','#a6d96a','#1a9641']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"md`The creations of the DOM element for the map was a little different for me. Usually I hard-code that into a separate HTML file. Just a minor new thing to learn. After that, it's pretty much like you'd make any other Leaflet map. Very cool and inspiring!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"