Published
Edited
Feb 10, 2021
5 forks
7 stars
Insert cell
Insert cell
{
const mapboxgl = await require("mapbox-gl@1.13.0");

let container = html`<div style='height:600px;' />`;

const mapStyle = {
version: 8,
sources: {
worldImagery: {
type: "raster",
tiles: [
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
],
tileSize: 256
}
},
layers: [
{
id: "worldImagery",
type: "raster",
source: "worldImagery",
minzoom: 0,
maxzoom: 22
}
]
};

const map = new mapboxgl.Map({
container: container,
style: mapStyle,
center: [-48.408264, -10.739508],
zoom: 15.7
});

const href = await require.resolve("mapbox-gl@1.13.0/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);

yield container;
}
Insert cell
Insert cell

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.
Learn more