staticMap.preview
staticMap = getStaticMap(size, options, dpr)
function getStaticMap(size, options, devicePixelRatio = 1) {
const backupDevicePixelRatio = window.devicePixelRatio;
window.devicePixelRatio = devicePixelRatio;
const container = html`
<div style="
position: absolute;
visibility: hidden;
width: ${size[0]}px;
height: ${size[1]}px;
"></div>`;
document.body.append(container);
const map = new mapboxgl.Map({
...options,
container
});
invalidation.then(() => map.remove());
return new Promise(resolve => {
map.on("load", () => {
const attribution =
container.querySelector(".mapboxgl-ctrl-bottom-left").outerHTML +
container.querySelector(".mapboxgl-ctrl-bottom-right").outerHTML;
const style = map.getStyle();
style.layers.forEach(layer => {
if (layer.type === "raster") {
layer.paint = { "raster-fade-duration": 0 };
}
});
map.setStyle(style);
map.once("render", () => {
window.devicePixelRatio = backupDevicePixelRatio;
const mapCanvas = map.getCanvas();
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = mapCanvas.width;
canvas.height = mapCanvas.height;
canvas.style.width = "100%";
canvas.style.height = "100%";
context.drawImage(mapCanvas, 0, 0);
map.remove();
const preview = html`
<div class="mapboxgl-map" style="width: ${size[0]}px; height: ${size[1]}px;">
${canvas}
${attribution}
</div>`;
resolve({
attribution,
canvas,
preview
});
});
});
});
}
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.
