Upload
arno974
View
107
Download
1
Embed Size (px)
DESCRIPTION
Citation preview
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
What is TileMill > Working with data > Exporting your data > Tips & Bonus
4/23
TileMill Interface
What is TileMill > Working with data > Exporting your data > Tips & Bonus
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
What is TileMill > Working with data > Exporting your data > Tips & Bonus
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
What is TileMill > Working with data > Exporting your data > Tips & Bonus
7/23
TileMill Add layer
What is TileMill > Working with data > Exporting your data > Tips & Bonus
1 2
Available formats :● CSV● ESRI Shapefle● GeoJson● KML● GeoTIFF● SQLite● PostGIS
Import data
12/23
http://colorbrewer2.org/
Where to find your colours ?
http://colorschemedesigner.com/
Doc: http://mapbox.com/tilemill/docs/guides/tips-for-color/
What is TileMill > Working with data > Exporting your data > Tips & Bonus
Find the good Colours
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
What is TileMill > Working with data > Exporting your data > Tips & Bonus
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
18/23
MapBox Publish
Publish your project
What is TileMill > Working with data > Exporting your data > Tips & Bonus
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
20/23
http://mapbox.com/blog/tilemill-compositing-operations-preview/
Composite operation
What is TileMill > Working with data > Exporting your data > Tips & Bonus
Be creative
21/23
Composite operation
http://mapbox.com/tilemill/docs/guides/comp-op/http://mapbox.com/blog/tilemill-compositing-operations-preview/
Be creative
What is TileMill > Working with data > Exporting your data > Tips & Bonus
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 !
What is TileMill > Working with data > Exporting your data > Tips & Bonus
Tips
23/23
Arnaud VandecasteeleMemorial University of NewfoundlandMarine Geomatics Research Lab http://www.marinegis.com/
@Geotribu