2f:null 30:["$","title",null,{"children":"Debugging Mapbox GL JS in Observable for students | Ingrid Burrington | Observable"}] 35:T4d0,md`# Debugging Mapbox GL JS in Observable for students ![](https://api.mapbox.com/styles/v1/mapbox/dark-v9/static/-122.4241,37.78,14.25,0,60/${width}x640?access_token=pk.eyJ1IjoibGlmZXdpbm5pbmciLCJhIjoiYWZyWnFjMCJ9.ksAPTz72HyEjF2AOMbRNvg) Mapbox GL JS is a modern library for web maps, developed by [Mapbox](http://mapbox.com/). Using it is similar to [Leaflet](http://leafletjs.com/), with a few notable differences: - Mapbox GL JS is a vector-based library. Instead of displaying image tiles rendered by a server, it renders vector tiles in the browser. This means that it does not rely on discrete zoom levels, and all aspects of the map style are changeable within the library. - Vector tiles are quite a bit different than image tiles, and different organizations and companies supply them. This example uses vector tiles from Mapbox themselves, but there are other sources. If you'd like to use Mapbox's tile service, you'll need to register for an access token on their site: the token that powers this demo is routinely cycled. Similar to Leaflet: - I'm using [invalidation](https://github.com/observablehq/notebook-stdlib/blob/master/README.md#invalidation) to properly clean up after any resources the map allocates.`36:[] 33:{"id":"a7e08dd088933e3d","slug":"debugging-mapbox-gl-js-in-observable-for-students","title":"Debugging Mapbox GL JS in Observable for students","thumbnail":"bbcd37177c63725baba627b96b0af141bf82d6319b3c405fb6b0010ba875730f","access_level":"public","create_time":"$D2021-01-06T17:05:20.641Z","update_time":"$D2021-01-09T19:09:49.574Z","view_time":null,"first_public_time":"$D2021-01-06T17:07:53.316Z","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":1,"starred":false,"owner":{"type":"team","id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":"starter_2024"},"version":305,"publish_version":305,"role":null,"authored":false,"authors":[{"type":"individual","id":"87193242b5b8718c","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":null}],"members":[{"type":"individual","id":"87193242b5b8718c","login":"lifewinning","name":"Ingrid Burrington","avatar_url":"https://avatars-next.observableusercontent.com/361e8fec3b6688927a430032a2ebcc4a35bfb53a951f775e8a60fdac19e4f742","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"4c8cef666fd0c601","slug":"internet-geographies-class-references","title":"Internet Geographies Class-References","owner":{"id":"6ae7f99f369fe7ae","login":"lifewinning","name":"Ingrid Burrington"}},"type":"notebook","body":{"title":"Debugging Mapbox GL JS in Observable for students","cells":[{"id":0,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":75,"value":"viewof showNavigationControl = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$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","output":"$undefined","database":"$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","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":296,"value":"loadStyleSheet = () =>\n html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@1.5.0');\n mapboxgl.accessToken =\n 'pk.eyJ1IjoibGlmZXdpbm5pbmciLCJhIjoiYWZyWnFjMCJ9.ksAPTz72HyEjF2AOMbRNvg';\n return mapboxgl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":84,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 34:"$33:body"