Pencil is one of the 12 example styles included with Mapbox Studio, providing a hand-drawn pencil-on-paper look for a map of the whole world. The style is made up largely of image patterns, so most of the design work started on paper and was touched up in image editing software before finaly being arranged with CartoCSS.
My first step was to draw a bunch of lines with different pencils in order to get a variety of line widths and textures. As you can see I experimented with a few complex line styles that didn’t make it into the final design. I found that keeping line styles simple and focusing on only a few main feature types provided the best results in the end.
I scanned the lines and brought them into Gimp for editing. For most lines the main clean-up that I needed to do was resizing and straightening the lines to ensure they could be used seamlessly as patterns in Mapbox Studio. I also adjusted the contrast and used the handy Color to Alpha feature to remove the paper background and export images of just the pencil texture with proper transparency.
A different pattern image is needed for each of the different line widths that are used for different road types and zoom levels. In CartoCSS, rather than adjusting a width parameter as you would with normal lines, the entire image path is swapped out:
...
[class='motorway'] {
[zoom=13] { line-pattern-file:url(img/line_double_14.png); }
[zoom=14] { line-pattern-file:url(img/line_double_16.png); }
[zoom=15] { line-pattern-file:url(img/line_double_18.png); }
[zoom>15] { line-pattern-file:url(img/line_double_20.png); }
}
...For double-lined roads, two patterns are needed to get the lines to join up correctly: one for the outlines and one for the inner line of the road, just as with road casing using normal lines in CartoCSS. The inner line, drawn on top of the outline, masks areas at intersections where multiple outlines would overlap and makes everything look nicely connected.
More complex polygon textures were arranged from multiple source images. This way I didn’t have to worry too much about how seamless textures would be while drawing them on paper. For example, here’s how 8 separate wavy lines were aligned and merged over a background texture to create the repeating water pattern:
The original hand-drawn lines were all slightly crooked, but here they have been individually rotated and aligned to a grid.
At lower zoom levels, line patterns do not work as well for all layers due to the many short line segments that roads and boundaries are split up into. At these scales the style uses multiple semitransparent line style instances with dasharrays in order to mimic a the slightly rough look of thin pencil lines.
...
a/line-width:0.6;
a/line-opacity:0.2;
a/line-dasharray:2,1;
b/line-width:0.8;
b/line-opacity:0.2;
b/line-dasharray:12,1;
...
For the final map, all the pencil textures are brought together over a paper-textured background image. You can explore any part of the world using this style, and since it’s included with Mapbox Studio you can also customize the design with your own textures and colors.