Advanced CartoCSS Techniques

CartoCSS is becoming an ever more popular – and ever more powerful – tool for cartographic and data styling. In this talk, Stamen designers and technologists will present some tips and tricks to make your next design sing. Tips and tricks covered include, but will not be limited to: pixelation, use of dingbat fonts for texture and markers, post-facto label adjustment, alternate uses for text symbolization, where to find and use entropy, blending, and geometry manipulation.

Transcript

1. Advanced CartoCSS Tricks Stamen Stamen Design! Seth Fitzsimmons, Alan McConchie and Kate Watkins
2. Maps with distinct personalities
3. Pinterest Goal: Playful, handcrafted
11. Label Clippin
12. Approach #1: buffering Map { buffer-size: 128; }
13. Approach #2: meta tiling
15. Filter Labels by Length! ! ! [name=~'^.{12,}$'] { text-name: ''; }
18. Map { font-directory: url("fonts/"); } ! #place_label { text-face-name: "Helvetica Medium"; } Custom Fonts
21. text-line-spacing: -6; text-character- spacing: -3; text-halo-radius: 2; text-halo-fill: black; text-fill: transparent; ! ! Leading and Kerning
24. #state_label { [name='California'] { text-orientation: -44; text-size: 20; } } Position Overrides
26. Entropy and Labeling #place_label { text-orientation: [osm_id] % 3 - 1.5; ! [osm_id<0] { text-orientation: ([osm_id] * -1) % 3 - 1.5; } }
27. Textures
29. Map { background-image: url("texture.png"); } ! #landuse[type='park'] { polygon-fill: #c3e0b6; comp-op: multiply; } Texturing
31. #water { ::shadow { polygon-fill: lighten(#444, 1%); } ! ::fill { polygon-fill: #fff; comp-op: soft-light; image-filters: agg-stack-blur(10,10); } ! ::background { polygon-pattern-file: url("images/bg.png"); comp-op: hard-light; } } Drop Shadows
32. Parks Conservancy Goal: Get people to the Parks!
35. Shield and Marker trick
37. shield-unlock-image: true; shield-fill: #333; shield-text-dx: 0.1; shield-wrap-width: 48; shield-face-name: "Frutiger LT 45 Light Bold"; shield-file: url("images/ cafe_36x18px_buffer.svg"); ! shield-dx: -9; shield-size: 12; shield-text-dy: -14; ! marker-file: url("images/ cafe_36x18px_buffer.svg"); marker-transform: "translate(-9)”; ! Shields and Markers
39. [type='Overlook'] { [orientation=15] { marker-file: url("images/ overlook2_36x18px_invert_buffer_15.svg"); } [orientation=45] { marker-file: url("images/ overlook2_36x18px_invert_buffer_45.svg"); } ... ! Marker Transformations
40. Symbol Fonts and! Unicode Characters
41. Symbol Fonts and! Unicode Characters #place_label { text-name: '\x272a' + [undefined]; // star }
42. Map Scraps
43. display: none; // text text-name: ‘'; // will still populate the collision cache text-fill: transparent; ! // lines line-width: 0; ! // polygons polygon-opacity: 0; ! // markers marker-width: 0; !
45. polygon-pattern-file: url("dot.png"); polygon-pattern-alignment: global; + = polygon-fill: #86c250;
53. Thank you @mojodna! @mappingmashups! @kateyw