making web maps beautiful & different with tilemill

2/23

Working with dataImporting dataStyling dataAdding tooltips & legend

What is TileMill > Working with data > Exporting your data > Tips & Bonus

What is TileMill ?TileMill componentsTileMill interface

Tips & Bonus

Exporting your dataExport as a fileCreating a web application

Outline

3/23

Based on among others

Design environment for making mapsWindows / Linux / Mac

BSD Licensed

TileMill


4/23

TileMill Interface


Interface

5/23

3

1 2

4

6

5

1

3

2

4

5

6

TileMill toolbar

Map toolbar

Map preview

Stylesheet editor

Project Toolbar

Editing Toolbar

TileMill Interface Components


Interface

6/23

1

3

2

4

5

6

Add a new layer

Geometry Type

Layer ID

Attributes

Zoom to layer extent

Toggle visibility

1

4 5 632 7 8

5

6

Edit layer settings

Delete Layer

TileMill Layer Components

Interface


7/23

TileMill Add layer


1 2

Available formats :● CSV● ESRI Shapefle● GeoJson● KML● GeoTIFF● SQLite● PostGIS

Import data

http://mapbox.com/carto/api/2.1.0/

12/23

http://colorbrewer2.org/

Where to find your colours ?

http://colorschemedesigner.com/

Doc: http://mapbox.com/tilemill/docs/guides/tips-for-color/


Find the good Colours

http://colorbrewer2.org/

http://colorschemedesigner.com/

http://mapbox.com/tilemill/docs/guides/tips-for-color/

15/23

Adding legend (A real one !)Using HTML and CSS to create a beautiful legend

<style type='text/css'> .wax-legend .legend-scale ul li { display: block; float: left; width: 50px; margin-bottom: 6px; text-align: center; font-size: 80%; list-style: none; } .wax-legend ul.legend-labels li span { display: block; float: left; height: 15px; width: 50px; }</style>

<div class='my-legend'><div class='legend-title'>Population of the world</div><div class='legend-scale'>

<ul class='legend-labels'> <li><span style='background:rgb(255, 255, 178);'></span>Pop >= 0</li> <li><span style='background:rgb(254, 204, 92);'></span> >= 30m</li> <li><span style='background:rgb(253, 141, 60);'></span>>= 300m</li> <li><span style='background:rgb(240, 59, 32);'></span>>= 500m</li> <li><span style='background:rgb(189, 0, 38);'></span>>= 1M</li> </ul>

</div><div class='legend-source'>Source: <a href="#link to source">

Name of source</a></div>

</div>

HTML CSS


Add a legend

16/23What is TileMill > Working with data > Exporting your data > Tips & Bonus

Formats

Available formats :● Web Applciatio (Upload)● PNG● PDF● SVG● MBTiles● Mapnik XML

“MBTiles is a file format for storing map tiles in a single file. It is based on a SQLite database.”

Export your project

http://tiles.mapbox.com/geotribu/map/earthquake#3.00/19.31/360.93

18/23

MapBox Publish

Publish your project


19/23

<!DOCTYPE html><html><head> <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script> <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style></head><body>

<div id='map'></div><script>

mapbox.auto('map', 'geotribu.earthquake');</script>

</body></html>

MapBox JS

http://mapbox.com/developers/

Publish your project

http://mapbox.com/developers/

20/23

http://mapbox.com/blog/tilemill-compositing-operations-preview/

Composite operation


Be creative


21/23

Composite operation

http://mapbox.com/tilemill/docs/guides/comp-op/http://mapbox.com/blog/tilemill-compositing-operations-preview/

Be creative


http://mapbox.com/tilemill/docs/guides/comp-op/


22/23

Tips

Define and using variables

@green-variable : #2B4D2D;

Map { background-color : @green-variable;

}#world {

polygon-gill : @green-variable; }#grass {

polygon-gill : lighten(@green-variable,10%); }

More info: http://lesscss.org/

Comment code

//this line will not be analyzed

/* This bloc will not be analyzed*/

Useful to test or to comment your code !


Tips

http://lesscss.org/

23/23

Arnaud VandecasteeleMemorial University of NewfoundlandMarine Geomatics Research Lab http://www.marinegis.com/

@Geotribu

making web maps beautiful & different with tilemill

Technology