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
- Starbursts
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.
Transitions
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.
Shield placement
Another feature that came in handy was Text translate on the Position tab. Changing the y position at a rate of 1.25 as well between zooms 10 and 14.
Explore now
Explore the final Mapbox whaam! map style and take a look at the source file.
View the map full screen
Learn more about how to style with Mapbox Studio:
أكثر...