Example Maps

Awesome examples go here!

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

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

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;}
}