Advanced Cartography for the Web
44
Advanced Cartography for the Web AJ Ashton – Development Seed
-
Upload
foss4g-2011 -
Category
Technology
-
view
739 -
download
3
description
Advanced Cartography for the Web by AJ Ashton of Development Seed
Transcript of Advanced Cartography for the Web
- 1. Advanced Cartography for the Web AJ Ashton Development Seed
- 2. TODO Overview of the tools & what they do Basic design tips to keep in mind Explore some specific design examples
- 3. Cartography Toolset Libre
- 4. TileMill
- 5. QuantumGIS
- 6. PostgreSQL + PostGIS
- 7. Inkscape
- 8. }
- 9. Design on the web:basic things to keep in mind
- 10. RGB lowers the barrier-to-entry to making ugly colors.
- 11. RGB lowers the barrier-to-entry to making ugly colors.
- 12. color: SpringGreen; color: Red; color: Yellow; color: DeepPink;color: Chartreuse;color: MediumBlue;
- 13. The Saturation Danger Zone A base map should probably never use colors from this range* Data visualization overlays may proceed with caution, especially on dark base maps. *exception: glittermap
- 14. Dont know what colors look good together? Steal from someone who does. kuler.adobe.com colourlovers.com
- 15. Pixels dont give you texture for free.
- 16. Keep your textures subtle.
- 17. Typefaces and font sizesthat make sense on paper
- 18. }
- 19. Digging into the toolbox
- 20. TileMill why design with code?
- 21. Flexibility #roads[motorway][zoom>10] { ::casing { line-color: @mw_casing; line-width: 6; } ::fill { line-color: @mw_fill; line-width: 4; } }
- 22. Flexibility #roads[motorway][zoom>10] { ::casing { line-color: @mw_casing; line-width: 6; } ::fill { line-color: @mw_fill; line-width: 4; } ::inline { line-color: @mw_inline; line-width: 1; line-dasharray: 4, 3; } }
- 23. Variables & Color Functions lighten(blue,25%);
- 24. Hijacking geospatial functions for design purposes.
- 25. The fadey-stripey thing
- 26. #disputed-breakaway-area[zoom>4] { polygon-pattern-alignment:global; [zoom=5] { polygon-pattern-file:url(patterns/disputed_5.png); } [zoom=6] { polygon-pattern-file:url(patterns/disputed_6.png); } [zoom=7] { polygon-pattern-file:url(patterns/disputed_7.png); } [zoom>7] { polygon-pattern-file:url(patterns/disputed_8.png); } } #disputed-inset-10k[zoom>4] { polygon-pattern-alignment:global; [zoom=5] { polygon-pattern-file:url(patterns/disputed10k_5.png); } [zoom=6] { polygon-pattern-file:url(patterns/disputed10k_6.png); } [zoom=7] { polygon-pattern-file:url(patterns/disputed10k_7.png); } [zoom>7] { polygon-pattern-file:url(patterns/disputed10k_8.png); } } #disputed-inset-20k[zoom>4] { polygon-pattern-alignment:global; [zoom=5] { polygon-pattern-file:url(patterns/disputed20k_5.png); } [zoom=6] { polygon-pattern-file:url(patterns/disputed20k_6.png); } [zoom=7] { polygon-pattern-file:url(patterns/disputed20k_7.png); } [zoom>7] { polygon-pattern-file:url(patterns/disputed20k_8.png); } } #disputed-inset-30k[FEATURECLA!=Overlay][zoom>4] { polygon-fill:@land; }
- 27. Fancy marine labels
- 28. Abusing the Mapnikbuilding symbolizer
- 29. #c0001xgp { building-fill:#fff; building-fill-opacity:0.9; [VALUE=9.1] { building-height:1.37; } [VALUE=9.0] { building-height:1.28; } [VALUE=8.9] { building-height:1.194; } [VALUE=8.8] { building-height:1.114; } [VALUE=8.7] { building-height:1.040; } [VALUE=8.6] { building-height:0.970; } [VALUE=8.5] { building-height:0.905; } [VALUE=8.4] { building-height:0.844; } [VALUE=8.3] { building-height:0.788; } [VALUE=8.2] { building-height:0.735; } [VALUE=8.1] { building-height:0.686; } [VALUE=8.0] { building-height:0.640; }
- 30. Overview: Development Seed Headquarters Map Demo: j.mp/devseedhq
- 31. Overlapping patterns #land { [type=park], [type=grass], [type=cemetery] { polygon-pattern-file: url(img/grass.png); } ::overlay[type=cemetery] { Polygon-pattern-file: url(img/cemetery.png); } }
- 32. Thanks! @aj_ashtonDevelopmentSeed.org MapBox.com