A Video Masking Effect

The Wall Street Journal has published an article investigating the protests which have taken place across America since the senseless killing of George Floyd.

The article, Maps: How Protests Evolved in the Wake of George Floyd’s Killing, is illustrated with a cool animated video map of the United States. Every state on this WSJ map is an animated video clip from a Black Lives Matter protest. The effect is very impressive. You need to subscribe to read the article accompanying the map but the map graphic itself can be seen without subscribing. I'm not subscribed to the WSJ so I haven't read the article, but I think the map on its own is worth a visit.

I'm fairly sure I've seen a map before which uses videos shaped as geographical areas. I just can't remember where and when. Both Mapbox and Leaflet have video overlay functions: Mapbox Video on a map and L.VideoOverlay class which allow you to add videos on top of a map. However I'm not sure how you could turn your videos into geographical shapes. It might be possible by using polygon masking (in Mapbox by using the Mapbox mask feature, in Leaflet maps using the leaflet.maskcanvas plug-in and with the Google Maps API using Vasile Cotovanu's polygon masking wizard Geomask).