viewof map = {
const container = html`<div style="height:600px;">`;
yield container; // Give the container dimensions.
const map = container.value = new mapboxgl.Map({
container,
center: [-77.033485, 38.897205],
zoom: 10,
style: "mapbox://styles/mapbox/streets-v10",
scrollZoom: false
});
invalidation.then(() => map.remove());
}
center = fetch(`https://api.tiles.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(query)}.json?access_token=${mapboxgl.accessToken}`)
.then(response => response.json())
.then(geocoding => geocoding.features[0].center)
map.flyTo({center})
mapboxgl = {
const gl = await require("mapbox-gl@0.49");
if (!gl.accessToken) {
// This is @tmcw’s. https://www.mapbox.com/help/how-access-tokens-work/
gl.accessToken = "pk.eyJ1IjoidG1jdyIsImEiOiJjamN0Z3ZiOXEwanZkMnh2dGFuemkzemE3In0.gibebYiJ5TEdXvwjpCY0jg";
const href = await require.resolve("mapbox-gl@0.49/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
import {submit} from "@mbostock/more-deliberate-inputs"
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.
