Aerial Video Mapping

Leaflet version 1.1.0 has been released. The latest version of Leaflet's mapping library includes a new L.VideoOverlay class which allows you to add videos as an overlay to your maps.

To see what you can do with L.VideoOverlay you can view the Leaflet documentation demo map. To get started adding videos to your Leaflet maps then you should have a look at the L.VideoOverlay Tutorial.

Adding a video to a Leaflet map is now very simple. You just need your video and the geographical bounds of your video. If you know the geographical bounds of the video then it is a simple job to just add the video (as you world add an image overlay) in the correct position on the map.

Unfortunately L.VideoOverlay will only work if north is at the top in your video coverage. If your video doesn't have a 'north-up orientation' things get a lot more complicated. A number of plug-ins have been written which allow you to rotate images added using L.ImageOverlay. You could have a look at these image overlay plug-ins to get some ideas about how to rotate a video overlay in Leaflet.

Alternatively you could try MapboxGL to add a video to a map. As you can see in this Add a Video demo map you can rotate a video overlay in MapboxGL to ensure that north is always at the top.

If you want some inspiration for what you can achieve by adding a video overlay on a map then have a look at the amazing Interactive Map of A Year In The Life Of Earth's CO2. This wraps an HTML5 version of NASA's narrated video of a year's Carbon Monoxide and Carbon Dioxide concentrations around an interactive globe.

You could create something similar to the above map with Leaflet if you created your own narrated video. The new L.VideoOverlay class allows you to add video playback controls to your map. By adding video controls you can allow your users to pause, rewind and forward through a narrated video.

If you want to start playing with L.VideoOverlay you can download some aerial video footage from NASA's GOES Project.