I worked with a limited color palette of three blues and a single typeface, FF Kievit, in order to capture the bold yet sophisticated graphic quality of architectural blueprints. A few key features in Mapbox Studio helped me design this map:
In Studio, when you begin to type a hex code in any color field, a dropdown appears with your most used colors. This helps make new layers match existing layers. Another feature that helps manage colors palettes is the Colors tab in the Properties panel. The panel shows a list of each layer and the color values applied to the layer. My style had 74 layers with line color, 22 layers with text color, 22 layers with text halo color, and 1 layer with background color, and I was able to manage those choices all in one panel.
Ramps for zooms
GL’s smooth transitions and seamless zoom means styling choices need to be smooth as well. Hierarchy can’t change drastically from one zoom level to the next. To implement strong visual hierarchy that transitions across zoom levels seamlessly, I applied ramps to certain properties. To achieve the blueprint aesthetic, I kept the line widths relatively thin - never exceeding a line width of 2px. Working with 57 layers ranging from motorway to path types, my approach was to keep the growth consistent and mimic scales between road, tunnel, and bridges.
I used multi-selection to select multiple layers and copy certain styles. This resulted in smooth zoom transitions while maintaining hierarchy and visually thin lines.
After I achieved the style that I wanted for all my roads, I wanted to style tunnels and bridges in a similar way. Fortunately, it’s possible to duplicate layers in Studio. I duplicated the road layer styles and then switched the dataset property of the layers from road to tunnel and bridge. The level of design control that Mapbox Studio provides with re-ordering layers, layer grouping, and visibility made this pretty painless.
Although I limited my typeface to FF Kievit, I used seven different weight and style pairings in my style. This meant lots of different symbol layers: 22 to be exact. Luckily, the Properties panel in Studio made it easy to manage all my symbol layers at once.
Font stacks within Properties helped me keep my labels in check. I narrowed down the number of font stacks I was using by clicking the Symbols tab then sorting By value. If any layer had a font other than FF Kievit, I could select that layer, turn on the Select data tab, move around the map to find the location that data was represented, and style accordingly. Several times I moved back and forth between the Style and Select data tabs to see the results of my changes.
Amy Lee Walton
is a designer at Mapbox. She brings an experimental art+maker background alongside seasoned web chops ranging from designing interactive experiences, to metrics-based advertising campaigns, to UX-focused landing pages and microsites.
Follow @amyleew on Twitter