{
let container = html`<div style='height:400px;' />`;
// Give the container dimensions.
yield container;
// Create the \`map\` object with the mapboxgl.Map constructor, referencing
// the container div
let map = new mapboxgl.Map({
container,
center: [-73.61457, 45.524149],
zoom: 10,
style: "mapbox://styles/mapbox/streets-v9",
scrollZoom: false
});
if (showNavigationControl) {
map.addControl(new mapboxgl.NavigationControl(), "top-right");
}
// Be careful to clean up the map's resources using \`map.remove()\` whenever
// this cell is re-evaluated.
invalidation.then(() => map.remove());
}
viewof map = {
let container = html`<div style='height:400px;' />`;
// Give the container dimensions.
yield container;
// Create the \`map\` object with the mapboxgl.Map constructor, referencing
// the container div
let map = new mapboxgl.Map({
container,
center: [4.352731704711914, 50.846272321172954],
zoom: 4,
style: "mapbox://styles/mapbox/light-v9"
});
// Wait until the map loads.
map.on("load", () => {
container.value = map;
container.dispatchEvent(new CustomEvent("input"));
});
}
viewof centerpoint = {
let container = html`<div style='height:400px;' />`;
// Give the container dimensions.
yield container;
// Create the \`map\` object with the mapboxgl.Map constructor, referencing
// the container div
let map = new mapboxgl.Map({
container,
center: [4.352731704711914, 50.846272321172954],
zoom: 4,
style: "mapbox://styles/mapbox/light-v9"
});
map.on("mousemove", e => {
container.value = e.lngLat;
container.dispatchEvent(new CustomEvent("input"));
});
}
loadStyleSheet = () =>
html`<link href='https://unpkg.com/mapbox-gl@1.5.0/dist/mapbox-gl.css' rel='stylesheet' />`
mapboxgl = {
let mapboxgl = await require('mapbox-gl@1.5.0');
mapboxgl.accessToken =
'pk.eyJ1IjoibGlmZXdpbm5pbmciLCJhIjoiYWZyWnFjMCJ9.ksAPTz72HyEjF2AOMbRNvg';
return mapboxgl;
}
html`<style>
.labeled::after {
margin-left: 2em;
white-space: nowrap;
content: attr(aria-label);
}
</style>`
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.
