Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making Web Maps Beautiful & Different with TileMill

4,083 views

Published on

Published in: Technology
  • Be the first to comment

Making Web Maps Beautiful & Different with TileMill

  1. 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. 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. 3. Interface TileMill InterfaceWhat is TileMill > Working with data > Exporting your data > Tips & Bonus 4/23
  4. 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. 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. 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. 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. 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. 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. 10. Publish your project MapBox PublishWhat is TileMill > Working with data > Exporting your data > Tips & Bonus 18/23
  11. 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. 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. 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. 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. 15. Arnaud VandecasteeleMemorial University of NewfoundlandMarine Geomatics Research Labhttp://www.marinegis.com/ @Geotribu 23/23

×