equalEarthMap = {
const container = html`<div style="height: 600px;"></div>`;
yield container;
const map = new mapboxgl.Map({
accessToken: mapboxAccessToken,
projection: {
name: "equalEarth"
},
container,
zoom: 1,
style: "mapbox://styles/mapbox/streets-v11"
});
invalidation.then(() => map.remove());
}
viewof map = {
const container = html`<div style="height:600px;">`;
yield container; // Give the container dimensions.
const map = new mapboxgl.Map({
accessToken: mapboxAccessToken,
projection: {
name: "equalEarth"
},
container,
zoom: 1,
style: "mapbox://styles/mapbox/streets-v11"
});
map.on("load", () => {
container.value = map;
container.dispatchEvent(new CustomEvent("input"));
});
invalidation.then(() => map.remove());
}
{
// Update projection on change
map.setProjection({
name: projection.name,
...(projection.options || {})
});
map.setCenter(projection.options?.center || [0, 0]);
map.setZoom(1);
}
{
// Update showTileBoundaries flag on change
map.showTileBoundaries = showTileBoundaries;
}
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.
