What’s wrong with this picture?
For those less familiar with the geography of the midwestern United States, here’s a hint:
Notice the big change in the northwestern point of the state? That distinctive arrowhead is shaped by the coastline of Lake Superior. I usually expect maps to show clear coastlines, distinguishing water from land, but the boundary of the state and its counties technically extend out into the middle of the lake. The dataset used to generate the choropleths above includes polygons that extend out into the water, hiding this distinctive coastline shape. So how did I tidy up the second map to look more like the state of Minnesota at a glance?
Method 1: Use a dataset that is already clipped
The easiest way to avoid this problem is to start with a cleaner dataset if you can. In the United States, the US Census Bureau provides shapefiles “specifically designed for small scale thematic mapping”. The polygons in these files are already clipped to an approximate outline of the United States coast. In many cases, and especially at small scales (low zoom levels), taking this approach will work great.
For example, here’s another version of the census population map using pre-clipped census tracts:
Now that looks like the right state!
Method 2: Hide your choropleth layer underneath the water layers
Ok, so what happens if you can’t change the dataset you’re working with? In this case, you can use the water layers as a mask for your data by placing your data layer underneath the water. In Studio, this is as easy as dragging and dropping your layers to re-order them:
If you’re using Mabox GL JS to style and add layers, there is a parameter on the Map.addLayer() method that lets you specify which layer you want to insert your new layer before.
A side effect of this approach is that your data will also appear underneath lakes and rivers, which can either be distracting or add important context to your map depending on what you are trying to visualize.
Even if you are using pre-clipped polygon data, the data source’s coastlines might be simplified and still not look right at high zoom levels. Hiding your data underneath the water layer can help in this case, too. For example, here’s the coastal-clipped polygons from the US Census Bureau near the city of Duluth, Minnesota, shown above and below the water layer:
When placed underneath the water layer, the distinct shape of the city’s waterfront and harbor is preserved.
Explore the map
Below is a live map showing this population choropleth tucked in beneath the map’s water layer. See how different regions of the state look at different zoom levels and try these methods out as you make your own visualizations with Mapbox Studio and our mapping tools for developers.
Build your own
Ready to build your own map? Take a look at our guides for more on how to get started.