Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar
Created September 30, 2016 09:36
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramiroaznar/63e61486caf6094f25643469418811b9 to your computer and use it in GitHub Desktop.
Save ramiroaznar/63e61486caf6094f25643469418811b9 to your computer and use it in GitHub Desktop.
How to hide and show layers with CartoCSS based on zoom
/** cities style */
#populated_places{
marker-fill-opacity: 0.8;
marker-line-color: #FFF;
marker-line-width: 0.2;
marker-line-opacity: 0.7;
marker-placement: point;
marker-type: ellipse;
marker-width: 10;
marker-fill: #F11810;
marker-allow-overlap: true;
[zoom <= 5] {marker-opacity: 0}
}
/** countries style */
#world_borders{
polygon-fill: #FFFFB2;
polygon-opacity: 0.8;
line-color: #FFF;
line-width: 0.5;
line-opacity: 1;
}
#world_borders [ pop_norm <= 247992435.530086] {
polygon-fill: #B10026;
}
#world_borders [ pop_norm <= 4086677.23673585] {
polygon-fill: #E31A1C;
}
#world_borders [ pop_norm <= 1538732.3943662] {
polygon-fill: #FC4E2A;
}
#world_borders [ pop_norm <= 923491.374542489] {
polygon-fill: #FD8D3C;
}
#world_borders [ pop_norm <= 616975.331234902] {
polygon-fill: #FEB24C;
}
#world_borders [ pop_norm <= 326396.192958792] {
polygon-fill: #FED976;
}
#world_borders [ pop_norm <= 95044.5589361554] {
polygon-fill: #FFFFB2;
}
#world_borders [zoom > 5] {polygon-opacity: 0}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment