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