Hey! This content applies only to previous CARTO products

Please check if it's relevant to your use case. On October 2021 we released a new version of our platform.

Questions  /  Building Maps  /  Cartography

# Symbology Challenge

Learn how to use advanced CartoCSS properties to create amazing maps!

This data has 4 duplicate points at each location. Each point represents a category of something at that location.

In order to visualize the information, we want to separate the points from each other in an orderly way and ensure that each category of feature is in the same location for each city of interest. Basically, category `a` should always be in the same location as should category `b`, for each city.

What is important is using two `marker-transform` properties, `rotate()` and `translate()`.

Below I describe the most basic method to get you started. There are more advanced and fancier things you can do, but this is a good place to start.

## Final Map

### Step 1: Rotation

The first step is determining the number of categories you have and where you want them to be placed around the center point. There are options depending on what you want to do.

#### One way

For this map, I am keeping it simple and dividing the number of categories at each point by 360

• Add a degree field and calculate rotation for each cateogry (360/# of categories). In this example, we have 4 categories so each category is placed at a 90 degree interval.
``````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
``````

#### Another way

Use CartoCSS conditions. If you know where you want your points to be placed around the center point, you can simply write the rotation into the CartoCSS. That is what I did for this map. I wanted each of the three years to be on the west side so I could place my labels on the east.

### Step 2: Choose an image file

• Choose an image file (or upload your own). For this example we are using a default icon from Builder

### Step 3: Symbolize each point

• Color each category with an appropriate color. At this point, your CartoCSS will look something like:
``````#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

• Next add a line for `marker-transform: rotate();` using the pre-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

• At this point, your map will look something like this. The points are rotated, but they need to be separated:

• To separate them you need to use the `marker-transform: translate();` property. Basically it is `translate(x,y)` and should be adjusted depending on which direction you want your markers to face.
• For fancier maps there are fancier things you can do here but for these basic flowers, we will do the `translate` manually. This property needs to be added in the same line as `rotate`.
• For this map, we want to translate on the `y`. A good rule of thumb is to do it half the amount of your symbol size. Since our symbol size is `40` I’m going to start with `20`:
``````#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);
}
``````
• Your map will now look like this:

• Since we want to make it look more like a flower, the points should be facing in - to do this, just change `translate(0,20)` to `translate(0,-20)`
• You will have to make some small adjustments to get the markers to your liking. For the final map, I had `translate(0,-13)`.