Style by the zoom range

This article describes how to style your maps based on the zoom level in MapTiler Customize. You can assign different colors, text sizes, or line widths on different zoom level ranges.

To use MapTiler Customize, you need to set up a MapTiler Cloud account. If you don't have one yet, don't hesitate to sign up for free!

Zoom range styling panel

You can find the panel after clicking on a layer in the Layers tab (Alt+L) > hover on any styling property > click on three dots.

In the Dataviz map, we are using zoom range styling for both the outline color and width of the Country border layer.

How does it work

In the panel, you can remove or add the zoom level range stops and adjust their values. In the case of colors, a color picker will appear.

You can check the desired changes when adjusting the zoom level on the map. The zoom range will also be changing in the color UI.

Besides colors, you can use zoom range styling for a variety of properties: line width, pattern, offset, blur, opacity, text size, justify, anchor, etc.

Some of the styling properties don't support the zoom range styling yet. You will get a notification for this.

Function types

There are 4 function types that you can use in zoom range styling:

1. Linear interpolation
2. Exponential interpolation
3. Cubic Bezier interpolation
4. Steps

Interpolation produces continuous, smooth results by interpolating between pairs of input values. 
Steps produce discrete results (changes are visible between zoom levels).
More details can be found in the MapLibre style spec.

Conclusion

You can style your maps based on zoom levels in MapTiler Customize. Go to the Styling tab of a specific layer and click on the three dots to access the zoom range styling panel. Remove or add the zoom level range stops and adjust their values. There are 4 available function types: linear, exponential, and cubic bezier interpolation and steps.

Useful links

Layer styling

Interpolate | MapLibre style spec

Step | MapLibre style spec