To capture my love for 8-bit art, I designed a Super Mario themed map!
Due to the amount of features and level of abstraction, I knew that creating this map would be a great test of my proficiency with Mapbox Studio, as well as Studio's own limits. By diving into the deep end, I learned some useful strategies.
Exploring custom data sources
The first hurdle to overcome was learning how to simplify the landforms. After unsuccessful experiments with the polygon-smooth property, I went to Natural Earth, a superb collection of public domain map datasets, and downloaded some simplified land and water files. I then had to learn how to get these ZIP files into Studio.
Add a new layer (the .shp within the expanded Natural Earth .zip) and update the metadata.
After saving your awesome new source file, you'll upload it to Mapbox.com so you can easily use it. After uploading, you can add it to a style by clicking Change Source (in the Layers panel), adding the unique ID to the comma delimited source list, and clicking Apply!
Using shields for greater control
Once I'd styled the landforms, the next problem I faced was how to programmatically add all of the pixelated features to the map in a sane manner. After initially toying with markers and custom fonts, I discovered shields. With rules like shield-margin, shield-min-distance, and shield-min-padding, getting the elements to work together wasn't too difficult.
Customizing layer order
In this project I used eight discrete sources, which ended up visually interfering with one another. To fix this, I had to dive into the project.yml to create a custom layer order.
The layer order of a remote vector tile source can be altered. Manually edit the project.yml file of a style project and add a layers key with a YAML array of layers in the format {id}.{class}. The same layer can be listed multiple times provided a different class is included with each instance:
source: "mapbox:///duncangraham.f38239b3,duncangraham.54c72d71,duncangraham.9cb2f4cc,duncangraham.83c4f511,duncangraham.d1be701a,mapbox.mapbox-streets-v5,mapbox.mapbox-terrain-v1,duncangraham.b12adadc"
layers:
- ne_110m_ocean
- ne_110m_land
- ne_10m_geography_regions_polys
- ne_110m_lakes
- road
- mpoi
- place_label
- hillshade
- landcover
- marine_label
- country_label
Mapbox uses a painter's algorithm so the layers are applied from top to bottom, with the ne_110m_ocean at the bottom and the country_label layer on top.
This amount of control from start to finish is what allowed me to add so many different elements and features while maintaining a clean, intelligible result. To interact with the final result more, check out the slippy map. You can also peruse the code on Github.