Doing mappy and data things for City of Raleigh Parks, Recreation and Cultural Resources Department.
Public
Edited
Nov 22, 2023
1 fork
L = require('leaflet@1.2.0')
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
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()
Object.keys(trees.features[0].properties)
conditions = {
let x = [], condition;
for (let i=0; i<trees.features.length; i++){
condition = trees.features[i].properties.CONDITION;
if (!x.includes(condition)){
x.push(condition);
}
}
return x
}
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:
'© <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> © <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> © <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
