Develop a CartoJSS serializer

Writing CartoCSS in ES5 is a bit difficult since it has no backtick strings. So we want to allow CARTO.js users to write JSON CartoCSS or “CartoJSS”:

For example, this CartoJSS:

{
  '#continent_points': {
    'marker-fill-opacity': 0.9,
    'marker-line-color': '#FFF',
    'marker-placement': 'point',
    'marker-allow-overlap': true,
    '[continent="Africa"]': {
      'marker-fill': '#A6CEE3'
    },
    '[continent="Antarctica"]': {
      'marker-fill': '#1F78B4'
    }
  }
}

will be converted to this CartoCSS:

#continent_points {
  marker-fill-opacity: 0.9;
  marker-line-color: #FFF;
  marker-placement: point;
  marker-allow-overlap: true;
  [continent="Africa"] {
    marker-fill: #A6CEE3;
  }
  [continent="Antarctica"] {
    marker-fill: #1F78B4;
  }
}

Sources:

• https://carto.com/docs/carto-engine/cartocss/best-practices/

cc @makella

[makella]

@Jesus89

So I’ve gone through some CartoCSS documentation and pulled out some relevant pieces that I think will be helpful to you and that aren’t covered in the best practices doc.

Since the doc has pretty basic examples, I tried to provide some that are more complex for you to see. If you have any questions please let me know.

Also, this doesn’t necessarily cover everything, but should be a good start. Also, if this is not what you are looking for, let me know that too!

Instances

https://cartocss.readthedocs.io/en/latest/styling_concepts.html#attachments-and-instances

Example:

The one in the doc is good and yes, it can get more complex, but don’t see people doing this too often.

Selectors

By class:

you have two layers that you want to symbolize the same like poi and airports classes: poi.pois and airports.pois with the syntax:

.pois {
 /*style applied to everything with class 'pois'*/
}

Filter Selectors

By Zoom and/or Numeric Value

In addition to the docs, there are some alternatives you might see

#layer {
 [zoom=4][attribute > 1],
 [zoom=5][attribute > 3],
 [zoom=6][attribute > 4][attribute < 7]
 [zoom=6][attribute > 4][attribute < 7],
 [zoom>=7][zoom<=10][attribute > 8]  //combines numeric and zoom level filters
 {
  /*style*/
 }
}

AND/OR

#layer[zoom=4][attribute > 1],
#layer[zoom=5][attribute > 3],
#layer[zoom=6][attribute > 4][attribute < 7],
#layer[zoom>=7][zoom<=10][attribute > 8] {
  /*style*/
}

AND/OR

#layer[zoom>=4][zoom<=10] {
  line-color: red;
  line-width: 2;
  [zoom=8] { line-width: 3; }
  [zoom=9] { line-width: 4; }
  [zoom=10] { line-width: 5; }
}

By Regular Expression

#roads[Type=~".* Highway"] { 
 /* style */ 
}

Color Definitions and Functions

https://cartocss.readthedocs.io/en/latest/language_elements.html#color

Example

//multiple color functions

@seed: #ffec8c;

#layer {
 polygon-fill: mix(spin(@seed,30),#000,80);
}

//color function with alternate color definition

#layer {
 polygon-fill: fadeout(rgba(255,255,255,0.5);
}

Float

https://cartocss.readthedocs.io/en/latest/language_elements.html#float

Example

@z5: 6;

#line {
  line-width: @z5+2; 
}

#line {
 line-width: [attribute]/@z5;
}

String

https://cartocss.readthedocs.io/en/latest/language_elements.html#float

Example

//attributes with a character
#layer {
 text-name: [attribute] + 'million';
 text-face-name: 'Open Sans Regular';
}

//stringing attributes with separating character
#layer {
 text-name: [attribute] + ', ' + [attribute_2];
 text-face-name: 'Open Sans Regular';
}

Numbers

https://cartocss.readthedocs.io/en/latest/language_elements.html#numbers

Functions

https://cartocss.readthedocs.io/en/latest/language_elements.html#numbers

Example

#layer {
 marker-width: 10;
 marker-transform: rotate[degrees], transform(-5,5);
}

#layer {
 marker-width: 10;
 marker-transform: translate([degrees],[symbol_size]/2*-1);
}

Marker, polygon, line image URL

https://cartocss.readthedocs.io/en/latest/language_elements.html#uri

[Jesus89]

Closed by https://github.com/CartoDB/CartoJSS