Public
Edited
Nov 21, 2023
allData = ({
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-123.0867, 44.0521] // Eugene, Oregon
},
"properties": {
"name": "Eugene"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-123.0259, 44.0462] // Springfield, Oregon
},
"properties": {
"name": "Springfield"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-123.0864, 44.0521] // University of Oregon
},
"properties": {
"name": "University of Oregon"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-123.0865, 44.0519]
},
"properties": {
"name": "Point 1"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-123.0823, 44.0564]
},
"properties": {
"name": "Point 2"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-123.0784, 44.0542]
},
"properties": {
"name": "Point 3"
}
},
]
})
{
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container);
//const layer = L.geoJSON(allData).addTo(map);
geoLayer.addTo(map)
map.fitBounds(geoLayer.getBounds(), {maxZoom: 16});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
geoLayer = L.geoJSON(allData)
data = allData.features.slice(0, clicks)
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.
