Zoom-based Styling

Zoom-based styling is useful to change how features and labels are shown at different zoom levels.

Most of the properties used on the style and label blocks can be defined using interpolators to enable zoom-based styling. Take a look at the full list of properties that can be interpolated in the full specification.

We support multiple types of interpolators: Step functions, linear, exponential and cubic bezier to enable your map looking like you want at each zoom level. See the Interpolators page.

An example of a layer changing feature colors depending on the zoom level can be found below

"paint": {
  "color": {"linear": [[14, "red"], [20, "blue"]]},
  ...
}

On zoom levels lower than 14, features of this layer will be rendered in red color. On zoom levels higher than 20, features of this layer will be rendered in blue color.

In zooms between 14 and 20, color will be linearly interpolated between red and blue.

Features at zoom level 14

Features at zoom level 17

Features at zoom level 20