viewof map = {
const container = html`<div style="height:800px;">`;
yield container; // Give the container dimensions.
const map = (container.value = new mapboxgl.Map({
container,
center: [103.61, 36.8],
zoom: 3.5,
style: "mapbox://styles/mapbox/streets-v11",
scrollZoom: false
}));
invalidation.then(() => map.remove());
}
// You’ll need to replace this with your own MapBox token.
// See https://www.mapbox.com/help/how-access-tokens-work/
accessToken = "pk.eyJ1IjoibW9sbGllbWFyaWUiLCJhIjoiY2txNXF0Mmw5MTVvdDJ3b2N3bHhobXN6aCJ9.ztC4Av-WFMynvpwyFgUiGw"
mapboxgl = {
const gl = await require("mapbox-gl@1");
if (!gl.accessToken) {
gl.accessToken = accessToken;
const href = await require.resolve("mapbox-gl@1/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
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.
