This is a 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.
This library is still under support but it will not be further developed. We don’t recommend starting new projects with it as it will eventually become deprecated. Instead, learn more about our current CARTO for deck.gl library here
This guide walks through making a variety of visualizations for points, lines, and polygons using CARTO VL.
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.
Use the color property to define the fill color of a point, line or polygon.
1
color: #F24440
Use the width property to define a point size or line width.
1
width: 5
Use the strokeColor property to define the color of a point or polygon stroke.
1
strokeColor: #F24440
Use the strokeWidth property to define the size of a point or polygon stroke width.
1
strokeWidth: 3
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)
Use resolution to aggregate points into clusters.
1
resolution: 5
Use filter to show only the features that match the specified expression.
1
filter: between($numfloors, 10, 120)
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)
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])
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)
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)
Use linear to linearly interpolate the value of a given input between min and max.
1
color: ramp(linear($price, 10000, 500000), Prism)
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])
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
Use blend to linearly interpolate the value of a given input between min and max.
1
width: blend(5,20,$price/100)
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])