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:

Step 6: Adjustments

• 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)

• Adjust the amount of separation now that the symbols are flipped.
• You will have to make some small adjustments to get the markers to your liking. For the final map, I had translate(0,-13).
• The amount also depends on the marker you are using.