Tutorial on Exporting Mapbox-GL to video


Mapbox-GL is used to generate the videos and to show interesting map interaction and animation. This article explains the procedure of exporting Mapbox-GL to video. With Mapbox-GL it is possible to create slicker videos with special support for video export. You can make an export video call with numerous animation instruction. GL-JS is responsible for rendering every frame of the animation. You can use FFmpeg command for converting frames into video format. Here we can create 60fps and 100% smooth videos at any map complexity.


The Mapbox GL JS supports video as a seamless, geographically-positioned layer in any map. By using the HTML5 Video specification for video support, we can show MP4, WebM, and any other format supported by browsers & operating systems. Mapbox GL stylesheets made up of sources which define the data points, layers and types. Endpoints, layer, and points determine how data is going to display on the screen. Video layers start with the video source.

Example of map with video source Hurricane Patricia:

{ type: 'video', // this could also include fallback // versions of the video as WebM or other // formats urls: ['optimized.mp4'], // video is positioned by specifying // its four corners coordinates: [ [ -180, 70 ], [ 180, 70 ], [ 180, -70 ], [ -180, -70 ] ] }

Video positioning is very much flexible you can specify any corners, height, longitude, latitude points and Mapbox GL JS is used to warp the video into place. This is the example of raster layer which is used to display the video.

{ type: 'raster', id: 'storm-layer', source: 'storm-source', paint: { 'raster-opacity': 0.4 } }

You need to add your video source and new layers for style with the JavaScript API. add layers allows you to add more layers. By combining the power of HTML5 Video API and the Mapbox you can play and pause the video, contrast, saturation etc.

Solution Worked 0 UpvotesUpvote


Solution Didn't Worked 0 DownvotesDownvote