Style by the zoom range

Map design basics

This collection of articles forms a suggested workflow to understanding the fundamentals of map design basic.

  1. Layer styling
  2. Style by the zoom range
  3. Add a new style layer
  4. Layer filters

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.

zoom-styling-panel.png

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

zoom-styling-outline.png

zoom-styling-width.png

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.

zoom-styling-colors.png

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.

zoom-styling-check.png

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.

zoom-styling-not-supported.png

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

zoom-styling-functions.png

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.

Next steps

Continue to Add a new style layer to learn how to add a new style layer to a map in MapTiler Customize.

Layer styling

Interpolate | MapLibre style spec

Step | MapLibre style spec