This content applies to a previous version of CARTO

In October 2021 we released a new version of our platform. You can find the latest documentation at docs.carto.com

Back to Help Center

Symbology Challenge

Overview

This tutorial uses data with 4 duplicate points at each location, where each point represents a category. The goal is to separate these points in an orderly way while ensuring each category remains in the same relative position across all cities.

The key techniques involve using two marker-transform properties: rotate() and translate().

Step 1: Rotation

Determine the number of categories and divide 360 degrees among them for placement around the center point.

Method One: Database Field

Add a degree field and calculate rotation for each category:

UPDATE mamataakella.symbol_flowers
SET degrees = CASE
WHEN category = 'a' THEN 360
WHEN category = 'b' THEN 90
WHEN category = 'c' THEN 180
WHEN category = 'd' THEN 270
ELSE null
END

Method Two: CartoCSS Conditions

Write rotation directly into the CartoCSS if you have predetermined placement preferences.

Step 2: Choose an Image File

Select or upload a marker icon for your visualization.

Step 3: Symbolize Each Point

Apply colors to each category:

#layer {
  marker-width: 40;
  marker-fill: ramp([category], (#5F4690, #E65176, #38A6A5,#FF710F), ("a", "b", "c", "d"), "=");
  marker-fill-opacity: 0.9;
  marker-allow-overlap: true;
  marker-line-width: 1;
  marker-line-color: #FFF;
  marker-line-opacity: 1;
  marker-file: url('https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/marker-18.svg');
}

Step 4: Marker Transform - Rotate

Add rotation using your calculated degree field:

#layer {
  marker-width: 40;
  marker-fill: ramp([category], (#5F4690, #E65176, #38A6A5,#FF710F), ("a", "b", "c", "d"), "=");
  marker-fill-opacity: 0.9;
  marker-allow-overlap: true;
  marker-line-width: 1;
  marker-line-color: #FFF;
  marker-line-opacity: 1;
  marker-file: url('https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/marker-18.svg');
  marker-transform: rotate([degrees]);
}

Step 5: Marker Transform - Translate

Separate the rotated points using the translate property. Use approximately half your symbol size as a starting value:

#layer {
  marker-width: 40;
  marker-fill: ramp([category], (#5F4690, #E65176, #38A6A5,#FF710F), ("a", "b", "c", "d"), "=");
  marker-fill-opacity: 0.9;
  marker-allow-overlap: true;
  marker-line-width: 1;
  marker-line-color: #FFF;
  marker-line-opacity: 1;
  marker-file: url('https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/marker-18.svg');
  marker-transform: rotate([degrees]),translate(0,20);
}

Step 6: Adjustments

  • Reverse the translation direction to create an inward-facing flower effect: translate(0,-20)
  • Fine-tune the separation value based on your marker choice
  • The final map used translate(0,-13)