CARTO VL

This is an old and deprecated version of CARTO VL. You can find more information about the support and the availability of the different CARTO VL versions.

CARTO VL is a JavaScript library to create custom Location Intelligence applications over vector rendering.

Introduction to Styling

This guide walks through making a variety of visualizations for points, lines, and polygons using CARTO VL.

Supported Color Spaces

CARTO VL’s supported color spaces are HEX, RGB, RGBA, Named Colors, HSV, HSVA, HSL, HSLA, CIELAB.

In addition to these, you can also use our CARTOcolors schemes directly.

Styling Properties

Color

Use the color property to define the fill color of a point, line or polygon.

1
color: #F24440

Width

Use the width property to define a point size or line width.

1
width: 5

Stroke Color

Use the strokeColor property to define the color of a point or polygon stroke.

1
strokeColor: #F24440

Stroke Width

Use the strokeWidth property to define the size of a point or polygon stroke width.

1
strokeWidth: 3

Opacity

Set a feature’s opacity with the alpha channel (see supported Color Spaces) or inside of a ramp expression.

1
color: rgba(232,66,244,0.5)
1
color: opacity(ramp($animals,Prism),0.5)

Resolution

Use resolution to aggregate points into clusters.

1
resolution: 5

Filter

Use filter to show only the features that match the specified expression.

1
filter: between($numfloors, 10, 120)

Style Color by Category

Live example

All categories

Use the ramp expression to style your points, lines or polygons by categories. The example below assigns a unique color to each type of animal using the CARTOColor scheme Prism.

1
color: ramp($animals,Prism)

Manual

To map colors to particular categories, use buckets. In the example below the manually defined types of animals are assigned a unique color and all the other features are colored as other.

1
color: ramp(buckets($animals, ["dogs", "cats", "birds"]),[red, orange, blue, grey])

Top categories

To color features by the most common category, you can use the expression top. In the example below we are using it to retrieve the top 4 values in the $animals column. Each category is colored with a unique color and all the other features are colored as other.

1
color: ramp(top($animals, 4),Prism)

Style Color by Number

Live example

Quantiles

Use quantiles or other available classification methods to group features into a defined set of bins and color them using a sequential color scheme.

1
color: ramp(viewportQuantiles($price, 5), Prism)

Interpolate

Use linear to linearly interpolate the value of a given input between min and max.

1
color: ramp(linear($price, 10000, 500000), Prism)

Manual

To map colors to particular categories, use buckets. In the example below the manually defined prices are assigned a unique color and all the other features are colored as other.

1
color: ramp(buckets($price, [50, 100, 500, 1000]), [purple, red, orange, yellow, grey])

Style Size by Number

By attribute value

Use the width property to define a point size or line width by an attribute value. The example below will assign different sizes to the geometry depending of the price value associated to each one.

1
width: $price

Interpolate

Use blend to linearly interpolate the value of a given input between min and max.

1
width: blend(5,20,$price/100)

Manual

To map sizes to particular categories, use buckets. In the example below the manually defined prices are assigned a unique color and all the other features are colored as other.

1
width: ramp(buckets($price, [50, 100, 500, 1000]), [5, 10, 15, 20, 2])