viewof centerpoint = {
let container = html`<div style='height:600px;' />`;
yield container;
// Create a basic Mapbox GL map
let map = new mapboxgl.Map({
container,
zoom: 12,
center: [-122.447303, 37.753574],
style: "mapbox://styles/mapbox/light-v10"
});
map.on('load', async () => {
// On load, add a new layer. This isn't always necessary but is helpful for demonstration purposes here.
map.addSource('mapbox-streets', {
type: 'vector',
url: 'mapbox://mapbox.mapbox-streets-v8'
});
/*
* On map load, call loadFigmassets()
*/
await figmasset.loadFigmassets({
map,
frameNames: [frame], // The frame(s) to load from the Figma file
fileKey: FIGMA_FILE_KEY, // The Figma file's key
scales: [2],
personalAccessToken: FIGMA_ACCESS_TOKEN, // Your personal access token from Figma
});
map.addLayer({
'id': 'poi-data',
'type': 'symbol',
'source': 'mapbox-streets',
'source-layer': 'poi_label',
'layout': {
'icon-allow-overlap': true,
'icon-image': [
'match',
['get', 'class'],
'park_like',
'kelly-circle', // This is the name of a group in our Figma file
'food_and_drink',
'indigo-triangle', // This is the name of a group in our Figma file
['public_facilities', 'general', 'arts_and_entertainment'],
'plum-triangle', // This is the name of a group in our Figma file
'mustard-circle' // This is the name of a group in our Figma file
]
}
});
});
}
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.
