Intro to TileMill – An online cartography tool

View Github Repository Open presentation in a new window

mattcen

See all presentation from mattcen

Intro to TileMill – An online cartography tool

0 0

intro-to-tilemill

Intro to TileMill talk

On Github mattcen / intro-to-tilemill

Intro to TileMill

An online cartography tool

Presentation by Matthew Cengia@mattcenhttps://mattcen.github.io/intro-to-tilemillAdapted 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
Split up into groups; limited number of available projects unless people use their own TileMill/PostGIS instance

Resources

Why maps?

  • Engaging
  • Colourful
  • Draw attention
  • Quick context

Why TileMill?

  • Map = data + cartography
  • TileMill does cartography

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 making

Map by @superlinguo (Lauren Gawne). Done in MS Paint, or a similarly simple image editor.
Map by @superlinguo (Lauren Gawne). Got her Mum to white-out most of the map, then edited in labels.
Map by @superlinguo (Lauren Gawne). First pass in TileMill.
Map by @superlinguo (Lauren Gawne). Second pass in TileMill.
Map by @superlinguo (Lauren Gawne). Final pass in TileMill, with terrain data underlaid.

Better for biking

Where should I live?

Steve Bennett was looking for a place that was close to bike trails and supermarkets, and has colour-coded each suburb.

Pubgain

Steve Bennett was desiging a "pubgain" (a rogain crossed with a pub crawl) for a friend's party.

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.netUsername: tmPassword: REDACTED

For those following along at home

Steve Bennett has written a TileMill installer for Ubuntu Trusty (14.04): https://github.com/stevage/saltymill Requires a couple of tweaks to the config file it opens for you to download the Australia base map and the Melbourne TileMill example file.

CartoCSS

Lesson: Simple Styling Instructions

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

Rivers

Change all rivers from "lightblue" to "blue", and make the Yarra River wider (10, instead of 8).

Exercise

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

The most important button

The most important key: <Tab>

Exercise

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

TileMill layers

  • Layers are fundamental to TileMill
  • Each layer references a data set

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

Exercise

Hide the rivers Move the bike paths layer over big roads

Quick Tips

Ctrl+Z Undo Ctrl+S Save

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 */

Exercise

How many mistakes can you find?

Types of map data

Points Single pair of coordinates (lat/long)Eg: villages, murder locations Lines Sequence of points in orderEg: roads, voyages Polygons Line forming a closed shapeEg: 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)

Exercise

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

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: #FF0000rgb(0, 255, 0)Orange DarkGreyLightGoldenRodYellow

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%); ...

Exercise

Make your map attractive with coordinated colours.

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 */

Exercise

Add text labels to universities

Sublayers

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

Exercise

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

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:

Exercise

Work out what each layer button does.

Exercise

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

Exercise

Add the pubshttp://gis.researchmaps.net/sample/pubs.geojson

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?

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.jsThey have an example presentation here
1
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)