Exploring people, places, and politics.
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: [-122.65, 45.52],
zoom: 12,
style: "mapbox://styles/rjsheperd/ck94un7j80ldk1io5wskcgbum/draft"
});
map.on("mousemove", e => {
container.value = e.lngLat;
container.dispatchEvent(new CustomEvent("input"));
});
}
mapboxgl = {
const gl = await require("mapbox-gl@0.49");
if (!gl.accessToken) {
gl.accessToken =
"pk.eyJ1IjoicmpzaGVwZXJkIiwiYSI6ImNqeHoyd255dDAwODkzbW8ybjJsZ2QxYnoifQ.BcU_VTO_YwMYCovLQ_VdpA";
const href = await require.resolve("mapbox-gl@0.49/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
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.
