Satellite Masking

In responding to yesterday's tragic bomb attacks in Brussels the New York Times and the Washington Post have both posted satellite maps of some of the locations which were most affected by the terrorist attacks.

Both newspapers have opted to create static maps from satellite images of the city. They have also both used masking effects to highlight locations on the map. On the satellite images all areas, apart from the selected buildings, are masked - so that the featured buildings clearly stand out on the maps.


It is possible to create the same masking effect with interactive maps. For example you could use Vasile Cotovanu's polygon masking wizard Geomask to create a similar map with the Google Maps API. Using Geomask it took me about five minutes to create an example map highlighting the European Commission Headquarters in Brussels.

This polygon masking effect works particularly well in Brussels because the city has Google's 'birds eye' view aerial imagery, which provides an oblique view of buildings that you can then highlight on a map.

You can create a similar effect with Mapbox by inverting a polygon shape. If you prefer Leaflet maps you can use the leaflet.maskcanvas plug-in.