Using CSS Filters for Custom Map Designs

Darren Wien's Mapbox Binoculars is a fun interactive map which gives you a view of planet Earth as it might appear standing on the Moon with a pair of binoculars. Using the map's binocular controls you can zoom in on any location and bring into and out of focus.

Sketchy Map is a new interactive map, from Steve Attewell, which (I think) uses a combination of Mapbox GL's custom styling and CSS filter effects to create an artistic hand-drawn 'sketch' effect. Using Sketchy Map you can zoom in on any location in the world (or use the search box) to view the location in this sketchy map style.

Sketchy Map includes a customizable heading overlay (in the screenshot above the heading reads '富士山' (Mount Fuji)). If you click on this heading in Sketchy Map you can edit the text to say anything you want.

You can view more CSS filter effects applied to an interactive map on Blurd. On this map CSS filter effects are applied to blur and unblur the map when you pan and zoom around the world. This is another experimental map from Darren Wiens. Both Blurd and Mapbox Binoculars use CSS filter effects to bring the map into and out of focus.

Steve Attewell has also used CSS filter effects in his Mapbox Camera Lens Effect map. This time CSS filters are used to create a tilt-shift effect and to apply a blur effect to the map. The map includes a button which allows you to turn the camera effect on & off.

I don't know for certain but I suspect that Mapbox Binoculars, Sketchy Map, Blurd and Mapbox Camera Lens Effect were all inspired by a recent Stamen blog post on applying CSS filter effects to interactive maps. In More Ways to Make Your Map Go Dark Mode Stamen explains how CSS filters can be applied to a map canvas to invert a map's colors.

You can view the outcome of Stamen's CSS filter experiments on their Invertorator interactive map. On this map CSS filters have been applied to the map canvas to invert every color on the map.