map = {
const container = html`<div style="height:800px;">`;
yield container;
const map = (container.value = new maplibregl.Map({
container,
style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
center: [-120, 50],
zoom: 2,
}));
map.on("load", function () {
map.addSource("earthquakes", {
type: "geojson",
data: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/1.0_month.geojson",
});
map.addLayer({
id: "earthquakes",
type: "circle",
source: "earthquakes",
paint: {
"circle-color": "red",
"circle-stroke-color": "black",
"circle-stroke-width": 1,
"circle-radius": 2
}
});
});
invalidation.then(() => map.remove());
}
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.
