Making Web Maps Beautiful & Different with TileMill

Outline
What is TileMill ?
TileMill components
TileMill interface

Working with data
Importing data
Styling data
Adding tooltips & legend

Exporting your data
Export as a file
Creating a web application

Tips & Bonus

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

TileMill

Design environment for making maps
Windows / Linux / Mac
BSD Licensed

Based on among others


Interface
TileMill Interface


Interface
TileMill Interface Components

1 2 5

4

3

1 TileMill toolbar
2 Map toolbar
3 Map preview
4 Stylesheet editor
5 Project Toolbar
6 6 Editing Toolbar


Interface
TileMill Layer Components 1 Add a new layer
2 Geometry Type

1 3 Layer ID
4 Attributes
5 Zoom to layer extent
2 3 4 5 6 7 8
6 Toggle visibility
5 Edit layer settings
6 Delete Layer


Import data
TileMill Add layer
Available formats :
●
CSV
●
ESRI Shapefle
●
GeoJson
●
KML
●
GeoTIFF
●
SQLite
●
PostGIS

1 2


Find the good Colours
Where to find your colours ?

http://colorschemedesigner.com/

http://colorbrewer2.org/

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

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

HTML CSS
<style type='text/css'>
<div class='my-legend'> .wax-legend .legend-scale ul li {
<div class='legend-title'>Population of the world</div> display: block;
<div class='legend-scale'> float: left;
<ul class='legend-labels'> width: 50px;
<li><span style='background:rgb(255, 255, 178);'></span>Pop >= 0</li> margin-bottom: 6px;
<li><span style='background:rgb(254, 204, 92);'></span> >= 30m</li> text-align: center;
<li><span style='background:rgb(253, 141, 60);'></span>>= 300m</li> font-size: 80%;
<li><span style='background:rgb(240, 59, 32);'></span>>= 500m</li> list-style: none;
<li><span style='background:rgb(189, 0, 38);'></span>>= 1M</li> }
</ul> .wax-legend ul.legend-labels li span {
</div> display: block;
<div class='legend-source'>Source: <a href="#link to source"> float: left;
Name of source</a> height: 15px;
</div> width: 50px;
</div> }
</style>


Export your project
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.”


Publish your project
MapBox Publish


Publish your project
MapBox JS
<!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> http://mapbox.com/developers/
<div id='map'></div>
<script>
mapbox.auto('map', 'geotribu.earthquake');
</script>
</body>
</html>

19/23

Be creative
Composite operation

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

Be creative
Composite operation

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


Tips
Tips

Define and using variables Comment code

@green-variable : #2B4D2D; //this line will not be analyzed

Map { /*
background-color : @green-variable; This bloc will not be analyzed
} */
#world {
polygon-gill : @green-variable; Useful to test or to comment your code !
}
#grass {
polygon-gill : lighten(@green-variable,10%);
}

More info: http://lesscss.org/


Arnaud Vandecasteele
Memorial University of Newfoundland
Marine Geomatics Research Lab
http://www.marinegis.com/

@Geotribu

23/23

Making Web Maps Beautiful & Different with TileMill

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (19)

More from arno974

More from arno974 (6)

Recently uploaded

Recently uploaded (20)

Making Web Maps Beautiful & Different with TileMill