Public
Edited
Sep 7, 2023
viewof accessToken = Inputs.text({
label: "Access token",
value: "pk.eyJ1IjoicmVkZXNpZ25pbmciLCJhIjoiY2t2NmdmbGZzMTd2ODJubHVqcmQ1bXcxMiJ9.3_k3e6aGsBFN_fKBIoLQ9g"
})
viewof myMap = {
const container = html`<div id='map' class='bg-gray-dark w-full h600'></div>`;
const map = new mapboxgl.Map({
container,
center: [-71.057083, 42.361145],
zoom: 15.5,
pitch: 75
});
invalidation.then(() => map.remove());
map.addControl(new mapboxgl.FullscreenControl());
container.value = map;
return container
}
mapboxgl = {
const gl = await require("https://api.mapbox.com/mapbox-gl-js/v3.0.0-beta.2/mapbox-gl.js");
if (!gl.accessToken) {
gl.accessToken = accessToken;
const href = await require.resolve("mapbox-gl@3.0.0-beta.2/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
html`<link href="https://api.mapbox.com/mapbox-assembly/mbx/v1.2.0/assembly.css" rel="stylesheet" />`
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.
