CartoCSS ✍ stylesheets for maps

@tmcw / MapBox

vs / GeoServer CSS & SLD?

CartoCSS Mapnik

CartoCSS Beautiful Maps

CartoCSS Assumptions

CartoCSS Completion

You may have seen CartoCSS in...

But you can also...

# npm install -g carto
carto project.mml

/* hello, this is carto */
#dots {
  marker-width: 1;
  marker-fill: #f00;
  marker-line-width: 0;
}

Is it easy in comparison to...

CartoCSS is code, so you can use your friends

⌘C and ⌘V

because that is how we learn

what we've made / how it got did

CartoCSS descends from Cascadenik

* 'stylesheet languages' are a black sheep of PL theory and are only really covered by a single phd thesis: bit.ly/css-thesis

CartoCSS is not designed as an interoperable standard

It was designed for Mapnik, it's one and only

Because Standards Shouldn't Be Designed a Vacuum

don't tempt me, you know where this could go

CartoCSS resembles CSS to avoid the Gumption Trap

'Can I Approach This?'

#world {
  ::foo {
    polygon-opacity:1;
  }
  marker-width:[foo];
}

vs

div {
  background:#f00;
}

CartoCSS does more than just CSS

@variables: 'yes';

.nesting { .selectors { } }

// c++ style comments

spin(2, 2, 2);

NER*D / 2 MINUTES

CartoCSS is written in Javascript and runs primarily under node.js.

It can and has run in browsers instead, but there are no good renderers written for browsers yet and I'm not going to get into it.

CartoCSS tokenizes source, turns it into an AST, 'flattens' that AST, doing the work of inheritance, descendent selectors, expression evaluation, and so on.

The end result of this hard work is a flattened AST. Which is converted into the XML format Mapnik, the only supported renderer, uses.

(fathom)

/* can you see the assumption? */

#foo[zoom > 3] {
  color: red;
}

/* the assumption: */
/* 3 = a zoom level
  in spherical mercator */
#foo[zoom > 3] {
  color: red;
}

WHAT IS IMPORTANT ABOUT CARTOCSS

CartoCSS is fast

many tears have been shed making sure your save click does not pause your mind

CartoCSS is friendly

error reporting is the most underrated part of interpreters in general.

CartoCSS is complete

If you can do it in Mapnik, you can do it in Carto

CartoCSS is supported

vim syntax, codemirror syntax, pre-processing tools, documentation