How I design custom map styles with Mapbox
By: Joceline K
Tags: Built With Mapbox, Design Thinking, Design Process, Craft, Maps

This map served as my key inspiration for Batik. The way I see it, the map captures the essence of Batik: it’s ornate and intricate, but also balanced.

The design

Mapbox recommends starting with a taxonomy chart when creating a map style. Just like a component library, the taxonomy chart helps to keep most of my files organised in one space. It also acts as a guide to help me ensure all visual elements follow a hierarchy and rules that work cohesively in a larger geographical context. To be honest, although my final chart looks decent, my process is often a haphazard one, as I hop back and forth making changes in the taxonomy chart and the actual map in Mapbox Studio. In fact, I often make minor (and major) adjustments even after the map gets published. Although the chart is great as a planning tool, there’s really no pressure to make it perfect from the get-go.

Batik taxonomy chart. The differences in zoom levels are indicated, as references for conditional expressions.

The typeface

We used Artifex CF, a humanist serif with uneven strokes.

Because different typefaces have different personalities, I like to experiment to find one that best suits the map style. My only criteria is that it has to be highly legible and render correctly no matter the font size and weight.

For Batik, I briefly considered using a handwritten typeface such as this one. Although it added to the look that I was going for, I decided against it because it was too hard to read. In the end, I took cues from Batik Keris, a well-known Batik department chain store in Indonesia, and used a humanist serif typeface with a pen-like quality. Because humanist serifs are rooted in calligraphy, the typeface still fits my desired look for Batik.

The colour palette

A cohesive colour palette does not just make a visually arresting map but also helps influence how viewers perceive the map. For example, in an outdoor or terrain map, colours and shades often give visual cues that help viewers quickly understand the physicality of a terrain.

The colour palette is inspired by Batik images that I pinned on Pinterest.

On Batik, colours are mainly used to enhance the material’s aesthetic. Most Batik have a brown tone from a colourant called Soga, used in one of the dyeing processes. This dye comes from the bark of the soga tree and ranges from light yellow to dark brown in colour. Likewise, I tried to capture this quintessentially Batik look by using a brown-and-yellow-toned colour palette.

The pattern

I rarely use ornate patterns on a map—they can be distracting and interfere with legibility and readability. However, for this map, I knew that I wanted to include at least one Batik pattern from the very beginning.

At first, I thought that it would be cool to stitch together different Batik patterns from different regions. However, our story focused on Batik patterns from just five particular locations in Central and East Java, which are marked with location markers. To make the markers stand out, I chose not to use any patterns on land. Instead, I used the Batik pattern on water, inverting the inspiration map.