Mapbox Styles Cheatsheet

This post is part of my Building Interactive Maps with React course - a course for anyone wanting to learn how to build interactive maps and integrate them into their React applications. If you enjoy this guide, then chances are you will enjoy the course too!

The Mapbox base maps are how I first came across Mapbox. In search of a better base map for a Leaflet project, I had been exploring a site that allowed you to preview different map providers. I distinctly remember coming across the Mapbox Streets style. Fresh colors, clarity, and just an overall beautiful map. The same rings true today.

Despite working with Mapbox on a regular basis, I still do not have the style urls for all of their predefined styles memorized and am constantly having to refer to their docs. This post is meant to serve as a cheatsheet for using Mapbox Styles. It will cover all of Mapbox's predefined styles and the best use cases for each.

Usage

I covered how to create a basic map in my Introduction to Mapbox and React post and will post a snippet of it here. To use any of the predefined Mapbox styles in a map, all you need to do is replace the value for the style property in this snippet with whichever style you would like to use.

const map = new mapboxgl.Map({
  container: mapContainer.current,
  style: "mapbox://styles/mapbox/streets-v11", // replace me
  center: [-87.903982, 43.020403],
  zoom: 12,
});

Streets

https://www.mapbox.com/maps/streets

Style URL:
mapbox://styles/mapbox/streets-v11

The Streets style is the probably the bread and butter for most use cases. Like any good information product, it makes the complex appear simple and approachable. The map style features clear roadways, administrative boundaries, and points of interest. The terrain rendering is surprisingly decent too.

Useful for

• maps focused on urban areas and points of interest
• maps focused on navigation, transportation, services, and businesses
• general purpose

Outdoors

https://www.mapbox.com/maps/outdoors

Style URL:
mapbox://styles/mapbox/outdoors-v11

The Outdoors style is my personal favorite and what I reach for most frequently. Similarly to the Streets style, Mapbox has chosen a near perfect color palette that is both highly functional and aesthetic. The map style prominently highlights terrain and natural features while still clearly conveying features like roadways, administrative boundaries, and points of interest. In addition to a great roads network, this map does an excellent job at showing trail networks. If you have used Strava before, you have seen a variation of this style in action.

Useful for

• maps focused on the outdoors (hiking, biking, fishing, skiing, etc...)
• maps focused on non-urban areas
• general purpose in non-urban contexts

Satellite

https://www.mapbox.com/maps/satellite

Style URL:
mapbox://styles/mapbox/satellite-streets-v11

Style URL:
mapbox://styles/mapbox/satellite-v9

There are two satellite map styles: plain old Satellite and Satellite Streets. The former is exactly what it sounds like. Satellite imagery with no labels. The latter is a blend of the Streets style and satellite imagery, the Satellite style is workhorse that you will probably need to reach for in most applications. The satellite imagery represents a blend of commercial and government providers. I have been amazed at how crisp the imagery remains at high zoom levels.

Useful for

• anytime it is important to see real representations of real world objects (i.e. buildings, natural features, roads)
• maps focused on land cover/development, real estate, urban planning, navigation, off trail/road travel
• general purpose

Dark & Light

https://www.mapbox.com/maps/dark

https://www.mapbox.com/maps/light

Style URL:
mapbox://styles/mapbox/dark-v10

Style URL:
mapbox://styles/mapbox/light-v10

The dark and light styles are my second favorite Mapbox style. These minimal styles are ideal use cases for maps with data visualizations. Mapbox has stripped away the noise resulting in minimal styles that have just enough context to assist in the spatial story you are trying to tell. These styles make it easy for your data to pop. In addition to their light and dark styles, Mapbox provides a way to create similarly muted Monochrome maps in Mapbox Studio based on any color. This is really useful if you need to create a minimal map to branded to your application. I plan on covering this in a future post but here is an example in the interim.

Useful for

• data visualizations and overlays
• any context where the base map is of secondary importance

Navigation Preview - Day & Night

Style URL:
mapbox://styles/mapbox/navigation-preview-day-v4

Style URL:
mapbox://styles/mapbox/navigation-preview-night-v4

Admittedly, I have not used the navigation preview styles before as I have never built an application that relies on navigation. Mapbox does not give these styles their own standalone products page but does reference them in the Mapbox GL JS docs. Going off of the name and previewing the style locally, I think it is fair to say that these styles are designed for previewing a navigation route. There are two styles available: day and night.

Useful for

• navigation preview

Navigation Guidance - Day & Night

Style URL:
mapbox://styles/mapbox/navigation-guidance-day-v4

Style URL:
mapbox://styles/mapbox/navigation-guidance-night-v4

Similarly, I have not used the navigation guidance styles before Mapbox does not give these styles their own standalone products page but does reference them in the Mapbox GL JS docs. Going off of the name and previewing the style locally, I think it is fair to say that these styles are designed for guidance while navigating a route. There are two styles available: day and night.

Useful for

• navigation guidance

Optimizing

Something I learned in writing this post is how easy it is to optimize a Mapbox style. All you have to do is append a query string to the end of the style url. So if I wanted to render an optimized Outdoor style I could do

mapbox://styles/mapbox/outdoors-v11?optimize=true

The other really cool part about this is that it does not just apply to Mapbox's predefined styles. You can use the optimize flag on any tileset hosted by Mapbox (more on this in future posts).

Next Steps

If you are anxious to actually apply this, grab the code snippet from my Introduction to Mapbox and React post and try swapping the various style urls in and out.

If you found this post useful, please retweet, share, or pick up a copy of The Mapbox Developer's Handbook!