Maptime Madison:

CartoCSS & Mapbox Studio 101

Before we begin:

Follow along at:

Have  you  Installed  Mapbox  Studio?

cartographer, glasses-wearer, amateur cheese enthusiast

What is CartoCSs?

Carto = Maps

CSS = Cascading Style Sheets 

Cartocss  is  for  styling  basemaps

"These tiles are typically 256x256 pixels and are placed side-by-side in order to create the illusion of a very large seamless image."


How tiles work:

At zoom 0, there's one tile for the whole Earth, at zoom 1 there are 4 and so on...



zoom 0 and zoom 1 tiles (image: Mapbox)

Tiles  are  so  smart  wow!

  • Tiles cache, so if you're looking at a map of DC and glance at Baltimore, it won't have to reload the DC tiles when you go back.
  • Tiles load progressively so the surrounding tiles will load around what you're currently looking at, so it loads faster!

2  types  of  tiles:

Raster  vs.  Vector

  • Each zoom has own tiles
  • More zoom = more tiles 
  • Every tile is just an image
  • Have layers 
  • Using vector data
  • Faster!

Where  tiles  fit  into  a  web  map:

Live Demo Time:

We'll be using Mapbox Studio for designing vector map tiles. 


CartoCSS & Mapbox Studio 101

By kkowalsky

CartoCSS & Mapbox Studio 101

Maptime! Tutorial on CartoCSS & Mapbox Studio

  • 1,301