tl:dr

Check out U.S.Avengers.

I heard about the forthcoming U.S.Avengers #1 comic over at io9 recently. While I’m not much of a comic reader, anytime I hear about geographic areas getting assigned their own avengers I’m genuinely interested.

I figured mapping this out would be a good learning experience with the mapbox dataset editor, as well as some click/hover events on the map. The cartography is pretty simple, only using a few layers - including some natural earth bathymetry I still had loaded from the back to school map. The standout feature here is an honest-but-not-great effort at a comic/printed/half-tone type effect. This involved about 4 svgs of varying dot size and color, then layering them as transparent background fills. While they didn’t tile quite seamlessly, I liked the effect enough to stick with it.

I used image links from their source stored as an attribute in the dataset to show when hovered over the point, along with the name, and location (mostly state capitals). Also figured out some css ::before & ::after to give the appearance of comic/thought bubble.

For more on the concept of the covers, and avengers in each state, check out this write up over at marvel’s site.

Special thanks to Sarah & Justin who’s previous work & code helped me get through some bumps in the road.