40:null 41:["$","title",null,{"children":"Using Mapbox GL JS | John Krcmarik | Observable"}] 47:T4c0,md`# Using Mapbox GL JS ![](https://api.mapbox.com/styles/v1/mapbox/dark-v9/static/-122.4241,37.78,14.25,0,60/${width}x640?access_token=pk.eyJ1IjoidG1jdyIsImEiOiJjamJ6eXpkd2EwMndoMzRtb3B6NjkyZG85In0.8kzWTUAe9DL5YzckMAEYfA) 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.`48:[] 45:{"id":"6bf88a1885ba2a2c","slug":null,"title":"Using Mapbox GL JS","thumbnail":"dcca9d17f2620d13f3e8b47a955eaf68244c7792f34757869d39753103ed9229","access_level":"public","create_time":"$D2023-09-04T00:08:49.743Z","update_time":"$D2023-09-04T00:09:09.331Z","view_time":null,"first_public_time":"$D2023-09-04T00:08:49.743Z","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":"1c36256814dcefe9","login":"johnjkrcmarik","name":"John Krcmarik","avatar_url":"https://avatars-next.observableusercontent.com/e74ef9b7229ea43da7d66f292e42f55098d05cf870d9b80dba09ba57f7f4b669","tier":"starter_2024","bio":"","following":false},"version":290,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d57c51f04202028f","login":"johnjkrcmarik","name":"John Krcmarik","avatar_url":"https://avatars-next.observableusercontent.com/e74ef9b7229ea43da7d66f292e42f55098d05cf870d9b80dba09ba57f7f4b669","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"d57c51f04202028f","login":"johnjkrcmarik","name":"John Krcmarik","avatar_url":"https://avatars-next.observableusercontent.com/e74ef9b7229ea43da7d66f292e42f55098d05cf870d9b80dba09ba57f7f4b669","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Using Mapbox GL JS","cells":[{"id":0,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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: [-83.312570, 42.529760],\n zoom: 15,\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"viewof showNavigationControl = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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.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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 46:"$45:body"