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,
zoom: 14,
center: [-122.447303, 37.753574],
projection: 'globe',
style: "mapbox://styles/mapbox/light-v10"
});
map.on('load', () => {
map.addSource('mapbox-streets', {
type: 'vector',
url: 'mapbox://mapbox.mapbox-streets-v8'
});
// figmasset.loadFigmassets({
// map,
// this is the important part! make sure to change the frameNames to pull the frame you're working on
// frameNames: ['square'],
// fileKey: 'S037EIcLgAmSMEwXSSiV9W',
// scales: [2],
// personalAccessToken: 'figd_hFFILvnauhiBVCqR5yqHxuJSbPxGERw8RT4us6lR',
// });
map.addLayer({
'id': 'poi-data',
'type': 'symbol',
'source': 'mapbox-streets',
'source-layer': 'poi_label',
'layout': {
'icon-image': [
'match',
['get', 'class'],
'park_like',
'kelly-circle',
'food_and_drink',
'indigo-triangle',
['public_facilities', 'general', 'arts_and_entertainment'],
'plum-triangle',
'mustard-circle'
]
}
});
});
}
mapboxgl = {
const gl = await require("mapbox-gl@0.49");
if (!gl.accessToken) {
gl.accessToken =
"pk.eyJ1Ijoic3RhbWVuIiwiYSI6ImNsOTV5djk5ajJqM3Yzbm5ucGowbzBraHoifQ.O6WcDIkxGewrny93tOK0cQ";
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 * as figmasset from 'https://cdn.skypack.dev/figmasset';
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.
