The Mapbox GL framework now fully supports video integration directly into maps. Here you can see the recent HD video from space that Skybox's Skysat-1 captured as it passed over Baltimore 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. The video shows plums from a smokestack at the coal-fired Brandon Shores station clearly indicate the operational status at the plant and moderate wind from the west, letting you see how the pollution disperses.

Live map after the jump.

Video in Mapbox GL

The Mapbox GL framework now fully supports video integration directly into maps. Here you can see the recent HD video from space that Skybox's Skysat-1 captured as it passed over Baltimore 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. The video shows plums from a smokestack at the coal-fired Brandon Shores station clearly indicate the operational status at the plant and moderate wind from the west, letting you see how the pollution disperses.

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.

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

An RGBA texture is created to store the current frame.

var texture = 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.