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}