29:null 2a:["$","title",null,{"children":"Wikimedia on Mapbox GL | Arun Ganesh | Observable"}] 2f:T493,viewof map2 = { const container = html`

`; // Describe the map view const leftPane = html`

Video in the map

Embeds a webm video hosted in Wikimedia commons using the add a video example.

`; container.appendChild(leftPane); // const mapContainer = html`

`; container.appendChild(mapContainer); yield mapContainer; yield container; // Inititalize the GL map let map = addMap({ container: mapContainer, minZoom: 14, zoom: 17, center: [-122.514426, 37.562984] }); // Wait until the map loads. map.on("load", () => { // Build your map here // addLayers(map, customLayers); // Assign map object to the cell container.value = map; container.dispatchEvent(new CustomEvent("input")); }); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }30:[] 2d:{"id":"f7208bd040a7fd1d","slug":"wikimedia-on-mapbox-gl","title":"Wikimedia on Mapbox GL","thumbnail":"2f432441b13ccbad122469bc5bd07449a254657d11c6d84fe3fec27bd9984ca2","access_level":"public","create_time":"$D2020-06-27T18:38:30.289Z","update_time":"$D2020-06-28T03:45:35.540Z","view_time":null,"first_public_time":"$D2020-06-27T18:57:21.324Z","has_unpublished_edits":null,"fork":{"id":"0ad68b27253ba8c2","slug":"blank-map","title":"Blank Mapbox Map","owner":{"id":"671a8260d4766fe7","login":"planemad","name":"Arun Ganesh"}},"stars":1,"starred":false,"owner":{"type":"team","id":"671a8260d4766fe7","login":"planemad","name":"Arun Ganesh","avatar_url":"https://avatars-next.observableusercontent.com/8f5b4ec4e36ff3b446e9db417965875173e730d4a9ab4379f107cf4a08540e24","tier":"starter_2024"},"version":691,"publish_version":691,"role":null,"authored":false,"authors":[{"type":"individual","id":"5f5aed400b57e422","login":"planemad","name":"Arun Ganesh","avatar_url":"https://avatars-next.observableusercontent.com/8f5b4ec4e36ff3b446e9db417965875173e730d4a9ab4379f107cf4a08540e24","tier":null}],"members":[{"type":"individual","id":"5f5aed400b57e422","login":"planemad","name":"Arun Ganesh","avatar_url":"https://avatars-next.observableusercontent.com/8f5b4ec4e36ff3b446e9db417965875173e730d4a9ab4379f107cf4a08540e24","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Wikimedia on Mapbox GL","cells":[{"id":0,"value":"md`# Wikimedia on Mapbox GL\n\nEmbed media from Wikimedia commons on a Mapbox GL map.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"md`Add custom data layers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"customLayers = ({\n sources: {\n video: {\n type: 'video',\n urls: [\n 'https://upload.wikimedia.org/wikipedia/commons/6/60/Wikipedia_logo_puzzle_globe_spins_horizontally_and_vertically%2C_revealing_the_contents_of_all_of_its_puzzle_pieces_%284K_resolution%29_%28VP9%29.webm'\n ],\n coordinates: [\n [-122.51596391201019, 37.56238816766053],\n [-122.51467645168304, 37.56410183312965],\n [-122.51309394836426, 37.563391708549425],\n [-122.51423120498657, 37.56161849366671]\n ]\n }\n },\n layers: [\n {\n id: 'video',\n type: 'raster',\n source: 'video'\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"md`## Customize the map\n\nThe GL map is composed of various layers, each having a data source, data filters and styling defined to give the final output. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"mapLayers = map2.getStyle().layers","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"md`## Setup\n\nReplace the \"mapboxgl.accessToken\" with one from your [Mapbox account](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/). Its recommended to create a new token with a URL scope to observable account \"https://USERNAME.static.observableusercontent.com\" to prevent misuse.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"mapboxglAccessToken = \"pk.eyJ1IjoicGxhbmVtYWQiLCJhIjoiY2s4bnI0bWN0MTE1MzNlcXN0a2M4aTJzYiJ9.N9PCXHPAeJb4N6lBd2_a0Q\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"import { mapboxgl } with {\n mapboxglAccessToken as accessToken\n} from \"@planemad/mapbox-gl-cartography\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"md`Option Mapbox GL JS helper function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"import {\n addMap,\n addLayers,\n duplicateLayer,\n inspectLayer,\n addMapPopups\n} from \"@planemad/mapbox-gl-cartography\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"