Hey! This content applies only to previous CARTO products

Please check if it's relevant to your use case. On October 2021 we released a new version of our platform.
You can learn more and read the latest documentation at docs.carto.com

Questions  /  Building Maps  /  Cartography

How can I style a Builder layer based on the zoom level?

Learn how to change the symbology with CartoCSS based on the map zoom level.

Zoom-based styling refers to the ability to change what is displayed on a map, or how it is visualized, based on the zoom-level. When you zoom in or out, whole layers or certain features change its symbology. You can apply this effect to your data by applying zoom-based styling with CartoCSS.

Whenever CartoCSS properties are enclosed in brackets [zoom] { } , this indicates that zoom-based styling should be activated when the map meets the specified zoom level. It enforces rules for when and how data appears on your map.

In the following example, the [zoom] value indicates that the size of the geometry should change when zoom level 4 is reached. [Square brackets] indicate zoom-based styling, while the {curly brackets} indicate styling conditions to be applied at that zoom level.

 [zoom = 4] {marker-width: 6}