Example Maps

Awesome examples go here!

• Value by Alpha
• Multi-Scale Marker Width
• Expanding the Ramp

Category

Highlight One Cateogry

• In the example below, we want to highlight any point categorized as Private room with red and color everything else gray to do this, we'll use the marker-fill property

TurboCarto

#layer {
    marker-fill-opacity: 0.9;
    marker-line-color: #fff;
    marker-line-width: 1;
    marker-line-opacity: 1;
    marker-placement: point;
    marker-type: ellipse;
    marker-allow-overlap: true;
    marker-width: 7;
    marker-fill: ramp([room_type],(gray,red),("Private room"));
}

Numeric

Redundant Symbology

• In the map below, we are using marker-width, marker-fill, and marker-line-width to reinforce larger and smaller magnitude earthquakes. For each style property, we are using the mag attribute with manually defined class breaks >-= to 1,2,3,4,5,6,7,8

TurboCarto

#layer {
  
    marker-fill: ramp([mag],cartocolor(SunsetDark),(1,2,3,4,5,6,7,8),>=);
    marker-width: ramp([mag],range(5,15),(1,2,3,4,5,6,7,8),>=);
    marker-fill-opacity: 0.9;
  
    marker-line-color:#fff;
    marker-line-width: ramp([mag],range(0.5,2),(1,2,3,4,5,6,7,8),>=);
  
    marker-line-opacity: 1;
    marker-placement: point;
    marker-type: ellipse;
    marker-allow-overlap: true;    
}

Size Marker by Value

Manual Classification

• In the map below, we have manually defined 7 classes and are using the mapping property >= which is greater than or equal to

Advanced

Value by Alpha

• uses polygon-opacity to ramp transparency from a starting color

TurboCarto

#demographics_sf [white_pop != null] {

  ::asian {
  
    polygon-fill: mediumvioletred;
    polygon-opacity: ramp([asian_pop],0,0.9,(0.1,.34,.67,.90),>=);
  
  }
  
  ::hispanic {
    polygon-fill: teal;
	polygon-opacity: ramp([hispanic_pop],0,0.9,(0.1,.34,.67,.90),>=);
  
  }
  
  ::black {
    polygon-fill: darkorange;
 	polygon-opacity: ramp([black_pop],0,0.9,(0.1,.34,.67,.90),>=);
  }
  
  ::white {
    polygon-fill: #000;
    polygon-opacity: ramp([white_pop],0,0.9,(0.1,.34,.67,.90),>=);
    
    line-color: #fff;
    line-width: 0.25;
    line-opacity: 0.25;
    polygon-gamma: 0.5;
    line-comp-op: soft-light;
  }
    
}

Multi-Scale marker-width

https://team.carto.com/u/mamataakella/builder/84984356-502f-11e6-9205-0ecd1babdde5/embed

TurboCarto

#layer {
  marker-width: ramp([dn], 5, 8, quantiles,7);
  marker-fill:#777f7f;
  marker-fill-opacity: 0.8;
  marker-allow-overlap: true;
  marker-line-width: 0;
  marker-line-color: #fff;
  marker-line-opacity: 1;
  
  
  [zoom<=2]{marker-width: 2.5;}
  
  [zoom=3]{
    marker-width: ramp([dn], 2, 4, quantiles,7);
  }
  
  [zoom>=6]{
   marker-width: ramp([dn], 10, 16,quantiles,7);
  }
}

Expanding the Ramp

https://team.carto.com/u/mamataakella/builder/962c2922-5014-11e6-8c58-0e05a8b3e3d7/embed

TurboCarto

#layer {
  
  marker-width: 3.5;
  marker-allow-overlap: true;
  marker-line-width: 0;
  marker-line-color: #ffda8d;
  marker-line-opacity: 1;
  
  marker-fill: 
  ramp([dn], 
    (
    #23284e,
    #273660,
    #294570,
    #2a557d,
    #2b6588,
    #2c768f,
    #2f8794,
    #339796,
    #39a796,
    #42b595,
    #4ec294,
    #5ecd93,
    #70d794,
    #84df97,
    #9ae59d,
    #b1eba7,
    #c8efb6,
    #ddf4ca,
    #f0f8e2
    )
  );
  
  [zoom<=2]{marker-width:2.5;}
  [zoom>=4]{marker-width: 4.5;}
  [zoom>=4]{marker-width: 5.5;}
}