viewof map = {
const container = html`<div style="height:400px;">`;
yield container;
async function canvasToArrayBuffer(canvas) {
return new Promise((resolve, reject) => {
canvas.toBlob((blob) => {
blob.arrayBuffer().then(buffer => {
resolve(buffer)
})
.catch(err => reject(err))
})
})
}
const map = container.value = new maplibregl.Map({
container,
style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
});
maplibregl.addProtocol('custom', async (params, abortController) => {
const canvas = document.createElement('canvas');
canvas.width = 256;
canvas.height = 256;
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 256, 256);
const arr = await canvasToArrayBuffer(canvas);
return {data: arr}
})
map.on('load', () => {
map.addSource('custom-tiles', {
type: 'raster',
// tiles: ['https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg'], // this works
tiles: ['custom://{z}/{x}/{y}.jpg'],
tileSize: 256
});
map.addLayer({
id: 'custom-layer',
type: 'raster',
source: 'custom-tiles',
paint: {'raster-opacity': 0.4}
});
});
invalidation.then(() => container.remove());
}
maplibregl = require("maplibre-gl")
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.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.
