mapboxgl = {
const gl = await require("mapbox-gl@3.0.0-beta.1");
const href = await require.resolve("mapbox-gl@3.0.0-beta.1/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
return gl;
}
getMap()
// replace this with key string without forking
(mapboxgl.accessToken = Secret("MAPBOX_TOKEN"))
function* getMap(layers, size = 600) {
let container = html`<div style='height:${size}px;' />`;
yield container;
let map = new mapboxgl.Map({
container,
center: [-71.057083, 42.361145],
zoom: 17,
pitch: 45,
style: "mapbox://styles/mapbox/standard-beta"
// style: "https://tiles.x-gpsmail.com/styles/squaregps-basic/style.json"
});
map.on("style.load", () => {
map.setConfigProperty("basemap", "lightPreset", "dusk");
map.setConfigProperty("basemap", "showTransitLabels", "true");
map.addSource("mapbox-dem", {
type: "raster-dem",
url: "mapbox://mapbox.mapbox-terrain-dem-v1",
tileSize: 512,
maxzoom: 14
});
// add the DEM source as a terrain layer with exaggerated height
map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });
});
map;
map.addControl(new mapboxgl.NavigationControl(), "top-right");
container.value = new Promise((resolve) => {
const bounds = [];
map.on("load", () => {
layers.forEach((layer) => {
if (layer.data.type === "FeatureCollection") {
bounds.push(...layer.data.features);
} else {
bounds.push(layer.data);
}
map.addSource(layer.name, {
type: "geojson",
data: layer.data
});
map.addLayer({
id: layer.name,
source: layer.name,
...layer.style
});
});
const [minX, minY, maxX, maxY] = turf.bbox(
turf.featureCollection(bounds)
);
map.fitBounds(
[
[minX, minY],
[maxX, maxY]
],
{ padding: 50 }
);
resolve(map);
});
});
try {
yield invalidation;
} finally {
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.
