viewof map = {
let container = html`<div style='height:400px;' />`;
yield container;
let map = new mapboxgl.Map({
container,
zoom: 14,
center: [-122.447303, 37.753574],
projection: 'globe',
style: "mapbox://styles/mapbox/light-v10"
});
map.on('load', async () => {
map.addSource('mapbox-streets', {
type: 'vector',
url: 'mapbox://mapbox.mapbox-streets-v8'
});
await figmasset.loadFigmassets({
map,
// XXX 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'
]
}
});
});
}
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.
