Software Engineer in Tempe, AZ
Public
Edited
Jul 22, 2024
Importers
renderMap = {
return function* renderMap(options, mapHeight = height) {
const container = html`<div style="height:${mapHeight}px;">`;
yield container;
const map = (container.value = new mapboxgl.Map({
container,
center: [-111.93421, 33.42103],
zoom: 14,
style: "mapbox://styles/mapbox/streets-v11",
scrollZoom: false,
...options,
}));
// add navigation controls (zoom buttons, pitch & rotate)
map.addControl(new mapboxgl.NavigationControl());
invalidation.then(() => map.remove());
// Wait until the map loads, then yield the container again.
yield new Promise(resolve => {
if (map.loaded()) resolve(map);
else map.on('load', () => resolve(map));
});
yield container;
}
}
height = 610
mapboxgl = {
const gl = await require("mapbox-gl@2.7.1");
if (!gl.accessToken) {
// https://www.mapbox.com/help/how-access-tokens-work/
gl.accessToken =
"pk.eyJ1IjoiamtldGNoYW0iLCJhIjoiY2xmYnpoazJ4MGllYTN3bGQwajd5am12YSJ9.q8FnFcmlIc_OL-IGvgZg6Q";
const href = await require.resolve("mapbox-gl@1/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
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.
