Skip to content

Instantly share code, notes, and snippets.

@tokumine
Created December 9, 2011 16:27
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save tokumine/1452229 to your computer and use it in GitHub Desktop.
Save tokumine/1452229 to your computer and use it in GitHub Desktop.
zoom dependent Carto on CartoDB

This is an example of zoom dependent Carto.

For this demo, we will style 2 tiles from the same dataset:

Our style will make the polygons default to blue, but at zoom level 8 the polygons will be yellow:

Our Carto stylesheet for this is:

#sql_statement{polygon-fill:#1F78B4;}
#sql_statement[zoom=8]{polygon-fill:#FEC44F;}

URL Encoded, this becomes:

%23sql_statement%7Bpolygon-fill%3A%231F78B4%3B%7D%23sql_statement%5Bzoom%3D8%5D%7Bpolygon-fill%3A%23FEC44F%3B%7D%0A

We append this to the tile urls to get:

Zoom level 6 (blue)

https://vizzuality.cartodb.com/tiles/sql_statement/6/31/21.png?style=%23sql_statement%7Bpolygon-fill%3A%231F78B4%3B%7D%23sql_statement%5Bzoom%3D8%5D%7Bpolygon-fill%3A%23FEC44F%3B%7D%0A

Zoom level 8 (yellow)

https://vizzuality.cartodb.com/tiles/sql_statement/8/125/83.png?style=%23sql_statement%7Bpolygon-fill%3A%231F78B4%3B%7D%23sql_statement%5Bzoom%3D8%5D%7Bpolygon-fill%3A%23FEC44F%3B%7D%0A

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment