viewof map = {
const container = html`<div style="height:600px;">`;
yield container; // Give the container dimensions.
const map = container.value = new mapboxgl.Map({
container,
center: [-73.9944789, 40.7353297],
zoom: 15,
style: "mapbox://styles/mapbox/streets-v11",
scrollZoom: false
});
// const data = [{address: "63 Fifth Ave", lat: 40.7354741, long: -73.993774}, {address: "16 E 16th St", lat: 40.7368412, long: -73.9917407}, {address: "2 W 13th St", lat: 40.7353701, long: -73.9945167}]
for (const element of data) {
const thisMarker = new mapboxgl.Marker()
.setLngLat([element.long, element.lat])
.addTo(map);
}
invalidation.then(() => map.remove());
}
data = [{address: "63 Fifth Ave", lat: 40.7354741, long: -73.993774}, {address: "16 E 16th St", lat: 40.7368412, long: -73.9917407}, {address: "2 W 13th St", lat: 40.7353701, long: -73.9945167}]
// You’ll need to replace this with your own MapBox token.
// See https://www.mapbox.com/help/how-access-tokens-work/
accessToken = "pk.eyJ1IjoibW9sbGllbWFyaWUiLCJhIjoiY2txNXF0Mmw5MTVvdDJ3b2N3bHhobXN6aCJ9.ztC4Av-WFMynvpwyFgUiGw"
mapboxgl = {
const gl = await require("mapbox-gl@1");
if (!gl.accessToken) {
gl.accessToken = accessToken;
const href = await require.resolve("mapbox-gl@1/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
viewof d = Inputs.select(days, {label: "Days"})
days = ["Sundays", "Mondays", "Tuesdays", "Wednesdays", "Thursdays", "Fridays", "Saturdays"]
d
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.
