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?
Add a comment
|
1 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".
-
Thank you for your answer, this will just hide a layer....is there a way to set a layer's visibility scale range so it only appears (in the legend also) between certain zoom levels, as in ArcGIS online?– MyFamilyCommented Jul 24, 2015 at 8:57
-
2From the editor there's not any way to do this, but with CartoDB.js you can use the show() and hide() functions to show or hide layers. This should hide the legends for them too. You would need to check the level of zoom of the map object and then, depending on its value, using show()/hide() accordingly. If you're interested on this let me know :-)– iriberriCommented Jul 24, 2015 at 9:05