20 KiB
Carto documentation
The following is a list of properties provided in CartoCSS that you can apply to map elements.
map
background-color
color
Default Value: none
(transparent)
Map Background color
background-image
uri
Default Value:
(transparent)
An image that is repeated below all features on a map as a background.
srs
string
Default Value: +proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs
(The proj4 literal of EPSG:4326 is assumed to be the Map's spatial reference and all data from layers within this map will be plotted using this coordinate system. If any layers do not declare an srs value then they will be assumed to be in the same srs as the Map and not transformations will be needed to plot them in the Map's coordinate space)
Map spatial reference (proj4 string)
buffer-size
float
Default Value: 0
(No buffer will be used)
Extra tolerance around the map (in pixels) used to ensure labels crossing tile boundaries are equally rendered in each tile (e.g. cut in each tile). Not intended to be used in combination with "avoid-edges".
base
string
Default Value:
(This base path defaults to an empty string meaning that any relative paths to files referenced in styles or layers will be interpreted relative to the application process.)
Any relative paths used to reference files will be understood as relative to this directory path if the map is loaded from an in memory object rather than from the filesystem. If the map is loaded from the filesystem and this option is not provided it will be set to the directory of the stylesheet.
font-directory
uri
Default Value: none
(No map-specific fonts will be registered)
Path to a directory which holds fonts which should be registered when the Map is loaded (in addition to any fonts that may be automatically registered).
polygon
polygon-fill
color
Default Value: rgba(128,128,128,1)
(gray and fully opaque (alpha = 1), same as rgb(128,128,128))
Fill color to assign to a polygon
polygon-gamma
float
Default Value: 1
(fully antialiased)
Range: 0-1
Level of antialiasing of polygon edges
polygon-opacity
float
Default Value: 1
(opaque)
The opacity of the polygon
polygon-smooth
float
Default Value: 0
(no smoothing)
Range: 0-1
Amount of smoothing applied
line
line-color
color
Default Value: rgba(0,0,0,1)
(black and fully opaque (alpha = 1), same as rgb(0,0,0))
The color of a drawn line
line-width
float
Default Value: 1
The width of a line in pixels
line-opacity
float
Default Value: 1
(opaque)
The opacity of a line
line-join
miter``round``bevel
Default Value: miter
The behavior of lines when joining
line-cap
butt``round``square
Default Value: butt
The display of line endings
line-gamma
float
Default Value: 1
(fully antialiased)
Range: 0-1
Level of antialiasing of stroke line
line-dasharray
numbers
Default Value: none
(solid line)
A pair of length values [a,b], where (a) is the dash length and (b) is the gap length respectively. More than two values are supported for more complex patterns.
line-dash-offset
numbers
Default Value: none
(solid line)
valid parameter but not currently used in renderers
line-rasterizer
full``fast
Default Value: full
Exposes an alternate AGG rendering method that sacrifices some accuracy for speed.
markers
marker-file
uri
Default Value:
(An ellipse or circle, if width equals height)
An SVG file that this marker shows at each placement. If no file is given, the marker will show an ellipse.
marker-opacity
float
Default Value: 1
(opaque)
The overall opacity of the marker
marker-line-color
color
Default Value: black
The color of the stroke around a marker shape.
marker-line-width
float
Default Value: undefined
The width of the stroke around a marker shape, in pixels. This is positioned on the boundary, so high values can cover the area itself.
marker-line-opacity
float
Default Value: 1
(opaque)
The opacity of a line
marker-placement
point``line
Default Value: line
Attempt to place markers on a point once or on a line repeatedly
marker-type
arrow``ellipse
Default Value: ellipse
The default marker-type. If a SVG file is not given as the marker-file parameter, the renderer provides either an arrow or an ellipse (a circle if height is equal to width)
marker-width
float
Default Value: 10
The width of the marker, if using one of the default types.
marker-height
float
Default Value: 10
The height of the marker, if using one of the default types.
marker-fill
color
Default Value: blue
The color of the area of the marker.
marker-allow-overlap
boolean
Default Value: false
(Do not allow makers to overlap with each other - overlapping markers will not be shown.)
Control whether overlapping markers are shown or hidden.
marker-ignore-placement
boolean
Default Value: false
(do not store the bbox of this geometry in the collision detector cache)
value to control whether the placement of the feature will prevent the placement of other features
marker-spacing
float
Default Value: 100
Space between repeated labels
marker-max-error
float
Default Value: 0.2
The maximum difference between actual marker placement and the marker-spacing parameter. Setting a high value can allow the renderer to try to resolve placement conflicts with other symbolizers.
marker-transform
string
Default Value:
(no transformation)
An SVG transformation definition
shield
shield-name
string
Default Value: undefined
Value to use for a shield"s text label. Data columns are specified using brackets like [column_name]
shield-face-name
string
Default Value:
Font name and style to use for the shield text
shield-unlock-image
boolean
Default Value: false
(text alignment relative to the shield image uses the center of the image as the anchor for text positioning.)
This parameter should be set to true if you are trying to position text beside rather than on top of the shield image
shield-size
float
Default Value: undefined
The size of the shield text in pixels
shield-fill
color
Default Value: undefined
The color of the shield text
shield-placement
point``line``vertex``interior
Default Value: point
How this shield should be placed. Point placement attempts to place it on top of points, line places along lines multiple times per feature, vertex places on the vertexes of polygons, and interior attempts to place inside of polygons.
shield-avoid-edges
boolean
Default Value: false
Tell positioning algorithm to avoid labeling near intersection edges.
shield-min-distance
float
Default Value: 0
Minimum distance to the next shield symbol, not necessarily the same shield.
shield-spacing
float
Default Value: 0
The spacing between repeated occurrences of the same shield on a line
shield-min-padding
float
Default Value: 0
Determines the minimum amount of padding that a shield gets relative to other shields
shield-wrap-width
float
Default Value: 0
Length before wrapping long names.
shield-wrap-character
string
Default Value:
Use this character instead of a space to wrap long names.
shield-halo-fill
color
Default Value: #FFFFFF
(white)
Specifies the color of the halo around the text.
shield-halo-radius
float
Default Value: 0
(no halo)
Specify the radius of the halo in pixels
shield-character-spacing
float
Default Value: 0
Horizontal spacing between characters (in pixels). Currently works for point placement only, not line placement.
shield-line-spacing
float
Default Value: undefined
Vertical spacing between lines of multiline labels (in pixels)
shield-file
uri
Default Value: none
Image file to render behind the shield text
shield-text-dx
float
Default Value: 0
Displace text within shield by fixed amount, in pixels, +/- along the X axis. A positive value will shift the text right
shield-text-dy
float
Default Value: 0
Displace text within shield by fixed amount, in pixels, +/- along the Y axis. A positive value will shift the text down
shield-dx
float
Default Value: 0
Displace shield by fixed amount, in pixels, +/- along the X axis. A positive value will shift the text right
shield-dy
float
Default Value: 0
Displace shield by fixed amount, in pixels, +/- along the Y axis. A positive value will shift the text down
shield-opacity
float
Default Value: 1
(Default 1.0) - opacity of the image used for the shield
shield-text-opacity
float
Default Value: 1
(Default 1.0) - opacity of the text placed on top of the shield
shield-horizontal-alignment
left``middle``right``auto
Default Value: middle
The shield's horizontal alignment from its centerpoint
shield-text-transform
none``uppercase``lowercase``capitalize
Default Value: none
Transform the case of the characters
shield-no-text
boolean
Default Value: false
Whether the shield should make room for a text label.
shield-justify-alignment
string
Default Value: middle
Define how text in a shield's label is justified
line-pattern
line-pattern-file
uri
Default Value: none
An image file to be repeated and warped along a line
polygon-pattern
polygon-pattern-file
uri
Default Value: none
Image to use as a repeated pattern fill within a polygon
polygon-pattern-alignment
local``global
Default Value: local
Specify whether to align pattern fills to the layer or to the map.
polygon-pattern-gamma
float
Default Value: 1
(fully antialiased)
Range: 0-1
Level of antialiasing of polygon pattern edges
raster
raster-opacity
float
Default Value: 1
(opaque)
The opacity of the raster symbolizer on top of other symbolizers.
raster-mode
normal``grain_merge``grain_merge2``multiply``multiply2``divide``divide2``screen``hard_light
Default Value: normal
The blending technique used to overlay this raster image on the layer below. Normal simply covers the layer. Grain merge adds the two layers together and subtracts 128 from the value, making the resulting area sometimes high-contrast. Screen often gives a lighter, washed-out appearance. Multiply multiplies the pixels, giving a high-contrast result. Divide divides the upper layer by the lower layer, making a lighter version.
raster-filter-factor
float
Default Value: -1
(Allow the datasource to choose appropriate downscaling.)
This is used by the Raster or Gdal datasources to pre-downscale images using overviews. Higher numbers can sometimes cause much better scaled image output, at the cost of speed.
raster-scaling
fast``bilinear``bilinear8``bicubic``spline16``gaussian``lanczos
Default Value: fast
The scaling algorithm used to making different resolution versions of this raster layer. Bilinear is a good compromise between speed and accuracy, while lanczos gives the highest quality.
raster-mesh-size
integer
Default Value: 16
(Reprojection mesh will be 1/16 of the resolution of the source image)
A reduced resolution mesh is used for raster reprojection, and the total image size is divided by the mesh-size to determine the quality of that mesh. Values for mesh-size larger than the default will result in faster reprojection but might lead to distortion.
point
point-file
uri
Default Value: none
Image file to represent a point
point-allow-overlap
boolean
Default Value: false
(Do not allow points to overlap with each other - overlapping markers will not be shown.)
Control whether overlapping points are shown or hidden.
point-ignore-placement
boolean
Default Value: false
(do not store the bbox of this geometry in the collision detector cache)
value to control whether the placement of the feature will prevent the placement of other features
point-opacity
float
Default Value: 1
(Fully opaque)
A value from 0 to 1 to control the opacity of the point
point-placement
centroid``interior
Default Value: centroid
How this point should be placed. Centroid calculates the geometric center of a polygon, which can be outside of it, while interior always places inside of a polygon.
point-transform
string
Default Value:
(No transformation)
SVG transformation definition
text
text-name
string
Default Value:
Value to use for a text label. Data columns are specified using brackets like [column_name]
text-face-name
string
Default Value: undefined
Font name and style to render a label in
text-size
float
Default Value: 10
Text size in pixels
text-ratio
float
Default Value: 0
Define the amount of text (of the total) present on successive lines when wrapping occurs
text-wrap-width
float
Default Value: 0
Length of a chunk of text in characters before wrapping text
text-wrap-character
string
Default Value:
Use this character instead of a space to wrap long text.
text-spacing
float
Default Value: undefined
Distance between repeated text labels on a line
text-character-spacing
float
Default Value: 0
Horizontal spacing adjustment between characters in pixels
text-line-spacing
float
Default Value: 0
Vertical spacing adjustment between lines in pixels
text-label-position-tolerance
float
Default Value: 0
Allows the label to be displaced from its ideal position by a number of pixels
text-max-char-angle-delta
float
Default Value: none
If present, the maximum angle change, in degrees, allowed between adjacent characters in a label. This will stop label placement around sharp corners.
text-fill
color
Default Value: #000000
Specifies the color for the text
text-opacity
float
Default Value: 1
(Fully opaque)
A number from 0 to 1 specifying the opacity for the text
text-halo-fill
color
Default Value: #FFFFFF
(white)
Specifies the color of the halo around the text.
text-halo-radius
float
Default Value: 0
(no halo)
Specify the radius of the halo in pixels
text-dx
float
Default Value: 0
Displace text by fixed amount, in pixels, +/- along the X axis. A positive value will shift the text right
text-dy
float
Default Value: 0
Displace text by fixed amount, in pixels, +/- along the Y axis. A positive value will shift the text down
text-vertical-alignment
top``middle``bottom
Default Value: middle (Default affected by value of dy; "bottom" for dy>0, "top" for dy<0.)
Position of label relative to point position.
text-avoid-edges
boolean
Default Value: false
Tell positioning algorithm to avoid labeling near intersection edges.
text-min-distance
float
Default Value: undefined
Minimum permitted distance to the next text symbolizer.
text-min-padding
float
Default Value: undefined
Determines the minimum amount of padding that a text symbolizer gets relative to other text
text-min-path-length
float
Default Value: 0
(place labels on all paths)
Place labels only on paths longer than this value.
text-allow-overlap
boolean
Default Value: false
(Do not allow text to overlap with other text - overlapping markers will not be shown.)
Control whether overlapping text is shown or hidden.
text-orientation
float
Default Value: undefined
Rotate the text.
text-placement
point``line``vertex``interior
Default Value: point
Control the style of placement of a point versus the geometry it is attached to.
text-placement-type
dummy``simple
Default Value: dummy
Re-position and/or re-size text to avoid overlaps. "simple" for basic algorithm (using text-placements string,) "dummy" to turn this feature off.
text-placements
string
Default Value:
If "placement-type" is set to "simple", use this "POSITIONS,[SIZES]" string. See TextSymbolizer docs for format.
text-transform
none``uppercase``lowercase``capitalize
Default Value: none
Transform the case of the characters
text-horizontal-alignment
left``middle``right``auto
Default Value: middle
The text's horizontal alignment from its centerpoint
text-align
left``right``center
Default Value: center
Set the text alignment.
building
building-fill
color
Default Value: #FFFFFF
The color of the buildings walls.
building-fill-opacity
float
Default Value: 1
The opacity of the building as a whole, including all walls.
building-height
float
Default Value: 0
The height of the building in pixels.
Values
Below is a list of values and an explanation of any expression that can be applied to properties in CartCSS.
Color
CartoCSS accepts a variety of syntaxes for colors - HTML-style hex values, rgb, rgba, hsl, and hsla. It also supports the predefined HTML colors names, like yellow and blue.
#line {
line-color: #ff0;
line-color: #ffff00;
line-color: rgb(255, 255, 0);
line-color: rgba(255, 255, 0, 1);
line-color: hsl(100, 50%, 50%);
line-color: hsla(100, 50%, 50%, 1);
line-color: yellow;
}
Especially of note is the support for hsl, which can be easier to reason about than rgb(). Carto also includes several color functions borrowed from less:
// lighten and darken colors
lighten(#ace, 10%);
darken(#ace, 10%);
// saturate and desaturate
saturate(#550000, 10%);
desaturate(#00ff00, 10%);
// increase or decrease the opacity of a color
fadein(#fafafa, 10%);
fadeout(#fefefe, 14%);
// spin rotates a color around the color wheel by degrees
spin(#ff00ff, 10);
// mix generates a color in between two other colors.
mix(#fff, #000, 50%);
These functions all take arguments which can be color variables, literal colors, or the results of other functions operating on colors.
Float
Float is a fancy way of saying 'number'. In CartoCSS, you specify just a number - unlike CSS, there are no units, but everything is specified in pixels.
#line {
line-width: 2;
}
It's also possible to do simple math with number values:
#line {
line-width: 4 / 2; // division
line-width: 4 + 2; // addition
line-width: 4 - 2; // subtraction
line-width: 4 * 2; // multiplication
line-width: 4 % 2; // modulus
}
URI
URI is a fancy way of saying URL. When an argument is a URI, you use the same kind of url('place.png') notation that you would with HTML. Quotes around the URL aren't required, but are highly recommended. URIs can be paths to places on your computer, or on the internet.
#markers {
marker-file: url('marker.png');
}
String
A string is basically just text. In the case of CartoCSS, you're going to put it in quotes. Strings can be anything, though pay attention to the cases of text-name and shield-name - they actually will refer to features, which you refer to by putting them in brackets, as seen in the example below.
#labels {
text-name: "[MY_FIELD]";
}
Boolean
Boolean means yes or no, so it accepts the values true or false.
#markers {
marker-allow-overlap:true;
}
Expressions
Expressions are statements that can include fields, numbers, and other types in a really flexible way. You have run into expressions before, in the realm of 'fields', where you'd specify "[FIELD]", but expressions allow you to drop the quotes and also do quick addition, division, multiplication, and concatenation from within Carto syntax.
#buildings {
building-height: [HEIGHT_FIELD] * 10;
}
Numbers
Numbers are comma-separated lists of one or more number in a specific order. They're used in line dash arrays, in which the numbers specify intervals of line, break, and line again.
#disputedboundary {
line-dasharray: 1, 4, 2;
}
Percentages
In Carto, the percentage symbol, % universally means value/100. It's meant to be used with ratio-related properties, like opacity rules.
You should not use percentages as widths, heights, or other properties - unlike CSS, percentages are not relative to cascaded classes or page size, they're, as stated, simply the value divided by one hundred.
#world {
// this syntax
polygon-opacity: 50%;
// is equivalent to
polygon-opacity: 0.5;
}
Functions
Functions are comma-separated lists of one or more functions. For instance, transforms use the functions type to allow for transforms within Carto, which are optionally chainable.
#point {
point-transform: scale(2, 2);
}