Screencast

Main Styles

@water:#A5BFDD;
@forest:#cea;
//@land:#F4F3F0;
@land: #f7f6f4;
@political:#000;
@standard-label: #000;
@building: #ccc;
@railroad: #F0B2B2;
@font_reg: "Ubuntu Regular","Arial Regular","DejaVu Sans Book";

Map {
    background-color: @land;
}
/*
  Political Boundaries
*/
#carto_nc_sc [state = ‘45’] {
  polygon-fill: darken(@land, 6);
}
#carto_political {
  line-opacity:0.30;
  line-dasharray:6,2,2,2;
  line-color:@political;
  [type=9] {
    line-width:3.5;
  }
  [type=7] {
    line-width:1.5;
  }
}
#jurisdictions [name != ‘Mecklenburg’] {
  [zoom <= 14] [zoom < 17] {
    polygon-fill: darken(@land, 2);
    polygon-opacity: 0.15;
  }
}
#jurisdictions2 [name != ‘Mecklenburg’]{
  line-dasharray:6,2,2,2;
  line-color:@political;
  line-opacity:0.30;
  [zoom <= 16] {
      line-width: 1;
  }
  [zoom > 16] {
      line-width: 2;
  }
  line-width: 2;
  [zoom >= 13] {
    text-face-name:@font_reg;
    text-size: 9;
    text-placement:line;
    text-name:”[name]”;
    text-min-distance: 500;
    text-fill:spin(lighten(@standard-label,50),-15);
text-dy: -5;
text-transform: uppercase;
text-vertical-alignment: bottom;
  }
}
#jurisdictions  {
  [zoom >= 16] {
    polygon-fill: white;
  }
}
/*
  Wet stuff
*/
.water-poly {
  polygon-fill: @water;
}
#meck_streams {
  [zoom >= 13] {
    line-color: @water;
    line-width: 1;
  }
  [zoom >= 15] {
    line-width: 1.5;
  }
}
#streams_labels {
  [zoom >= 14] {
    text-face-name:@font_reg;
    text-size: 9;
    text-halo-radius:1;
    text-placement:line;
    text-name:”[stream]”;
    text-min-distance: 500;
    text-fill:spin(darken(@water,50),-15);
    text-halo-fill:lighten(@water,8);
    text-dy: 5;
    text-transform: capitalize;
  }
}
#ponds [zoom >= 14] {
  polygon-fill: @water;
}
/* Parks and Greenways */
#parks {
  [zoom >= 13] {
    polygon-fill: darken(@forest, 20);
    polygon-opacity: 0.5;
  }
  [zoom >= 15] {
    polygon-fill: @forest;
    polygon-opacity: 1;
  }
}
#park_labels {
  [zoom >= 15] {
    text-face-name:@font_reg;
    text-size: 9;
    text-halo-radius:1;
    text-name:”[property]”;
    text-min-distance: 50;
    text-fill:spin(darken(@forest,70),-15);
    text-halo-fill:lighten(@forest,12);
    text-transform: capitalize;
    text-wrap-width: 50;
  }
  [zoom >= 16] {
    text-size: 10;
  }
}
#greenways {
  [zoom >= 13] {
    line-dasharray:2,2,2,2;
    line-color: spin(darken(@forest,50),-15);
    line-width: 2;
  }
}
/* Buildings */
#buildings {
  [zoom = 15] {
    polygon-fill: darken(@building, 18);
    polygon-opacity: 1;
    }
}
#buildings_3d {
  [zoom >= 16] {
    polygon-fill: @building;
    line-color: darken(@building, 8);
    line-width: 0.5;
    building-fill: @building;
    building-fill-opacity: 0.7;
    [height > 10] {
        building-height:  “[height] * 0.8”;
    }
    [height <= 10] {
      building-height:  “10”;
    }
  }
}
/* tax parcels */
#parcels [zoom >= 16] {
  polygon-fill: @land;
}
#tax_parcels_line [zoom >= 16] {
  line-color: darken(@building, 10);
  line-opacity: 1;
  line-width: 0.7;
}
/* rail roads */
.railroad {
  [zoom >= 13] {
    line-dasharray: 4,4;
    line-width: 2;
    line-color: @railroad;
  }
}
/* pretty pictures */
#hillshade [zoom <= 14] {
  raster-opacity: 0.4;
}
#relief [zoom <= 14] {
  raster-opacity:1;
}

Roads

@motorway: #F8D6E0; /* #90BFE0 */
@trunk: #FFFABB;
@primary: @trunk;

@road: #bbb;
@secondary: @road;
@track: @road;
@font_reg: “Ubuntu Regular”,”Arial Regular”,”DejaVu Sans Book”;
@font_bold: “Ubuntu Bold”;
/* —- ROAD COLORS —- */
/.highway.line { line-color: #f00; } / debug */
.highway[stylegroup=’HIGHWAY’] {
  .line[zoom>=7]  {
    line-color:spin(darken(@motorway,36),-10);
    line-cap:round;
    line-join:round;
  }
  .fill[zoom>=13] {
    line-color:@motorway;
    line-cap:round;
    line-join:round;
  }
}
.highway[stylegroup=’RAMP’] {
  .line[zoom>=14]  {
    line-color:spin(darken(@motorway,36),-10);
    line-cap:round;
    line-join:round;
  }
  .fill[zoom>=14] {
    line-color:@motorway;
    line-cap:round;
    line-join:round;
  }
}
.highway[stylegroup=’PRIMARY’]{
  .line[zoom>=12] {
    line-color:spin(darken(@primary,36),-10);
    line-cap:round;
    line-join:round;
  }
  .fill[zoom>=14] {
    line-color:@primary;
    line-cap:round;
    line-join:round;
  }
}
  .highway[stylegroup=’SECONDARY’] {
  .line[zoom>=13] {
    line-color:lighten(@road, 30);
    line-cap:round;
    line-join:round;
  }
  .line[zoom >=15] {
    line-color: @road;
  }
  .line[zoom >=17] {
    line-color: white;
    line-opacity: 0;
  }
  .fill[zoom>=15] {
    line-color:#fff;
    line-cap:round;
    line-join:round;
  }
}
/* —- ROAD WIDTHS —- */
.highway[zoom=13] {
  .line[stylegroup=’HIGHWAY’]      { line-width: 2.0 + 2; }
  .fill[stylegroup=’HIGHWAY’]      { line-width: 2.0; }
  .line[stylegroup=’PRIMARY’]       { line-width: 1.4; }
  .line[stylegroup=’SECONDARY’] { line-width: 1.0; }
}
.highway[zoom=14] {
  .line[stylegroup=’HIGHWAY’]      { line-width: 4 + 2; }
  .fill[stylegroup=’HIGHWAY’]      { line-width: 4; }
  .line[stylegroup=’PRIMARY’]       { line-width: 2 + 2; }
  .fill[stylegroup=’PRIMARY’]       { line-width: 2; }
  .line[stylegroup=’RAMP’] { line-width: 1.4 + 2; }
  .line[stylegroup=’RAMP’] { line-width: 1.4 + 2; }
 }
.highway[zoom=15] {
  .line[stylegroup=’HIGHWAY’]      { line-width: 6 + 2; }
  .fill[stylegroup=’HIGHWAY’]      { line-width: 6; }
  .line[stylegroup=’PRIMARY’]       { line-width: 4 + 2; }
  .fill[stylegroup=’PRIMARY’]       { line-width: 4; }
  .line[stylegroup=’RAMP’] { line-width: 2 + 2; }
  .fill[stylegroup=’RAMP’] { line-width: 2; }
  .line[stylegroup=’SECONDARY’]  { line-width: 4 + 2; }
  .fill[stylegroup=’SECONDARY’]  { line-width: 4; }
}
.highway[zoom=16] {
  .line[stylegroup=’HIGHWAY’]      { line-width: 0; }
  .fill[stylegroup=’HIGHWAY’]      { line-width: 9; }
  .line[stylegroup=’PRIMARY’]       { line-width: 0; }
  .fill[stylegroup=’PRIMARY’]       { line-width: 7; }
  .line[stylegroup=’RAMP’] { line-width: 0; }
  .fill[stylegroup=’RAMP’] { line-width: 3; }
  .line[stylegroup=’SECONDARY’] { line-width: 0; }
  .fill[stylegroup=’SECONDARY’]  { line-width: 6; }
}
.highway[zoom>=17] {
  .line[stylegroup=’RAMP’] { line-width: 0; }
  .fill[stylegroup=’RAMP’] { line-width: 4; }
  .line[stylegroup=’SECONDARY’] { line-width: 0; }
  .fill[stylegroup=’SECONDARY’] { line-width: 5; }
  .line[stylegroup=’PRIMARY’]      { line-width: 0; }
  .fill[stylegroup=’PRIMARY’]       { line-width: 11; }
  .line[stylegroup=’HIGHWAY’]      { line-width: 0; }
  .fill[stylegroup=’HIGHWAY’]      { line-width: 16; }
}
.highway[zoom>=18] {
  .fill[stylegroup=’HIGHWAY’]      { line-width: 18; }
  .fill[stylegroup=’PRIMARY’]       { line-width: 13; }
  .fill[stylegroup=’RAMP’] { line-width: 5; }
}
/* —- ONE WAY ARROWS —- */
.highway.fill::oneway_arrow[zoom>15][oneway > 0] {
  marker-type:arrow;
  marker-width:1;
  marker-line-width:1;
  marker-line-opacity:0.5;
  marker-line-color:#fff;
  marker-spacing: 200;
  marker-fill:spin(darken(@motorway,50),-10);
  marker-opacity:0.8;
}
/* —- Labels —- */
#roads_label {
  text-face-name:@font_reg;
  text-halo-radius:1;
  text-placement:line;
  text-name:”‘’”;
  text-min-distance: 500;
  [stylegroup=’HIGHWAY’][carto_shield = “”][zoom>=12] {
    text-name:”[wholestnam]”;
    text-halo-fill:lighten(@motorway,8);
    [zoom>=13] { text-size:11; }
    [zoom>=15] { text-size:12; }
  }
  [stylegroup=”PRIMARY”][zoom>=13] {
    text-name:”[wholestnam]”;
    text-fill:spin(darken(@primary,70),-15);
    text-halo-fill:lighten(@primary,8);
    [zoom>=15] { text-size:11; }
    [zoom>=17] { text-size:13; }
  }
  [stylegroup=’SECONDARY’][zoom>=16] {
    text-name:”[wholestnam]”;
    text-fill:#444;
    text-halo-fill:#fff;
  }
}
#roads_label [stylegroup=’HIGHWAY’] [carto_shield != “”] {
    shield-name: “[carto_shield]”;
    shield-face-name: @font_bold;
    shield-file: url(img/interstate5.png);
    shield-min-distance: 100;
    shield-spacing: 75;
    shield-fill: #fff;
    shield-size: 10;
}
/* surrounding highways */
#carto_highways [zoom <= 13][hwy_type = ‘I’]{
  line-color:spin(darken(@motorway,26),-10);
    line-cap:round;
    line-join:round;
  line-width: 2;
}

Appending Tile Sets

sqlite3 tiles9-11.mbtiles .dump | sqlite3 tiles12-18.mbtiles

Resources

• TileMill
• SQLiteMan