TurboCARTO by Geometries

Styling Guides

TurboCARTO by Geometries

As introduced in the Style Thematic Maps with TurboCARTO Guide, TurboCARTO enables you to apply complex, thematic styling using a ramp in CartoCSS. TurboCARTO ramps define how features are drawn on a map.

While you can easily style map layers by column values from the STYLE tab in CARTO Builder, this guide focuses on using the CartoCSS view to apply TurboCARTO ramps to a point, line, and polygon map layer.

See the TurboCARTO Ramps documentation to review how TurboCARTO syntax and parameters are built. Values can be applied by size and color.

Import an Example .carto File

Let's create a map with a point layer, line layer, and polygon layer; from which we will apply a TurboCARTO ramp to each type of geometry.

  • Import the template .carto file packaged from the "Download resources" of this guide and create the map.

    Click on "Download resources" from this guide to download the zip file to your local machine. Extract the zip file to view the .carto file(s) used for this guide.

Builder opens with railroad accidents by US Counties, where US Counties (polygons) is the first layer, Railroad Lines (Lines) is the second layer, and Railroad Accidents (points) is the third, top layer. The data was created from another map with several analyses applied. Each of those layers were exported to create new datasets and create this map.

Since the map contains a dark basemap (Dark matter (lite)), we can style each geometry with different, bright colors that will stand out. Railroad Accidents (points) will be displayed as white bubbles, and Railroad Lines and US Counties with a higher accidenty density will be styled using a warm (yellow-red) gradient color-scheme.

TurboCARTO Ramp for Point

For the railroad accidents (points) layer, create a bubble map by applying a TurboCARTO ramp within the marker-width CartoCSS property. We will apply a custom marker size and change the classification method.

  1. To focus on visualizing the style of one layer at a time, hide the railroad lines (lines) and US Counties (polygons) layer.

    Hide layers

  2. Click on the railroad_accidents_points layer.

  3. Click the STYLE tab.

  4. Click the slider button from VALUES to CARTOCSS.

  5. Modify the marker-width property by applying a TurboCARTO ramp:

#layer {
  marker-width: ramp([total_damage], range(2, 11), headtails(5));
}
  • The total_damage column from the railroad accidents dataset is being used as the column value.
  • The minimum marker size is 2 and maximum marker size is 11.
  • Data is grouped by the headtails classification method, since total-damage has a heavy-tailed distribution.

The following image displays how the marker-width TurboCARTO ramp appears in the CartoCSS view, and how styling is applied in the Map View.

Marker size ramp

TurobCARTO Ramp for Line

For the railroad lines (lines) layer, we will apply two TurboCARTO ramps to style the line-width and the line-color properties.

  1. To focus on visualizing the style of one layer at a time, hide the railroad accidents (points) and US Counties (polygons) layer.

    Show line layer only

  2. Click on the railroad_lines layer.

  3. Click the STYLE tab.

  4. Click the slider button from VALUES to CARTOCSS.

  5. Modify the line-width property by applying a TurboCARTO ramp:

    #layer {
     line-width: ramp([sum_total_damage], range(0.5, 1.5), quantiles(5));
    }
    
    • The sum_total_damage column from the railroad lines dataset is being used as the column value. The data is aggregated values that came from intersecting the accidents with the railroads.
    • The minimum line width is 0.5 and maximum line width is 1.5.
    • Data is grouped by the quantiles classification method. This example using different classification methods in order to achieve a compromise between these two line properties.

    The following image displays how the line-width TurboCARTO ramp appears in the the CartoCSS view, and how styling is applied in the Map View.

    Line width ramp

  6. Apply a second TurboCARTO ramp by modifying the line-color property:

#layer {
  line-color: ramp([sum_total_damage], (#e15383, #f67b77, #ffa679, #ffd08e, #fef6b5), jenks);
}
  • The sum_total_damage column from the railroad lines dataset is being used as the column value.
  • The color scheme values are #e15383, #f67b77, #ffa679, #ffd08e, #fef6b5.

  • Data is grouped by the jenks classification method.

The following image displays how both the line-width and line-color TurboCARTO ramps appear in the the CartoCSS view, and how styling is applied in the Map View.

Line styling applied in map view

TurboCARTO Ramp for Polygon

For the US Counties (polygon) layer, we will apply three TurboCARTO ramps to style the polygon-fill, polygon-opacity, and the line-color properties.

  1. To focus on visualizing the style of one layer at a time, hide the railroad accidents (points) and railroad lines layer.

    Show polygon layer only

  2. Click on the us_counties_polygons layer.

  3. Click the STYLE tab.

  4. Click the slider button from VALUES to CARTOCSS.

  5. Modify the color of the polygons by applying a TurboCARTO ramp to the polygon-fill property:

    #layer {
     polygon-fill: ramp([accidents_density], (#ee4d5a, #f86f56, #f7945d, #f1b973, #ecda9a), jenks);
    }
    
    • The accidents_density column from the US Counties dataset is being used as the column value. The data is the result of intersect analysis that returned density values for the number of railroad accidents. We can use these values to create a Choropleth style map.
    • The color scheme values are #ee4d5a, #f86f56, #f7945d, #f1b973, #ecda9a.

    • Data is grouped by the jenks classification method.

    The following image displays how the polygon-fill TurboCARTO ramp appears in the the CartoCSS view, and how styling is applied in the Map View.

    Polygon fill ramp

  6. Apply a second TurboCARTO ramp by modifying the polygon-opacity property:

    #layer {
     polygon-opacity: ramp([accidents_density], range(0.1,0.4), jenks);
    }
    
    • The accidents_density column from the US Counties dataset is being used as the column value.
    • The minimum opacity is 0.1 and maximum opacity is 0.4.
    • Data is grouped by the jenks classification method.

    The following image displays how the polygon-fill and polygon-opacity TurboCARTO ramps appear in the the CartoCSS view, and how styling is applied in the Map View.

    Polygon opacity ramp

  7. Apply a third TurboCARTO ramp by modifying the line-color property for the polygons:

    #layer {
     line-color: ramp([accidents_density], (#ee4d5a, #f86f56, #f7945d, #f1b973, #ecda9a), jenks);
    }
    
    • The accidents_density column from the US Counties dataset is being used as the column value.
    • The color scheme values are #ee4d5a, #f86f56, #f7945d, #f1b973, #ecda9a, which are the same colors applied for the polygon-fill parameters.
    • Data is grouped by the jenks classification method.

    The following image displays how the polygon-fill, polygon-opacity, and line-color TurboCARTO ramps appear in the the CartoCSS view, and how styling is applied in the Map View.

    Polygon styling applied

  8. Show all three layers from the LAYERS pane and see how TurboCARTO styling was applied to your map!

final map