Your SlideShare is downloading. ×
Making Web Maps Beautiful & Different with TileMill
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Making Web Maps Beautiful & Different with TileMill

3,209
views

Published on

Published in: Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,209
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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 & BonusWhat is TileMill > Working with data > Exporting your data > Tips & Bonus 2/23
  • 2. TileMill Design environment for making maps Windows / Linux / Mac BSD Licensed Based on among othersWhat is TileMill > Working with data > Exporting your data > Tips & Bonus 3/23
  • 3. Interface TileMill InterfaceWhat is TileMill > Working with data > Exporting your data > Tips & Bonus 4/23
  • 4. Interface TileMill Interface Components1 2 5 4 3 1 TileMill toolbar 2 Map toolbar 3 Map preview 4 Stylesheet editor 5 Project Toolbar 6 6 Editing ToolbarWhat is TileMill > Working with data > Exporting your data > Tips & Bonus 5/23
  • 5. 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 LayerWhat is TileMill > Working with data > Exporting your data > Tips & Bonus 6/23
  • 6. Import data TileMill Add layer Available formats : ● CSV ● ESRI Shapefle ● GeoJson ● KML ● GeoTIFF ● SQLite ● PostGIS1 2What is TileMill > Working with data > Exporting your data > Tips & Bonus 7/23
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. Publish your project MapBox PublishWhat is TileMill > Working with data > Exporting your data > Tips & Bonus 18/23
  • 11. Publish your projectMapBox 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
  • 12. 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
  • 13. 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
  • 14. 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
  • 15. Arnaud VandecasteeleMemorial University of NewfoundlandMarine Geomatics Research Labhttp://www.marinegis.com/ @Geotribu 23/23