Video in Mapbox GL

Embedded videos in maps let you explore content in new and exciting ways. This video was shot from space in January over Maryland. As you zoom, rotate and pan, you can clearly see two power generation stations: Brandon Shores Generating Station to the west and the Herbert A. Wagner Generating Station to the east. Smoke billows from a smokestack at the coal-fired Brandon Shores station, indicating operational status at the plant and a moderate wind from the west.

The Mapbox GL framework allows for new types of map visualizations such as the video embedded into the map above. The video is loaded in a hidden HTML5 video element with multiple source formats. From there the video is handled the same way any video element would be, with full control over pausing, looping and scrubbing.

varurls=["/videos/baltimore-smoke.mp4","/videos/baltimore-smoke.webm"];varvideo=document.createElement('video');video.crossOrigin='Anonymous';for(vari=0;i<urls.length;i++){varsource=document.createElement('source');source.src=urls[i];video.appendChild(source);}

An RGBA texture is created to store the current frame.

vartexture=gl.createTexture();gl.bindTexture(gl.TEXTURE_2D,texture);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR);gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,video);

On each frame, the texture is updated to hold the video's current frame.

gl.bindTexture(gl.TEXTURE_2D,texture);gl.texSubImage2D(gl.TEXTURE_2D,0,0,0,gl.RGBA,gl.UNSIGNED_BYTE,video);

The texture is then drawn to the screen with two triangles (a quad) formed by projecting the bounding box coordinates.

We've been hard at work on expanding Mapbox GL across platforms to allow for these and other exciting new mapping opportunities. We're continuing to push out and refine tools that facilitate total control and flexibility when it comes to building and sharing maps. Stay tuned for updates to the open source Mapbox GL framework including video support.