Last summer, inspired by some blueprint schematics of the U.S.S. Enterprise NCC-1701-D I got for my birthday, I designed The Blueprint map. Eager to test the latest version of Mapbox Studio, I decided to redesign the style taking full advantage of Mapbox GL rendering awesomeness.
The Blueprint style
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:
Color management
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.
Group select
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.
Layer duplication
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.
Label hierarchy
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 control
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.
Explore now
Explore the final Mapbox GL Blueprint map! Learn more about styling with Mapbox Studio.
Want to try Mapbox Studio?Sign up for the beta access.