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.

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 {
    line-color:#000;
    line-width:4.5;
  }

  line-color:#FFF;
  line-width:1.5;
}`

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

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.

Performance

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.

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.