Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (19)
Mehr von arno974
Mehr von arno974 (6)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Making Web Maps Beautiful & Different with TileMill
- 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
- 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
- 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
- 18. Publish your project MapBox Publish What is TileMill > Working with data > Exporting your data > Tips & Bonus 18/23
- 19. 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
- 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
- 23. Arnaud Vandecasteele Memorial University of Newfoundland Marine Geomatics Research Lab http://www.marinegis.com/ @Geotribu 23/23