All Posts

Watercolor Process

This post was originally published on by Zach Watson.

Yesterday, we announced a trio of new maps on — we’ve had a lot of interest in how the watercolor map gets generated, so here’s the play-by-play. We’ll be using a section of London as an example:

To begin with, we wanted to capture some of the irregularities of a truly handmade object. Although we’re working with OpenStreetMap vector data, we decided to do all of our styling in raster space — the main reason was to have access to the overlaps of objects, but there are a couple of really great side benefits: the process doesn’t increase in time for denser areas (i.e. cities, which is mostly what people look at), and it’s entirely deterministic (important when you’re stitching together tiles). We also wanted to be able to treat ground, water, green space, and so on differently, so we’re actually running this process multiple times for each tile.

First, we render out some extraordinarily vibrant Mapnik images:

These can then be split up by grabbing all the yellow (for instance) and using that as a mask:

Because of how OSM treats water, we’re actually subtracting the blue area from the mask as well:

Next, we do a gaussian blur:

And add a Perlin noise image. This is just a 1024×1024 image that we tile:

Now we do a threshold to get a new, fuzzier, wobblier outline:

And do some antialiasing to get our final mask:

Which gets applied to a tileable watercolor image:

The other fancy bit of code adds a slight dark outline to the painted areas, to mimic the watercolor drying at different rates, and depositing more pigment at the edges. To get this sort of edge darkening, we do a gaussian blur of the mask:

And only then use the original mask to get just the interesting bits:

But that ends up giving undue weight to small or narrow areas. So we invert that and use it as an alpha channel on the gaussian blur, which evens things out:

This is then added as an overlay onto the masked image from before:

And we have one layer! This process is repeated for the other layers (in this case, water, green spaces, civic spaces, and highways) and composited into the final image:

Tomorrow, Geraldine’ll be posting about the textures that went into the map.


As you can imagine, there are a lot of variables that go into this algorithm — so, to help ourselves visualize what tweaking each of those did, we created any number of samples. As a peek behind the curtain, here are a couple of examples:

Published: 03.26.12
Updated: 09.20.22

About Stamen

Stamen is a globally recognized strategic design partner and one of the most established cartography and data visualization studios in the industry. For over two decades, Stamen has been helping industry giants, universities, and civic-minded organizations alike bring their ideas to life through designing and storytelling with data. We specialize in translating raw data into interactive visuals that inform, inspire and incite action. At the heart of this is our commitment to research and ensuring we understand the challenges we face. We embrace ambiguity, we thrive in data, and we exist to build tools that educate and inspire our audiences to act.