carto - How to set the visibility range of layers on CartoDB using CartoCSS?

I would like to customise the visibility of different layers on a CartoDB webmap so that they appear and disappear at distinct zoom levels.

How is this achieved?

Answer

You can use zoom based styling in order to make layers (actually, the geometries inside them) appear or disappear depending on the zoom.

This lesson about zoom based styling explains in detail the trick, but basically in each your independent layers you can do:

#table{
  marker-fill-opacity: 0.9;
  marker-line-color: #FFF;
  marker-line-width: 0;
  marker-line-opacity: 1;
  marker-placement: point;
  marker-type: ellipse;
  marker-width: 3;

  marker-fill: #FF6600;
  marker-allow-overlap: true;
  [zoom > 4] {marker-width: 0}
}

If you apply this to your different layers by using different zoom constraints ([zoom > X] {marker-width: 0}) in each of them you'll be able to hide and show your layers.

Of course, you can also use:

• [zoom < X] {marker-width: 0}


• [zoom = X] {marker-width: 0}



• [zoom <= X] {marker-width: 0}


• [zoom >= X] {marker-width: 0}

And besides the marker-width, you can also play with opacity -- Imagine that you don't want to hide the layers at all but you're interested to leave them as a "shadow".