Quantcast
Channel: maps for developers - Medium
Viewing all articles
Browse latest Browse all 2230

Designing the whaam! style in Mapbox Studio

$
0
0

Mapbox Map of -122.308394,37.751744

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

walker art center lichtensteinArtist’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.

custom highway shields

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.

whaam-transition

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.

symbol position style by zoom

Explore now

Explore the final Mapbox whaam! map style and take a look at the source file.

Learn more about how to style with Mapbox Studio:


Viewing all articles
Browse latest Browse all 2230

Trending Articles