1 44
100%
Actual Size
Fit Width
Fit Height
Fit Page
Automatic
Advanced Cartography for the Web AJ Ashton – Development Seed
Advanced Cartography for the Web
Embed Size (px)
344 x 292
429 x 357
514 x 422
599 x 487
DESCRIPTION
Advanced Cartography for the Web by AJ Ashton of Development Seed
Citation preview
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
LOAD MORE