Intro to TileMill

An online cartography tool

Presentation by Matthew Cengia

Adapted from and by Steve Bennett (@stevage1)

Who am I

Assumed knowledge

  • Computer power users
  • Basic programming
  • Basic HTML/CSS web design


Why maps?

  • Engaging
  • Colourful
  • Draw attention
  • Quick context

Why TileMill?

  • Map = data + cartography
  • TileMill does cartography

MapBox TileMill

What TileMill is not

TileMill doesn't create or edit data; that needs to be done elsewhere; TileMill just displays it

TileMill →
Mapbox Studio Classic →
MapBox Studio

TileMill reliable, solid, familiar, raster tiles
Mapbox Studio Classic slightly flaky, not as well supported, vector tiles
Mapbox Studio exciting, new, not ready (in private beta), all GUI?
TileMill and Mapbox Studio Classic have the same principals and language. Mapbox Studio, who knows?

Dots on a map

map dots

Map making

map style
nepal 1
nepal 2
nepal 3
nepal 4
nepal 5

Better for biking

which city is better for biking?

Where should I live?

Where should I live?


Pubgain (a rogain crossed with a pub crawl)

Learning Objectives

By the end of this workshop, you will be able to:
  • display data (points+labels) on a map.
  • create a map style to suit your research.
  • make a map from your own data (maybe)
  • know where to go to learn more

TileMill on the web
Username: tm
Password: REDACTED

For those following along at home

Steve Bennett has written a TileMill installer for Ubuntu Trusty (14.04):


Lesson: Simple Styling Instructions

CartoCSS tells TileMill what to do with your data, and is modelled off CSS.


Blue Rivers


Open "Table x" project
Change the colour of #bigroads #bigroads

The most important button

TileMill help (Curly brace button)

The most important key: <Tab>

Tab-complete menu


Make bike paths dashed (--------)
Dashed bike paths
How? Use the { } button. Use Tab.

TileMill layers

TileMill Layers

Referencing map layers

Each TileMill map layer must have:
  • An ID (identifier), which can be referenced in CartoCSS with a prefixed hash (#)
  • An optional class, which can be referenced in CartoCSS with a prefixed dot (.)

These are used to apply styles to each map layer and its components.

Style name must match layer name

style name in CartoCSS must match the layer name


Hide the rivers hidden rivers
Move the bike paths layer over big roads bike paths over big roads

Quick Tips


CartoCSS Syntax

polygon-fill: blue;     /* Styles end in semicolons */
#bigroads { ... }       /* Rules have matched braces { } */
"hello" 'goodbye'       /* Text strings look like this */
/* has no effect */     /* Comments look like this */
syntax error


How many mistakes can you find? syntax errors

Types of map data

Points Single pair of coordinates (lat/long)
Eg: villages, murder locations
Lines Sequence of points in order
Eg: roads, voyages
Polygons Line forming a closed shape
Eg: lakes, area of bushfire


Identify each layer as either points, lines or polygons.

Types of cartographic elements

marker-opacity: 0.5;
line-width: 4;
Polygon areas
polygon-fill: white;

text-face-name: '...';
text-name: '[name]';
text-size: 12;

Customizing other elements

Opacity (of anything)
Width (of lines)
opacity and line width


Style universities as follows:
  • White inside
  • Blue border
  • Shown underneath all other elements

new university style


Best method: HSL (Hue, saturation, luminosity)
hsl(60, 80%, 50%)
Hue (° around a circle)
60° 120° 180° 240° 300° 360°
Saturation: 0% = grey, 100% = intense colour
Luminosity: 10% = very dark, 50% = full colour, 90% = pale

Other methods:
rgb(0, 255, 0)
Orange DarkGrey

HSL makes coordinated colours

hsl(20, 50%, 20%);
hsl(20, 50%, 40%);
hsl(20, 50%, 60%);
hsl(200, 0%, 40%);
hsl(200, 20%, 40%);
hsl(200, 40%, 40%);
hsl(200, 60%, 40%);
hsl(0, 80%, 60%);
hsl(80, 80%, 60%);
hsl(120, 80%, 60%);
HSL luminosity HSL saturation HSL hue


Make your map attractive with coordinated colours. color-coordinated map

Text Labels

text-name: [streetname];            /* Which text to show */

text-face-name: 'DejaVu Sans Bold'; /* Which typeface to use */

text-size: 12;                      /* What font-size, in pixels */

text-halo-radius: 2;                /* Size of text border */
text-halo-fill: white;              /* Colour of text border */

text-placement:line;                /* Labels along paths */

text label


Add text labels to universities university text labels


TileMill can style the same symbols multiple times.
To draw a border, draw the outside wide, and the inside narrow
  1. ::border
  2. (default sub-layer)

bigroads border CSS


Give #bigroads a black border, yellow fill, and black dashes inside.
bigroads border map


A carpet is the equivalent of a halo for lines; it makes the line really stand out against the background.

This is done by giving a line a border the same colour as the map background.


Make a carpet that looks like this:
bigroads carpet


Work out what each layer button does.
layer buttons


Add a layer (The Local Government Areas)
adding LGA layer


Add the pubs
adding pubs layer

Considerations for styling your map

Map purpose

  • What is the map trying to communicate?
  • What is the map's story?

Map audience

  • Who will use the map?
  • What are their needs?

Map medium

  • How will the map be delivered and/or viewed?
  • Considerations for print/screen

Go forth and map!


Creative Commons License
Intro to TileMIll by Matthew Cengia is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

This presentation written in reveal.js
They have an example presentation here