Find examples of CartoCSS styles and learn best practices for displaying data on MapGeo


Last updated 11/12/2019


Prerequisites

  • Access to MapGeo Studio

  • Data loaded to MapGeo Studio


Process:

Below are several CartoCSS templates for use in MapGeo Studio. These can be used as starting points to create your own high-quality cartography on MapGeo. 


Features for Display over Aerial Imagery

The CartoCSS below is optimized for showing features over a dark background, such as a basemap designed for use with aerial imagery. The example shows parcel lines in a light yellow, with scale trapping to show up only at higher zoom levels. This prevents the map from being overwhelmed with too many features turning on when the map is zoomed to a town or regional area. The labels are also optimized for display over a dark image, and turn on only when zoomed in to a parcel level. 


/** simple visualization */


#clientprefix_layername

[zoom>14]

{

  line-color: #fFFFBE;

  line-width: .5;

  line-opacity: 1;

}

#clientprefix_layername

[zoom>17]

{

  text-name: [your_field];

  text-face-name: 'DejaVu Sans Book';

  text-size: 12;

  text-label-position-tolerance: 0;

  text-fill: #fFFFBE;

  text-halo-fill: #000000;

  text-halo-radius: 1.5;

  text-dy: 0;

  text-allow-overlap: false;

  text-placement: interior;

  text-placement-type: dummy;

}

  



Buildings

This style will create the effect of 3D buildings. Building height can be controlled by an attribute value from your data by replacing the building-height value with the field name in [brackets].


#clientprefix_layername

[zoom>15]

{

  line-color: #FFF;

  line-width: 1;

  building-fill: #CCCCCC;

  building-fill-opacity: 1;

  building-height: 2;

}




Road Labels

Labels often require a great deal of fine-tuning based upon the specifics of your data. This style will create labels that draw directly on top of the centerline. 


#clientprefix_roadcenterlines::labels 

[zoom>13]{

  text-name: [your_field];

  text-face-name: 'Lato Bold';

  text-size: 12;

  text-label-position-tolerance: 0;

  text-fill: #333333;

  text-halo-fill: #FFFFFF;

  text-halo-radius: 2;

  text-dy: 0;

  text-allow-overlap: false;

  text-placement: line;

  text-placement-type: dummy;

  text-avoid-edges: true;

}





Polygons with Hatch Lines

This style adds a pattern to a polygon fill by using an external image. MapGeo Studio also has some pre-loaded images for use.


#clientprefix_layername {

  polygon-opacity: 0; /* This element sets the opacity of the background color */

  Polygon-fill: #FFFFFF;  /* This element sets the background color, if desired */

  line-color: #FFFF00;

  line-width: 1;

  line-opacity: 1;

  polygon-pattern-file: url(https://mapgeo.s3.amazonaws.com/common/symbology/hatch/hatch_double_cross_lightyellow_45_narrow_thin_transparent.png);

  polygon-pattern-opacity: 1;

}