The Video Map Background

A few weeks ago Muxlabs released Map Effects 100, a collection of cool user interaction effects for Leaflet maps. They have now added another effect to the collection which creates a video background for a Leaflet map.

You can see Map on Video in action here. The video shows the view from a car driving down Las Vegas Boulevard. In the foreground an animated car marker shows the position of the car as it drives down the street, while, in the background, you can actually watch the video play.

The effect is achieved simply by placing the map element on top of the video element and reducing the opacity of the map element. This makes the map see-through, allowing you to see the video playing behind the map. The effect works quite well with the Stamen Toner map tiles used here, because the dominant white color of the map becomes completely opaque, just leaving the roads visible on top of the video.