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()); }32:[] 2f:{"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"},{"id":589,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"md`Add custom data layers`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":55,"value":"mapLayers = map2.getStyle().layers","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":627,"value":"mapboxglAccessToken = \"pk.eyJ1IjoicGxhbmVtYWQiLCJhIjoiY2s4bnI0bWN0MTE1MzNlcXN0a2M4aTJzYiJ9.N9PCXHPAeJb4N6lBd2_a0Q\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"import { mapboxgl } with {\n mapboxglAccessToken as accessToken\n} from \"@planemad/mapbox-gl-cartography\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":614,"value":"md`Option Mapbox GL JS helper function`","pinned":false,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}