Making Web Maps Beautiful & Different with TileMill
1.
2. 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
3. TileMill
Design environment for making maps
Windows / Linux / Mac
BSD Licensed
Based on among others
What is TileMill > Working with data > Exporting your data > Tips & Bonus 3/23
4. Interface
TileMill Interface
What is TileMill > Working with data > Exporting your data > Tips & Bonus 4/23
5. 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
What is TileMill > Working with data > Exporting your data > Tips & Bonus 5/23
6. 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
What is TileMill > Working with data > Exporting your data > Tips & Bonus 6/23
7. Import data
TileMill Add layer
Available formats :
●
CSV
●
ESRI Shapefle
●
GeoJson
●
KML
●
GeoTIFF
●
SQLite
●
PostGIS
1 2
What is TileMill > Working with data > Exporting your data > Tips & Bonus 7/23
8.
9.
10.
11.
12. 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/
What is TileMill > Working with data > Exporting your data > Tips & Bonus 12/23
13.
14.
15. 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>
What is TileMill > Working with data > Exporting your data > Tips & Bonus 15/23
16. 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.”
What is TileMill > Working with data > Exporting your data > Tips & Bonus 16/23
17.
18. Publish your project
MapBox Publish
What is TileMill > Working with data > Exporting your data > Tips & Bonus 18/23
20. Be creative
Composite operation
http://mapbox.com/blog/tilemill-compositing-operations-preview/
What is TileMill > Working with data > Exporting your data > Tips & Bonus 20/23
21. Be creative
Composite operation
http://mapbox.com/tilemill/docs/guides/comp-op/
http://mapbox.com/blog/tilemill-compositing-operations-preview/
What is TileMill > Working with data > Exporting your data > Tips & Bonus 21/23
22. 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/
What is TileMill > Working with data > Exporting your data > Tips & Bonus 22/23
