Advanced CartoCSS Techniques

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.

A0b49382b6dcd9dd4602c3088717724e?s=128

Seth Fitzsimmons

April 13, 2014
Tweet

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

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. Label Clippin

  12. Approach #1: buffering Map { buffer-size: 128; }

  13. Approach #2: meta tiling

  14. None
  15. Filter Labels by Length! ! ! [name=~'^.{12,}$'] { text-name: '';

    }
  16. None
  17. None
  18. Map { font-directory: url("fonts/"); } ! #place_label { text-face-name: "Helvetica

    Medium"; } Custom Fonts
  19. None
  20. None
  21. text-line-spacing: -6; text-character- spacing: -3; text-halo-radius: 2; text-halo-fill: black; text-fill:

    transparent; ! ! Leading and Kerning
  22. None
  23. None
  24. #state_label { [name='California'] { text-orientation: -44; text-size: 20; } }

    Position Overrides
  25. None
  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

  28. None
  29. Map { background-image: url("texture.png"); } ! #landuse[type='park'] { polygon-fill: #c3e0b6;

    comp-op: multiply; } Texturing
  30. None
  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!

  33. None
  34. None
  35. Shield and Marker trick

  36. None
  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
  38. None
  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; !
  44. None
  45. polygon-pattern-file: url("dot.png"); polygon-pattern-alignment: global; + = polygon-fill: #86c250;

  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. Thank you @mojodna! @mappingmashups! @kateyw