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.
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.
There are 4 function types that you can use in zoom range styling:
- Linear interpolation
- Exponential interpolation
- Cubic Bezier interpolation
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.
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.