Advanced Cartography for the Web by AJ Ashton of Development Seed

1. Advanced Cartography
for the Web
AJ Ashton – Development Seed

5. TODO
● Overview of the tools & what they do
● Basic design tips to keep in mind
● Explore some specific design examples

6. Cartography Toolset Libre

7. TileMill

8. QuantumGIS

9. PostgreSQL + PostGIS

10. Inkscape

11. }

12. Design on the web:
basic things to keep in mind

13. RGB lowers the barrier-to-entry
to making ugly colors.

14. RGB lowers the barrier-to-entry
to making ugly colors.

15. color: 'SpringGreen';
color: 'Red';
color: 'Yellow';
color: 'DeepPink';
color: 'Chartreuse';
color: 'MediumBlue';

16. 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

17. Don't know what colors look good together?
Steal from someone who does.
kuler.adobe.com colourlovers.com

18. Pixels don't give you
texture for free.

19. Keep your textures subtle.

20. Typefaces and font sizes
that make sense on paper

21. }

22. Digging into the toolbox

23. TileMill – why design with code?

24. Flexibility
●
#roads[motorway][zoom>10] {
●
::casing {
●
line-color: @mw_casing;
●
line-width: 6;
●
}
●
::fill {
●
line-color: @mw_fill;
●
line-width: 4;
●
}
●
}

25. 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;
●
}
●
}

26. Variables & Color Functions
● lighten(blue,25%);

27. Hijacking geospatial functions
for design purposes.

28. The fadey-stripey thing

31. ● #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; }

32. Fancy marine labels

35. Abusing the Mapnik
building symbolizer

36. ● #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; }
● …
●

38. Overview: Development Seed
Headquarters Map
Demo: j.mp/devseedhq

41. 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);
●
}
●
}

44. Thanks!
– @aj_ashton
DevelopmentSeed.org
MapBox.com