ICON

Help - Cartocss

Help Center How To Use Our Products? CartoCSS

CartoCSS

5 MIN EXPERT STYLING CSS, 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;
}

Related blog posts

Interested in our solutions? Please contact our sales team.

Whether you are new to data analytics or already an expert. We offer solutions for everyone. You don’t need to be a data expert to work with Spotzi Location. For more tailor made solutions we offer Spotzi Studio. With this plan you cannot only manage the data yourself but also connect to our API and manage users for the dashboards you create. Or work with our Market Ready Dashboards and drive on autopilot.