The Amazing Spider-Map

Madison Draper
No items found.

Sep 9, 2019

The Amazing Spider-Map

Madison Draper
No items found.

Sep 9, 2019

Throughout the early 2000’s, my dad and I watched the Spider-Man trilogy in theaters while shoveling popcorn into our mouths. I’m the type of person to get invested in a cast, so I never saw any of the remakes. But my roommates’ obsession finally got to me, and I entered the Spider-verse films last weekend.

I appreciated the different art styles and outfits each Spider-hero wore. As Edna Mode taught us, “No capes” and “Red makes a statement.” With those thoughts in mind, I decided to make a map inspired by the Spider-Heros’ outfits and comic-book aesthetic.

No items found.

I started by taking several design elements from Whaam!, Amy Lee Walton’s designer style from 2017, built on Mapbox Streets v7. To build this style on our most recent map data tileset (Mapbox Streets v8), I reviewed each individual layer of Whaam! to recreate this style’s foundational pop-art aesthetic that captures the feel of the early 60’s comic book.

Iconography

This is a small but mighty icon set. The repeating patterns resemble old printing techniques. The highway shield icon looks exactly how an onomatopoeia sounds — you’ll never miss an exit again using this map.

Spider-Man’s costume has a light dotted texture, like for breakability. To replicate this, the map has a soft dotted texture throughout land and water.

Road Network

The road network’s thick white lines capture Spidey’s powerful webs, shooting in every direction. Inspired by eyes on Spider-Man’s costume, the roads have thick black casings to accent the varying widths of white roads to display road hierarchy.

San Diego, California
Web of streets in Mexico City

Amazing

Since the comic’s actual name is “The Amazing Spider-Man,” I tried putting “The Amazing” in front of every country name using Expressions. I added the expression below to country-label layer.


[
  "to-string",
  [
    "concat",
    "the amazing",
    "\n",
    ["get", "name_en"]
  ]
]

Related articles