30:[] 2e:{"title":"Mapbox GL JS","cells":[{"id":0,"value":"md`# Mapbox GL JS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"container = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"{\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: [\n -122.4194, 37.7749\n ],\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 try {\n yield map;\n yield invalidation;\n } finally {\n map.remove();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof showNavigationControl = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`## Responding to reactive variables`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"container2 = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"map = {\n let map = this;\n \n if (!map) {\n // Create the \\`map\\` object with the mapboxgl.Map constructor, referencing\n // the container div\n map = new mapboxgl.Map({\n container: container2,\n center: [\n 4.352731704711914,\n 50.846272321172954\n ],\n zoom: 4,\n style: 'mapbox://styles/mapbox/light-v9'\n });\n }\n \n // Wait until the map loads, then yield the container again.\n yield new Promise(resolve => {\n if (map.loaded()) resolve(map);\n else map.on('load', () => resolve(map));\n });\n \n map.setLayoutProperty('country-label-lg', 'text-field', ['get', 'name_' + language]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"viewof language = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"md`### Displaying lat/long on mouseover`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"container3 = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"centerpoint = {\n // Create the \\`map\\` object with the mapboxgl.Map constructor, referencing\n // the container div\n let map = new mapboxgl.Map({\n container: container3,\n center: [\n 4.352731704711914,\n 50.846272321172954\n ],\n zoom: 4,\n style: 'mapbox://styles/mapbox/light-v9'\n });\n \n return Generators.observe(change => {\n map.on('mousemove', e => {\n change(e.lngLat);\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"md`## Including the library\n\nMapbox GL JS can also be loaded from Mapbox's CDN or loaded from unpkg. Like Leaflet, it needs both JavaScript and CSS to function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"mapboxgl = {\n let mapboxgl = await require('mapbox-gl@0.43.0');\n mapboxgl.accessToken = 'pk.eyJ1IjoiaGVwcGxlcmoiLCJhIjoiMjNqTEVBNCJ9.pGqKqkUDlcFmKMPeoARwkg';\n return mapboxgl;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`## Styling\n\nJust some style elements.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}