29:null 2a:["$","title",null,{"children":"Test X | Maxwell Fite | Observable"}] 2f:[] 2d:{"id":"8136d39a798d5eb8","slug":null,"title":"Test X","thumbnail":"b96fad9acd595dda36d3a8e8544da6877d4231d7172c7a448efe37f14a34f9f1","access_level":"public","create_time":"$D2023-02-11T14:31:50.135Z","update_time":"$D2023-02-11T18:27:57.609Z","view_time":null,"first_public_time":"$D2023-02-11T14:31:50.135Z","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":"d51befe96cbd0cba","login":"mfite","name":"Maxwell Fite","avatar_url":"https://avatars-next.observableusercontent.com/cb9cee362ad5adf84f56e22eb40d86bfd9c592564ec31708950e229c8d3f9284","tier":"starter_2024"},"version":301,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b186612a55113383","login":"mfite","name":"Maxwell Fite","avatar_url":"https://avatars-next.observableusercontent.com/cb9cee362ad5adf84f56e22eb40d86bfd9c592564ec31708950e229c8d3f9284","tier":null}],"members":[{"type":"individual","id":"b186612a55113383","login":"mfite","name":"Maxwell Fite","avatar_url":"https://avatars-next.observableusercontent.com/cb9cee362ad5adf84f56e22eb40d86bfd9c592564ec31708950e229c8d3f9284","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Test X","cells":[{"id":0,"value":"md`# Test X`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"{\n let container = html`

`;\n\n // Give the container dimensions.\n yield container;\n\n // Create the \\`map\\` object with the mapboxgl.Map constructor, referencing\n // the container div\n let map = new mapboxgl.Map({\n container,\n center: [-73.61457, 45.524149],\n zoom: 10,\n style: \"mapbox://styles/mapbox/streets-v9\",\n scrollZoom: false\n });\n\n if (showNavigationControl) {\n map.addControl(new mapboxgl.NavigationControl(), \"top-right\");\n }\n\n // Be careful to clean up the map's resources using \\`map.remove()\\` whenever\n // this cell is re-evaluated.\n invalidation.then(() => map.remove());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"md`Here's an example of reactive cells affecting the map: you can toggle navigation on and off. When the value of the cell - **showNavigation** - changes, the map is disposed of and re-instantiated with the new configuration.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"viewof showNavigationControl = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"md`## A map that responds to reactive variables\n\nHere's an example of a slightly more sophisticated setup: a map that responds to reactive variables without being re-instantiated.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"viewof map = {\n let container = html`

`;\n\n // Give the container dimensions.\n yield container;\n\n // Create the \\`map\\` object with the mapboxgl.Map constructor, referencing\n // the container div\n let map = new mapboxgl.Map({\n container,\n center: [4.352731704711914, 50.846272321172954],\n zoom: 4,\n style: \"mapbox://styles/mapbox/light-v9\"\n });\n\n map.on(\"mousemove\", e => {\n container.value = e.lngLat;\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":228,"value":"md`That map listens for \\`mousemove\\` events and emits new 'input' events on the map element. Then I use viewof to let us both see the map as an element, and for its value - centerpoint - to be the value of that element, which is displayed below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":8,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@0.49\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoidG1jdyIsImEiOiJja3FmbGJoNXMxNmx5Mm9uejIxcmpiNjh2In0.2F8HR-8J859J7frYE6DG9g\";\n const href = await require.resolve(\"mapbox-gl@0.49/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"md`## Administrative stuff\n\nThis is just a style I use for that pretty labeled checkbox.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"