Although I’m not a big college basketball fan, I decided to participate in Mapbox’s Map Madness competition. It’s been a while since I’ve played with their technology, and I figured this competition was a good excuse to revisit their platform.
The first challenge was to create a custom map using their Cartogram tool incorporating your favorite team’s colors and to share it on Twitter along with #mapmadness18 and @mapbox. Cartogram is a tool that automatically generates a color palette for any photo you upload. It then applies that color palette to their basemap.
I’m a University of Arizona alumni, so that seemed like the most appropriate choice. Plus, they’ve won a game or two before, right? Without looking at any of their logo copyrights, I snagged a screenshot of it, clipped it, and upload a png of it into Cartogram.
Leaving the default “colorful” option, the result wasn’t bad. For anyone who isn’t a diehard, the University of Arizona’s colors are red (approx. # ab0520) and navy (approx. #0c234b). In addition to those colors, Cartogram generated a few others. Generally speaking, the style turned out like the image below.
Cartographically, at a zoom level of 11, it had the following specs (more or less):
- Background: #ab0520 (red)
- Roads: #0c234b (dark blue)
- Water was #c7cad5 (light blue)
- Parks: #999eaf with a 0.75 opacity (which made for an interesting red/pink color)
- Labels: #fbfbfb (white) with a red halo, variations of Arial font
After its generation, I started exploring the map. I wanted to get a sense of how the map looked at different zoom levels. Overall, I really liked it. However, there was something about the red background and font halos (thanks, Gretchen) that didn’t sit quite right for me.
So I decided to tweak the style in Mapbox’s Style Editor. After taking a brief tour (thanks Mapbox!), I got to work. There are over a hundred different layers in Mapbox’s basemap – but they’ve built in some pretty sweet shortcuts to help shorten the process like filtering (by name, layer type, vector) and the ability to select all. The image below demonstrates how I was able to filter down to the symbol layers and easily remove the labels for all the layers at once.
Whenever I wasn’t sure which layer I needed to adapt, I could click on the map. A popup would display the name of the layers that intersected my click. This allowed me to filter the layer list with the layer’s name.
After a very soothing, almost meditative process, I ended up with my own basemap that turned out something like this:
Cartographically, it had the following specs at a zoom level of 11:
- Roads: # 70778f (light blue)
- Background: #0d254e with a 0.9 opacity (medium blue)
- Water: #0d254e with a 0.93 opacity (dark blue)
- Parks: # #ad0524 with a 0.7 opacity (red)
- Labels: #fbfbfb (white), no halos, variations of Arial font
Because Mapbox makes their styles so easy to incorporate into your workflows, I was able to quickly create a Carto map to share with you. You can explore it as a slippy map below, if you prefer. How did I do? Did I miss any layers?