tilemill.pdf - Speaker Deck

Slide 1

Slide 1 text

Modern Maps with TileMill Tom MacWright MapBox @tmcw bit.ly/openvisconf-tilemill Wednesday, May 15, 13

Slide 2

Slide 2 text

30 people in a garage in washington, dc open source services { } Wednesday, May 15, 13

Slide 3

Slide 3 text

people open source and custom maps via TileMill services { } Wednesday, May 15, 13

Slide 4

Slide 4 text

people open source map hosting in the cloud and map services { } Wednesday, May 15, 13

Slide 5

Slide 5 text

TileMill is a free and open source application for designing custom maps, created by MapBox to modernize the art of cartography. Wednesday, May 15, 13

Slide 6

Slide 6 text

TileMill is a free and open source application you can download from tilemill.com and use on your Mac, Windows, or Linux computer Wednesday, May 15, 13

Slide 7

Slide 7 text

TileMill TileMill LOOKS LIKE THIS Wednesday, May 15, 13

Slide 8

Slide 8 text

WHY Wednesday, May 15, 13

Slide 9

Slide 9 text

it started when WE STARTED MAKING MAPS for elections, ﬂoods, aid projects, open data releases, funding plans, and much more Wednesday, May 15, 13

Slide 10

Slide 10 text

MAPS ARE A HEAP Wednesday, May 15, 13

Slide 11

Slide 11 text

Cartographers KNOW design + programming + ﬁle formats + math + geometry + languages + projections + rendering engines Wednesday, May 15, 13

Slide 12

Slide 12 text

That’s too much it shouldn’t take months for someone to learn maps. so we built TileMill Wednesday, May 15, 13

Slide 13

Slide 13 text

TileMill Tries to make this simpler Wednesday, May 15, 13

Slide 14

Slide 14 text

Principles Wednesday, May 15, 13

Slide 15

Slide 15 text

familiar + accessible if you’re familiar with CSS, you’ll like Carto. If you understand spreadsheets, the approach to data should be straightforward. Wednesday, May 15, 13

Slide 16

Slide 16 text

DESIGN FIRST previous tools were analysis-heavy and design- light. TileMill led with design and then became an analysis tool. Wednesday, May 15, 13

Slide 17

Slide 17 text

simplicity++ no more than three levels in the UI. minimal chrome but graphical hints where needed. Wednesday, May 15, 13

Slide 18

Slide 18 text

PROCESS Wednesday, May 15, 13

Slide 19

Slide 19 text

TileMill on your laptop Wednesday, May 15, 13

Slide 20

Slide 20 text

Wednesday, May 15, 13

Slide 21

Slide 21 text

Wednesday, May 15, 13

Slide 22

Slide 22 text

Wednesday, May 15, 13

Slide 23

Slide 23 text

Wednesday, May 15, 13

Slide 24

Slide 24 text

Wednesday, May 15, 13

Slide 25

Slide 25 text

Wednesday, May 15, 13

Slide 26

Slide 26 text

Wednesday, May 15, 13

Slide 27

Slide 27 text

Wednesday, May 15, 13

Slide 28

Slide 28 text

Wednesday, May 15, 13

Slide 29

Slide 29 text

Wednesday, May 15, 13

Slide 30

Slide 30 text

Wednesday, May 15, 13

Slide 31

Slide 31 text

Wednesday, May 15, 13

Slide 32

Slide 32 text

Wednesday, May 15, 13

Slide 33

Slide 33 text

Wednesday, May 15, 13

Slide 34

Slide 34 text

Wednesday, May 15, 13

Slide 35

Slide 35 text

Wednesday, May 15, 13

Slide 36

Slide 36 text

TileMill works really well with MapBox, but you can use it without. OPEN INPUT, OPEN OUTPUT Wednesday, May 15, 13

Slide 37

Slide 37 text

STYLE Wednesday, May 15, 13

Slide 38

Slide 38 text

TILEMILL is a clean slate with smart defaults. Designed to work with any data. Wednesday, May 15, 13

Slide 39

Slide 39 text

style LEARNABLE + FORGIVING error reporting Wednesday, May 15, 13

Slide 40

Slide 40 text

style Carto: CSS For maps #countries { polygon-fill: red; polygon-opacity: 0.5; } Wednesday, May 15, 13

Slide 41

Slide 41 text

style Carto: CSS For maps @lw: 2; #counties[zoom > 9] { line-width: @lw; } PLUS zoom levels, variables, attachments, fontsets, functions, and so on Wednesday, May 15, 13

Slide 42

Slide 42 text

style Carto: CSS For maps CSS LESS CARTO Wednesday, May 15, 13

Slide 43

Slide 43 text

style LEARNABLE + FORGIVING error reporting Wednesday, May 15, 13

Slide 44

Slide 44 text

style LEARNABLE + FORGIVING self-documenting Wednesday, May 15, 13

Slide 45

Slide 45 text

Data Wednesday, May 15, 13

Slide 46

Slide 46 text

geospatial is fractured web graphics text audio geo HTML PNG UTF8 MP3 grrr.. Wednesday, May 15, 13

Slide 47

Slide 47 text

data ANY* DATA SOURCE - Shapeﬁles - GeoTIFF - KML - GeoJSON - SQLite & PostGIS - CSV Wednesday, May 15, 13

Slide 48

Slide 48 text

data * ←more on this later. Wednesday, May 15, 13

Slide 49

Slide 49 text

data enabled by openstreetmap Wednesday, May 15, 13

Slide 50

Slide 50 text

the open base for open maps Wednesday, May 15, 13

Slide 51

Slide 51 text

PUBLISHING Wednesday, May 15, 13

Slide 52

Slide 52 text

GIS IS NORTH-ARROWS FIRST Wednesday, May 15, 13

Slide 53

Slide 53 text

TILEMILL is web-FIRST Wednesday, May 15, 13

Slide 54

Slide 54 text

TILES “map tiles are the .mp3s of maps” - Mike Migurski http://a.tiles.mapbox.com/v3/tmcw.map-23zyofas/15/9668/12328.png Wednesday, May 15, 13

Slide 55

Slide 55 text

mbTILES all your tiles, in one simple ﬁle Wednesday, May 15, 13

Slide 56

Slide 56 text

mbTILES host yourself with TileStache.org or unpack & push to S3 with mb-util Wednesday, May 15, 13

Slide 57

Slide 57 text

PLUS SIMPLE, OPEN FORMATS Wednesday, May 15, 13

Slide 58

Slide 58 text

Under the hood Wednesday, May 15, 13

Slide 59

Slide 59 text

Mapnik.org Pixel-perfect, super fast map rendering library. node.js Next-generation server environment for applications. CodeMirror, Modest Maps, Bones, request, sax, step, topcube, underscore, millstone, sphericalmercator, tilelive, mbtiles, JSV, generic-pool, glob, node- markdown, chrono + Wednesday, May 15, 13

Slide 60

Slide 60 text

THE WILD Wednesday, May 15, 13

Slide 61

Slide 61 text

bit.ly/map-shadowplay Wednesday, May 15, 13

Slide 62

Slide 62 text

bit.ly/map-pirates Wednesday, May 15, 13

Slide 63

Slide 63 text

bit.ly/map-fccspeed Wednesday, May 15, 13

Slide 64

Slide 64 text

bit.ly/map-iceland Wednesday, May 15, 13

Slide 65

Slide 65 text

bit.ly/map-iceland bit.ly/map-runs Wednesday, May 15, 13

Slide 66

Slide 66 text

TILEMILL 2 Wednesday, May 15, 13

Slide 67

Slide 67 text

so about that * Geospatial data is still a hard problem. OpenStreetMap is 300-500GB on disk. Rendering the world is really hard. Wednesday, May 15, 13

Slide 68

Slide 68 text

TileMill 2 Designed to handle remote data just as well as local. Boot up TileMill, and you’ve got the ‘OSM Planet’ *also free and open source Wednesday, May 15, 13

Slide 69

Slide 69 text

TileMill 2 + VECTOr tiles Vector tiles separate data & style, reduce size 10x, and work remotely: work without importing ‘the planet’. *also free and open source Wednesday, May 15, 13

Slide 70

Slide 70 text

THANKS! Tom MacWright MapBox @tmcw Wednesday, May 15, 13

Slide 71

Slide 71 text

THANKS! Tom MacWright MapBox @tmcw bit.ly/openvisconf-tilemill mapbox.com tilemill.com Wednesday, May 15, 13