CartoCSS

How to use CartoCSS


Using CSS (Cascading Style Sheet) code for more advanced styling.

Style your features


Advanced users are able to use CartoCSS to style maps.

CartoCSS is constructed by applying blocks of rules to elements and is commonly used in mapping platforms. It offers you the most flexible way of styling maps. Below the marker styles you are able to use. You are notified if there are any erros in the CartoCSS code. You can also click the undo and redo arrow buttons after entering code changes in the CartoCSS Editor.

/** simple visualization */

#world_administrative_divisions {
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-width: 1.5;
marker-line-opacity: 1;
marker-placement: point;
marker-type: ellipse;
marker-width: 10;
marker-fill: #FF6600;
marker-allow-overlap: true;
}

Categorize using CartoCSS


The code below shows you a CSS option to categorize the data on your maps. The idea is simple. Place the column name and the according value (< > =) in between brackets when you are using numeric data.

/** simple visualization */

#my_data{
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-opacity: 1;
marker-placement: point;
marker-type: ellipse;
marker-allow-overlap: true;
}
#my_data [celsius >= 20.00] {
marker-fill: #FF5C00;
}
#my_data [celsius > 0] [celsius < 20.00] {
marker-fill: #5CA2D1;
}
#my_data [celsius = 0] {
marker-fill: #000000;
}

You are also able to categorize based on text. In that case the text fields need to be placed in between ” “. Just like the example below:

#billboards [type="Premium Digital"] {
marker-fill: #136400;
}
#billboards [type="Spectacular"] {
marker-fill: #FF5C00;
}
#billboards [type="Dominations"] {
marker-fill: #FF5C00;
}

Zoom-based styling


In some cases it is very useful to display a map or markers from a certain zoom level. The sample code below gives you an idea how to do this:

/** simple visualization */

#nl_postal_2_digit [ zoom <=9] {
polygon-fill: #0F3B82;
polygon-opacity: 0;
line-color: #f84f40;
line-width: 1;
line-opacity: 1;
}

#nl_postal_2_digit::labels [zoom > 7] [zoom <= 9] {
text-name: [pc2];
text-face-name: ‘DejaVu Sans Book’;
text-size: 10;
text-fill: #000;
text-halo-fill: #FFF;
text-halo-radius: 1;
text-dy: -10;
text-allow-overlap: true;
text-placement: point;
text-placement-type: dummy;
}