The new high resolution administrative country boundaries tileset is now available to all designers and developers using the new version of Studio, for free. This is the perfect tileset to use when highlighting individual countries through a masking technique. Masking is a cartographic term that describes hiding features on a map so that the geographic area of interest is the main visual area illustrated, limiting unnecessary visual clutter.
5 simple steps for masking countries in Studio
Step 1
In Studio, begin by creating a new blank style. Select the layers tab, and add the “Mapbox Satellite” layer.
Step 2
Next, add the “Mapbox Countries V1” layer. The default styling is black so don’t panic! This will be adjusted in the next step.
Step 3
Style the “Mapbox Countries V1” layer using a data condition on color. Use the “name” data field, type in “United States” and use the “select data” panel to search for your country of choice by clicking on the map.
Step 4
Once the “United States” is selected, give the colour a “0” value for opacity. The map should look like this:
Click done and make the fallback value white and full opacity. The map should show that all countries, except for the United States, are white.
Step 5
Add the Mapbox “Water” layer and style the fill colour white.
And there we have it -- countries of interest are masked. Of course there is flexibility to style the country fallback value any colour we wish and match that styling to the water layer. Try different colours to best match the data visualization or web platform background color.
Adding surrounding geographical context
To add some subtle surrounding geographical context like country borders, simply duplicate the “Mapbox Countries V1” layer and this time we will change the style type to a line.
Go to “select data” and change the “type” to “Line”, as below:
Make sure to move the new country layer to the top of the hierarchy by dragging it to the top. The example below has the line with a thinner width and coloured it grey. See the duplicated Country Boundary layer at the top of the hierarchy.
Black and white satellite layer as a background context layer
In the example below, another satellite layer was added. Note its position in the hierarchy - below the water layer, but above the country boundaries layer. We have also given the layer a value of 0.4 for opacity and dropped the saturation to -1.
We would love to see how designers use the new boundaries and different kinds of masks. Share new designs on Twitter with #BuiltWithMapbox.
Like this article? Share it.
Maps feature data from Mapbox © Mapbox, OpenStreetMap © OpenStreetMap and their data partners, including Maxar (if applicable, © Maxar).
