2f:T51b,viewof centerpoint = { let container = html`

`; // 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' ] } }); }); }30:[] 2d:{"title":"Live reloadable icons with Figmasset","cells":[{"id":0,"value":"# Live reloadable icons with Figmasset\n\nAdd some descriptive text here","pinned":false,"hidden":false,"mode":"md"},{"id":290,"value":"\n\n\n\n\n\n\n

\n\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":202,"value":"md`### A map that produces a value`","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"centerpoint","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`## Including the library\n\nMapbox GL JS can also be loaded from Mapbox's CDN, but it works perfectly well loaded from unpkg, and that's how we load most things, so... I load it from there. Like Leaflet, it needs both JavaScript and CSS to properly function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1Ijoic3RhbWVuIiwiYSI6ImNsOTV5djk5ajJqM3Yzbm5ucGowbzBraHoifQ.O6WcDIkxGewrny93tOK0cQ\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}\n\n// import * as figmasset from 'https://cdn.skypack.dev/figmasset';","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}