Introducing Carto: A CSS-like Map Styling Language


2 min read

We’re proud to give you a sneak peak of Carto, one of the components of TileMill, our upcoming full-featured map design studio that lets you rapidly design completely custom maps. Carto is a CSS-like map styling language based on less.js. This gets us all the syntactic goodies such as nested styles and named variables.

b2d2bd6e4ff1  04Tx0hlrMcrdhWQZv

We’ve been actively using and contributing to the Cascadenik project for several years, so it doesn’t come as a surprise that Carto is heavily inspired by Mike’s pioneering work in Cascadenik. We hope that our work on Carto will contribute to the emerging field of CSS-like map styling which includes projects like GSS and MapCSS and the GeoServers CSS Module

One of the key features is “attachments”, which provide a straightforward way to draw a feature multiple times. The syntax is borrowed from CSS’ pseudo elements. Attachments are useful for adding borders, outlines, or glow effects.

`#road [zoom >= 15] {
  ::outline {


This results in an XML stylesheet that first draws the ::outline attachment and on top of that the inner white line.

b2d2bd6e4ff1  0JY04m STtlMLiVNb

Carto allows arbitrary nesting of class name and ID selectors, zoom level and filter constraints, as well as attachments. Even nested attachments work! The code in the screenshot is completely valid in Carto.

b2d2bd6e4ff1  0pEAHt7OAA1DLXL0n


We optimized Carto compilation times and are getting some pretty amazing results — compared to Cascadenik, typical stylesheets compile 4–5 times faster (usually in less than 100 milliseconds). The more complex a stylesheet gets, the greater the savings, particularly if selectors filter on the same key. For a stylesheet with 400 rules, Carto is about 400 times faster than Cascadenik (150 ms vs. 60 seconds). To achieve these tremendous improvements Carto uses new features introduced in the upcoming Mapnik 2.0, which adds a if-elseif-else style mode.

b2d2bd6e4ff1  009JHhcKXmsw7e6uH

This enables us to work more creatively when designing maps. We can simply try out a new design idea without waiting for the stylesheets to compile, and quickly develop styles where each country has a different color.

What we're doing.