Intro to TileMill

An online cartography tool

Presentation by Matthew Cengia
@mattcen
https://mattcen.github.io/intro-to-tilemill

Adapted from http://resbaz3.researchmaps.net and http://resbaz4.researchmaps.net by Steve Bennett (@stevage1)

Who am I

Assumed knowledge

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

Resources

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

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

http://cc8.researchmaps.net
Username: tm
Password: REDACTED

For those following along at home

Steve Bennett has written a TileMill installer for Ubuntu Trusty (14.04): https://github.com/stevage/saltymill

CartoCSS

Lesson: Simple Styling Instructions

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

Rivers

Blue Rivers

Exercise

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

Exercise

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

Exercise

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

Quick Tips

Ctrl+ZUndo
Ctrl+SSave

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

Exercise

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

Exercise

Identify each layer as either points, lines or polygons.

Types of cartographic elements

Markers 
marker-opacity: 0.5;
Boundaries/Lines 
line-width: 4;
Polygon areas 
polygon-fill: white;
Labels 

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

Customizing other elements

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

Exercise

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

new university style

Colours

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

Other methods:
#FF0000
rgb(0, 255, 0)
Orange DarkGrey
LightGoldenRodYellow

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

Exercise

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

Exercise

Add text labels to universities university text labels

Sublayers

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

Exercise

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

Carpet

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.

Exercise

Make a carpet that looks like this:
bigroads carpet

Exercise

Work out what each layer button does.
layer buttons

Exercise

Add a layer (The Local Government Areas)
http://gis.researchmaps.net/sample/lga.zip
adding LGA layer

Exercise

Add the pubs
http://gis.researchmaps.net/sample/pubs.geojson
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!

Questions?

Creative Commons License
Intro to TileMIll by Matthew Cengia is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
https://github.com/mattcen/intro-to-tilemill

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