Map Styles

Map styles define the look and feel of a map, including its colors, background, roads, labels, points of interest, and other visual elements. Mapbox GL JS enables developers to apply predefined styles or load custom styles to fit their application's design needs. Once a style is loaded, developers can programmatically change the style's appearance at runtime, add and remove layers, change layer properties, and more.

By default, Mapbox GL JS will load the Mapbox Standard style, a versatile and visually appealing map style suitable for many applications. Mapbox Standard offers many configuration options, allowing developers to customize the map's appearance to suit the needs of their application. With Mapbox Standard, developers can adjust the map's colors, feature visibility, and other properties to create a unique map experience. Additionally, developers can bring their own data to the style either through adding a source and layer or by importing a style fragment.

These guides explain core concepts of loading and configuring styles, adding sources and layers at runtime, and styling data with Mapbox expressions in Mapbox GL JS. For a general introduction to map styles, see this getting started guide:

GUIDE

Getting started: Map styles

Learn more about Map Styles in general, and how they are used in the Mapbox product ecosystem.

Mapbox Studio Manual

These guides cover working with the map style at runtime. For more information on how to create a custom map style in Mapbox Studio, see the Mapbox Studio Manual.

---

Set a style

Choose a map style and load it after initializing a map in your application using the Mapbox GL JS.

Work with sources and layers

Use Mapbox GL JS to add, remove, and modify sources and layers used in a map style.

Styling layers with expressions

Change the appearance of a layer based on properties in the layer's data source or the current zoom level using Mapbox GL JS.

Was this page helpful?