Inspired by a Roy Lichtenstein original at the Walker Art Center, I decided to design the whaam! map. In his early career, Lichtenstein worked as a comic book artist which inspired his later work. I kept my whaam! style limited to four stylistic mainstays:
Limited, primary color palette
Thick black outlines
“Ben Day” dot texture
Artist’s Studio No. 1 (Look Mickey), 1973
Custom highway shields
To give the style a more comic book look, I replaced traditional highway shields with vector starbursts drawn in Illustrator. To do so, I selected the symbol layer for highway labels from the Mapbox Streets data source. On the Icon tab for this layer, I replaced the Image with the starburst icon.
Controlling transitions and placement
When styling the highway labels, I focused on creating smooth transitions between zoom levels, while keeping the starbursts both visible but not too overwhelming. I also focused on getting the placement of the icon in relation to the highway value aligned perfectly.
Slightly tweaking the exponential base of the interpolation curve from the default 1 to 1.1, provided a more dramatic variation in mid-zoom. This faster rate of increase between zooms gives the map a more playful feel. Play around with zooming in and out of your map styles with varying rates to get a feel for what to expect.
Another feature that came in handy was Text translate on the Position tab. This allowed me to change the y position at a rate of 1.25 and between zooms 10 and 14.
Explore the final Mapbox whaam! map style and take a look at the source file.
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