Advanced Cartography for the Web

695 views
628 views

Published on

Advanced Cartography for the Web by AJ Ashton of Development Seed

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
695
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
37
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Advanced Cartography for the Web

  1. 1. Advanced Cartography for the Web AJ Ashton – Development Seed
  2. 2. TODO● Overview of the tools & what they do● Basic design tips to keep in mind● Explore some specific design examples
  3. 3. Cartography Toolset Libre
  4. 4. TileMill
  5. 5. QuantumGIS
  6. 6. PostgreSQL + PostGIS
  7. 7. Inkscape
  8. 8. }
  9. 9. Design on the web:basic things to keep in mind
  10. 10. RGB lowers the barrier-to-entry to making ugly colors.
  11. 11. RGB lowers the barrier-to-entry to making ugly colors.
  12. 12. color: SpringGreen; color: Red; color: Yellow; color: DeepPink;color: Chartreuse;color: MediumBlue;
  13. 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. 14. Dont know what colors look good together? Steal from someone who does. kuler.adobe.com colourlovers.com
  15. 15. Pixels dont give you texture for free.
  16. 16. Keep your textures subtle.
  17. 17. Typefaces and font sizesthat make sense on paper
  18. 18. }
  19. 19. Digging into the toolbox
  20. 20. TileMill – why design with code?
  21. 21. Flexibility● #roads[motorway][zoom>10] {● ::casing {● line-color: @mw_casing;● line-width: 6;● }● ::fill {● line-color: @mw_fill;● line-width: 4;● }● }
  22. 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. 23. Variables & Color Functions● lighten(blue,25%);
  24. 24. Hijacking geospatial functions for design purposes.
  25. 25. The fadey-stripey thing
  26. 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. 27. Fancy marine labels
  28. 28. Abusing the Mapnikbuilding symbolizer
  29. 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. 30. Overview: Development Seed Headquarters Map Demo: j.mp/devseedhq
  31. 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. 32. Thanks! – @aj_ashtonDevelopmentSeed.org MapBox.com

×