Public
Edited
Jan 2
createMap(points)
points = ({
type: "FeatureCollection",
features: [
...sites
// .filter(d => d.NEW_AREA_NAME == 'Cambridgeshire and Bedfordshire' | d.NEW_AREA_NAME == 'Essex Norfolk and Suffolk' | d.NEW_AREA_NAME == 'Hertfordshire and North London')
.filter(d => graylingSites.includes(d.SITE_ID))
.map((d) => ({
type: "Point",
coordinates: [+d.Long, +d.Lat],
properties: d
}))
]
})
new Set(sites.map(d => d.NEW_AREA_NAME))
catches.filter(d => d.SPECIES_NAME.includes("Brook trout"))
graylingSites = {
let graylingSites = catches.filter(d => d.SPECIES_NAME.includes("Grayling"))
// let graylingSites = catches.filter(d => d.SPECIES_NAME.includes("Brown / sea"))
return [...new Set(graylingSites.map(d => d.SITE_ID))];
}
import {sites} from "77788580325615c3"
import {catches} from "77788580325615c3"
function* createMap(geojson) {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container).setView([40.7299, -73.9923], 13);
L.tileLayer(
"https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png",
{
attribution:
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
subdomains: "abcd",
ext: "png"
}
).addTo(map);
if (geojson) {
const layer = L.geoJson(geojson, {
weight: 1,
color: "#432",
onEachFeature: (feature, layer) =>
layer.bindPopup(
`${Object.entries(feature.properties)
.map(([, v]) => v)
.join("<br>\n")}`
)
}).addTo(map);
map.fitBounds(layer.getBounds());
}
// return container
}
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.
