TileMill ships with several example projects to give you ideas about how it can be used and to provide meaningful, editable code samples of CartoCSS in action. Today we’ll go over three ways you can quickly get your hands dirty with CartoCSS by making a few changes to one of these example projects - Geography Class.

First of all, here is an out-of-the-box export of the project as it ships with TileMill:

This blog post will walk through a few simple customizations to the project that are possible by bringing in some additional data and using new compositing options and image filters in CartoCSS.

Tint bands

Tint bands are a common cartographic technique that have always been a bit tricky to achieve in TileMill. With the new compositing operations in version 0.10, things have gotten a bit better. Some slight trickery is still required, however, and the technique we’ll use is not a total tint band solution.

First, we need to add an ocean layer to the very bottom of our project. This layer will act as a mask for the parts of our tint bands layer that are not over land.

Click ‘Add Layer’, ‘Browse’, then click the MapBox cloud button, and browse to natural-earth-1.4.0/physical. Select the 10m-ocean file and click Done. Name the layer ‘tint-bands’ and click Save. This new layer will now be at the top of the layers list - click and drag on the layer’s icon and drag it all the way to the bottom (below country).

Style this layer with a simple polygon fill, the same color as the background. (There won’t be any visible change to the map yet.)

#ocean { polygon-fill: @water; }

Next we to add a copy of the #country at the very bottom of the layer stack, below the ocean layer we just added. Do this the same way, but using the 10m-admin-0-countries file in the natural-earth-1.4.0/cultural directory. Name the layer tint-bands.

The style we’ll add for this layer is a thick semi-transparent black line that gets thicker at higher zoom levels. You can add this to the bottom of style.css (but it doesn’t really matter where it goes). Note that we’re using the opacity option and not the line-opacity option - this ensures that the opacity is applied to the style as a whole, and overlapping lines won’t darken each other.

#tint-band {
  opacity: 0.5;
  line-join: round;
  [zoom=2] { line-width: 3; }
  [zoom=3] { line-width: 5; }
  [zoom=4] { line-width: 8; }
  [zoom=5] { line-width: 12; }
  [zoom=6] { line-width: 17; }
  [zoom>6] { line-width: 23; }
}

Of course since the #tint-bands layer is at the very bottom of our project, this style is not going to be visible at all. In order to make the bands visible, we need to apply a compositing operation to the #countries layer.

Go to the rainbow.mss stylesheet tab and add this line to the existing #countries style:

polygon-comp-op: hard-light;

Hit save and you’ve got tint bands.

Tint bands

What’s happening is the color from the countries layer is being combined with the layers behind it - the additional country outlines and the background. Since ocean fill is now handled by a separate layer rather than the background, we can adjust the Map background-color property and it will alter the look of our map. To deepen the colors a bit, the background for the above image was adjusted to a mid-tone grey, #aaa.

Perhaps the solid bands are a bit strong. We can easily soften them out with a blur using image-filters, another new feature in TileMill 0.10. Add this line to your #tint-bands style:

image-filters: agg-stack-blur(5,5);

This is the result:

Blurred bands

Terrain

Let’s add a couple of new layers - terrain (shaded hills) and bathymetry (ocean depth). The terrain part will require the same ocean layer that we added to the project in the previous section.

The terrain layer we’ll add is the Shaded Relief raster from Natural Earth (large size). Download it and unzip it somewhere on your hard drive, then click Add Layer, browse to the directory you unzipped it to, and select the file SR_HR.tif. Name the layer ‘terrain’, set the SRS to ‘WGS84’, and Save & Style the layer.

There’s now a grey terrain layer covering the project. Drag the terrain layer down the layers list to the very bottom and click Save. We’ve already got a hard-light compositing operation on the countries layer from the first section, which looks great.

Geography Class with terrain

Bathymetry

For our bathymetry layer we’ll use the 10m-bathymetry layer from the natural-earth-1.4.0/physical directory. This is a polygon vector layer that contains many overlapping polygons representing different ocean depths.

This layer shouldn’t be styled with just a solid color, since its usefulness depends on the overlapping shapes interacting with each other. Opacity and composite operations can be useful here.

#bath[DEPTH>0] {
  polygon-fill: aliceblue;
  polygon-comp-op: multiply;
}

The color here is ‘aliceblue’, a very light blue. (CartoCSS makes available the same 147 colored names used in standard CSS and SVG.) Even though this blue is very light, when combined with the ‘multiply’ composite operation, each overlapping piece will darken the colors below it in a compounding fashion. Thus the deepest parts of the ocean (where the most shapes are overlapping) will appear darkest.

The [DEPTH>0] keeps the shallowest level of water from being styled. This will make coastal waters have the same color as lakes.

Putting it all together

Here is the result of these minor changes put together.

TileMill is a free and open-source map design studio. Browse the TileMill documentation or the MapBox support site for further tips about working with TileMill and CartoCSS.