Learn how to use CartoCSS to create beautiful maps
Last updated 12/2/2019
Prerequisites
Access to MapGeo Studio
Data loaded to MapGeo Studio
Process:
CartoCSS is a language used to customize the symbology of your mapping data. CartoCSS can be used to symbolize, filter and set the zoom levels at which your data will render. Once you have data loaded to MapGeo Studio, you can use the CartoCSS Editor to go beyond the default symbology or options available in the Styling Wizard.
CartoCSS includes several basic style types, from which complex styles can be developed. The basic style types are structured based on the type of data, and include Marker, Line, Polygon, and Text. Below are examples for each basic style type. At the end of each style element is a comment that describes what each element controls.
Cartocss-element; /* comment */
Marker
#markers{
marker-fill-opacity: 0.9; /* sets the transparency */
marker-line-color: #FFF; /* sets the marker outline color */
marker-line-width: 1; /* sets the width in pixels */
marker-line-opacity: 1; /* sets the transparency */
marker-placement: point; /* options are point, line, interior */
marker-type: ellipse; /* options are arrow, ellipse, rectangle*/
marker-width: 10; /* sets the width in pixels */
marker-fill: #000000; /* sets the color */
marker-allow-overlap: true; /* options are true, false */
}
Line
#line {
line-color: #FF6600; /* sets the line color */
line-width: 2; /* sets the line width in pixels */
line-opacity: 0.7; /* sets the transparency */
}
Polygon
#polygon {
polygon-fill: #FF6600; /* sets the fill color */
polygon-opacity: 0.7; /* sets the transparency */
line-color: #FFF; /* sets the outline color */
line-width: 0.5; /* sets the outline width in pixels */
line-opacity: 1; /* sets the transparency */
}
Text
#text {
text-name: [name]; /* determines the field used to label map features */
text-face-name: 'DejaVu Sans Book'; /* determines the font used to label map features */
text-size: 12; /* Font size in pixels */
text-label-position-tolerance: 0; /* Adjusts the label position on a line, in pixels */
text-fill: #0F3B82; /* sets the font color */
text-halo-fill: #FFF; /* sets the text halo color */
text-halo-radius: 1; /* sets text halo size, in pixels */
text-allow-overlap: true; /* Options are true, false */
text-dy: -10; /* Offsets text placement in pixels */
text-dx: -10; /* Offsets text placement in pixels */
text-orientation:[field]; /* Rotates the text based on the numeric value in a [field] in the data. Optional */
text-placement: point; /* Options include point, line, vertex, interior */
text-placement-type: simple; /* Options include dummy, simple. Dummy truns off this feature*/
text-placements: E,NE,SE, W, NW, SE; /* Where text-placement-type is set to simple, this element can be used to adjust the placement of text */
}
Zoom levels
Determine how a layer draws as each zoom level by applying zoom control element.
[zoom > 16] will display the elements only at zoom levels higher than 16
The example below will turn on markers when the zoom level is greater than or equal to 16:
#marker_layer_name
[zoom>=16]{
marker-fill-opacity: 0.9;
marker-line-color: #FFF;
marker-line-width: 1;
marker-line-opacity: 1;
marker-placement: point;
marker-type: ellipse;
marker-width: 10;
marker-fill: #FF6600;
marker-allow-overlap: true;
}
Multiple elements applied to one layer
There are instances when multiple elements can be applied to one layer in your visualization. Labelled polygons and multi-colored lines are two examples where two styling rules can be applied. In these cases, the element that should draw on the bottom must be listed first in the CartoCSS code. In order to make sure that the second code does not overwrite the first, define the second rule with a double colon. ::
The example below will draw a yellow line with a black outline or glow
/* Bottom Element */
#lines::glow /* glow is not a keyword */
{
line-color: #000000;
line-width: 4.5;
line-opacity: 0.7;
}
/* Top Element */
#lines
{
line-color: #FFCC00;
line-width: 2;
line-opacity: 1;
}
This example will draw green polygons with white outlines that will only be labelled when zoomed in closer than level 15:
/* Bottom Element */
#polyons {
polygon-fill: #229A00;
polygon-opacity: 1;
line-color: #FFF;
line-width: 0.5;
line-opacity: 1;
}
/* Top Element */
#polygons::labels
[zoom >16]
{
text-name: [lot_area_l];
text-face-name: 'DejaVu Sans Book';
text-size: 10;
text-label-position-tolerance: 0;
text-fill: #000;
text-halo-fill: #FFF;
text-halo-radius: 2;
text-dy: 0;
text-allow-overlap: false;
text-placement: interior;
text-placement-type: dummy;
}
Helpful Hints
Check the symbology of each layer at each zoom level. The symbology may need adjustment to handle common problems such as overlapping labels or symbols
Default symbology can be created by symbolizing the dataset itself. Once this is done, the data will retain that symbology when loaded to a visualization.
To avoid having to manually enter all the elements of the CartoCSS, choose some basic elements such as labels from the wizard, and fine tune them using the CartoCSS Editor.
Additional examples of CartoCSS are available in our CartoCSS Style Library
Next:
CartoCSS StyleLibrary
MapGeo Studio Styling Wizard