Layer style

Layer styling is essential for making your maps lively and informative. It turns your data into something that's both beautiful and understandable. In this section, we'll cover all the different ways you can make your data pop in Builder such as the different layer visualization types, styling methods supported or how to create 3D visualizations. We'll guide you on how to modify the look and feel of your map to make it informative, straightforward, and attractive.

Layer type

Depending on the type and size of data source, different layer types will be available:

  • For small tables, you have different styling options depending on your geometry type:

    • Point: You can either visualize your point geometry without aggregation or you can apply aggregated styles such as Grid, Hexbins, Cluster or Heatmap

    • Line or Polygon: You can visualize your line or polygon geometry without aggregation once the full dataset has been loaded in Builder

Note that Grid, Hexbins, Cluster or Heatmap aggregated styles are not based on Spatial Indexes, the aggregation is performed visually, at rendering time. Due to that, they offer limited analytical capabilities.

  • For SQL Queries and larger tables, regardless of the type of geometry, data will be loaded progressively as tiles. For this type of source, you have the following options:

  • Grid layers based on Spatial Indexes (H3 and Quadbin) are always loaded progressively. Working with an aggregated grid requires that the properties used for styling, widgets and pop-ups are also aggregated. Because of this, all property selectors will let you select an aggregation operation for each property.

  • When using pre-generated Tilesets the data will be loaded progressively according to the configuration of your tileset. For more info about how to create pre-generated tilesets check this guide.

Dynamic aggregation of points into Quadbin grids

For Point data sources loaded as tiles, there is the option to dynamically aggregate points into a grid, by selecting Quadbin as layer type.

Any element in the map that is using a non-aggregate property will need to be reseted or deleted when switching to a Quadbin grid.

For this type of layer, there is an additional COUNT aggregation operation available for numeric properties. In order to ensure a precise count, our recommendation is to use a unique id column in your data.

When using COUNT as an aggregation operation for a Histogram or Range widget, a custom maximum will need to be specified before the widget can be created.

Visibility by zoom level

With this setting, you can control the zoom range where a layer should be visible. Simply set the lower zoom level where a layer would start appearing on the map; and the higher zoom level where the layer should disappear from the map.

This is specially useful for combining different types of sources: aggregated data for lower zoom levels and non-aggregated at the higher levels, administrative regions of different levels, etc.

Resolution

For aggregated grids based on spatial index data layers, you can control the granularity of the aggregation on each tile. The higher the resolution, the higher the granularity of your grid for each zoom level.

Color style

In Builder, you can style the Fill Color and the Stroke Color of your layers. For both of them, you can either:

  • Use a Fixed color to style your layer

  • Assign colors using the Color based on feature, which references values from a specific data source field.

When working with aggregated data sources, you will need to select an aggregation operation for your columns.

Connections to Redshift clusters don’t support aggregation of categorical properties.

When using Color based on functionality you can choose a palette from the below choices:

  • Diverging: Use these colour schemes to highlight values that are above and below an interesting mid-point in quantitative data. This is a great way to show data values that differ greatly from the norm. For example, you may use a diverging colour scheme to show population change.

  • Sequential: These colour schemes are ideal for data that follows an order, often numeric ranging from low to high. For example, you may use a sequential colour scheme to show counts within a H3 grid.

  • Qualitative: Use these colour schemes to represent different categories of data. For example, a qualitative scheme is a good choice for showing different types of Points of Interest.

  • Singlehue: Tailor for cases when you want a gradual transition of a single color from light to dark.

  • Custom: Each color to pick a new color either by clicking on the color picker or inputting HEX/RGB values. Color steps can be added, removed, or shuffled.

You can also tap into the HexColor feature to style qualitative data using the hex color codes from either your table or SQL query source. To harness this capability:

  1. Navigate to the Color based on selector and choose the category column you want to associate with the hex color code.

  2. In the Palette section, select the 'HexColor' option.

  3. Finally, choose the column containing the hex color code values.

For more information about how to leverage this functionality see this tutorial.

Color Scale

Depending on your color based on type, you have different color scale functionalities to define the color classification method.

For numeric columns, you can choose the following data classification methods:

  • Quantile: A quantile color scale is determined by rank. A quantile classification is well suited to linearly distributed data. Each quantile class contains an equal number of features. There are no empty classes or classes with too few or too many values. This can be misleading sometimes, since similar features can be placed in adjacent classes or widely different values can be in the same class, due to equal number grouping.

  • Quantize: A quantized color scale is determined by grouping values in discrete increments. It allows to transform an initially continuous range into a discrete set of classes. Quantize scales will slice the domain’s extent into intervals of roughly equal lengths.

  • Logarithmic: A Logarithmic scale based on powers of 10 will be created automatically, based on the number of steps in the selected color palette. Logarithmic scales tend to work well with aggregated data sources, and they will be the default option for them.

  • Custom: A custom color scale is determined by arbitrary breaks in the classification. A custom scale is well suited to tweak color ramps, adjusting the values to fine tune the visualizations.

For category columns you can use the Ordinary color scale functionality to set the category values that correspond to each color.

Opacity

You can set the Opacity for your Fill Color and Stroke Color layer style. For that, set the number from 0 to 1 to define your desired opacity level.

Stroke Width

This feature allows you to change the thickness of lines, or to assign a width based on a field from your data sources. You can change the predefined stroke width using the width slider or by directly inputting the stroke size in the text input.

You can access advanced options to define the stroke width based on the value of an input column.

Custom marker

For point layers, the Custom Marker setting is available and allows you to set an icon or an image as a marker in your map.

The Maki icons collection is readily available. Additionally, you can upload a custom .png or .svg file to be used as marker in the map.

Advanced options in this section allow to define a custom marker (from the Maki collection or an uploaded one) based on a categorical value.

There is also an option to rotate the marker based on a numeric column value. The value will be taken as degrees of rotation, taking 0 as the original vertical position of the icon, and rotating clock-wise.

Radius

Change the radius of points, or assign radius values based on a field from your dataset(s). You can change the predefined radius using the radius slider or by directly writting the radius size in the text input.

Additionally, you can access advanced options to assign radius values based on a field from your dataset(s).

Label

Applying text labels to your data enables you to enhance the typography of your map. While adding labels is optional, they are useful for communicating details with the map viewer. Positive effects of label styling will display legible text and considerate placement of labels on the Map View. In CARTO Builder, the STYLE tab of a selected map layer provides basic label options.

Enable the Labels checkbox, select a column and then specify the following options: Font Size, Font Color, Text Anchor or Alignment.

Select an appropriate font, size, and color for your label. For example, consider if the text appears uppercase, lowercase, mixed case, and how the label appears based on the size and style of the typeface.

Height

This feature allows you to assign heights to build 3D visualizations for both polygons and spatial indexes sources. You can activate this option by clicking the toggle. You can change the height using the height slider or by directly inputting the height in the text input.

You can explore additional height features by clicking on the three dots icon:

You can explore the 3D visualization by clicking on the 3D map button on the upper right corner of the map.

In the below example we can explore a map with 3D polygons whose height is defined by the number of floors.

Layer blending

Layer blending is a technique used to determine how overlapping features in different layers interact in terms of their visual representation. When two layers are blended, you can select the following blending options:

  • Additive: This mode adds the color values of overlapping features. When two colors are added together, the resulting color is often lighter. This blending mode is commonly used to visualize densities or intensities.

  • Subtractive: This blending mode subtracts the color values of the upper layer from the layer beneath it. The result is typically a darker color. In some contexts, this mode can help emphasize differences between layers.

Last updated