27:null 28:["$","title",null,{"children":"Live reloadable icons with Figmasset | Kelsey Taylor | Observable"}] 2d: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' ] } }); }); }2e:[] 2b:{"id":"db363b0efd2ec259","slug":null,"title":"Live reloadable icons with Figmasset","thumbnail":"3b5ba788e3cda4d46953aa2b4f24e4cbee1e2aa3ced4d17579f7c9667f492375","access_level":"public","create_time":"$D2022-10-17T21:28:31.630Z","update_time":"$D2022-10-17T21:33:28.461Z","view_time":null,"first_public_time":"$D2022-10-17T21:28:31.630Z","has_unpublished_edits":null,"fork":{"id":"8df4248910c363e5","slug":"using-mapbox-gl-js","title":"Using Mapbox GL JS","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2fb7e40d701a08db","login":"kelsey-taylor","name":"Kelsey Taylor","avatar_url":"https://avatars-next.observableusercontent.com/9cf70eb786c3943a9f42cc4d06e716a3f503d605b16a112eecf1aab954e25a80","tier":"starter_2024"},"version":317,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"660aca297c03940f","login":"kelsey-taylor","name":"Kelsey Taylor","avatar_url":"https://avatars-next.observableusercontent.com/9cf70eb786c3943a9f42cc4d06e716a3f503d605b16a112eecf1aab954e25a80","tier":null}],"members":[{"type":"individual","id":"660aca297c03940f","login":"kelsey-taylor","name":"Kelsey Taylor","avatar_url":"https://avatars-next.observableusercontent.com/9cf70eb786c3943a9f42cc4d06e716a3f503d605b16a112eecf1aab954e25a80","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":290,"value":"\n\n\n\n\n\n\n

\n\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":202,"value":"md`### A map that produces a value`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"centerpoint","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"