$30 off During Our Annual Pro Sale. View Details »

(GISDay 2018) Open Source Cartography: Blending Data and Design for the Next Generation of Online Maps

(GISDay 2018) Open Source Cartography: Blending Data and Design for the Next Generation of Online Maps

(note, some of these slides are animated GIFs in the original version)

Presented at SFU/UBC GIS Day in Vancouver, BC: https://www.lib.sfu.ca/find/other-materials/data-gis/gis/gis-events/gis-day

Alan McConchie

November 14, 2018
Tweet

More Decks by Alan McConchie

Other Decks in Technology

Transcript

  1. Open Source Cartography:
    Blending Data and Design for the
    Next Generation of Online Maps
    Alan McConchie, Stamen Design
    SFU / UBC GIS Day
    November 14, 2018
    @mappingmashups // @stamen
    #GISDay sta.mn / cbp

    View Slide

  2. Open Source aka "Free Software"

    View Slide

  3. "Think free as in free speech, not free beer."
    — Richard Stallman

    View Slide

  4. Just a few open source mapping
    tools and formats:
    QGIS PostGIS CartoCSS
    Leaflet OpenLayers TileMill
    D3.js GeoJSON OpenStreetMap
    MapboxGL Tangram
    Maptime t-shirt
    sta.mn / v32

    View Slide

  5. Tile renderer
    (Mapnik)
    Feature layers
    (CSV, GeoJSON,
    TopoJSON, KML)
    Leaflet
    (or OpenLayers)
    Tile cache / server
    (TileServer, TileStache,
    Tessera)
    Database
    (PostGIS)
    Raster tiles




    Browser
    (Firefox, Chrome,
    Safari, IE)
    Styling language
    (CartoCSS)
    Vector data tiles
    OpenGL / WebGL
    Map Renderers
    (MapboxGL, Tangram)
    D3.js
    javascript mapping libraries
    javascript mapping libraries
    {.js}
    {.js}
    (non-map
    charts)
    canvas
    svg
    Don't read this whole chart now!
    Learn more at "Anatomy of a Web Map"
    sta.mn / qhg

    View Slide

  6. Just a few companies with an
    open source business model:
    ⚰ R.I.P.

    View Slide

  7. PostGIS + CartoCSS
    What is
    really?

    View Slide

  8. PostGIS + CartoCSS
    What is
    really?
    Because tomorrow is
    #PostGISDay!

    View Slide

  9. View Slide

  10. View Slide

  11. American Panorama
    dsl.richmond.edu / panorama
    @americanpano

    View Slide

  12. An interactive atlas of American history
    Built on CARTO + d3.js
    Funded by the Mellon Foundation

    View Slide

  13. sta.mn / yw2

    View Slide

  14. sta.mn / yw2

    View Slide

  15. sta.mn / yw2

    View Slide

  16. sta.mn / yw2

    View Slide

  17. synced tables from
    Google Sheets
    GeoJSON
    D3 charts
    map tiles
    Leaflet markers,
    D3 overlays (svg + canvas)
    user interaction:
    react.js

    View Slide

  18. View Slide

  19. EPSG: 2163
    US National Atlas Equal-Area
    (Lambert Azimuthal)

    View Slide

  20. SELECT cartodb_id,
    ST_Transform(the_geom_webmercator, 2163)
    AS the_geom_webmercator, ...

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. MPG Ranch Raptor Map
    raptortracker.mpgranch.com

    View Slide

  26. View Slide

  27. raptor tracker
    sta.mn / 24k

    View Slide

  28. raptor tracker
    sta.mn / 24k

    View Slide

  29. raptor tracker
    sta.mn / 24k

    View Slide

  30. raptor tracker
    sta.mn / 24k

    View Slide

  31. View Slide

  32. View Slide

  33. railroads vs ladders

    View Slide

  34. bird wires: latitude over time
    sta.mn / cch

    View Slide

  35. Maps using Tilemill:
    Audubon climate change maps
    climate.audubon.org

    View Slide

  36. climate.audubon.org
    sta.mn / wf9

    View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. Maps using MapboxGL:
    Culture Compass
    (coming soon at cast-sf.org)

    View Slide

  41. Culture Compass

    coming soon: cast-sf.org

    View Slide

  42. Maps using MapboxGL:
    Superdiversity visualization
    with Max Planck Institute
    (coming soon)

    View Slide

  43. View Slide

  44. Maps using d3.js:
    Planet Labs
    sta.mn / nrq

    View Slide

  45. sta.mn / nrq

    View Slide

  46. View Slide

  47. View Slide

  48. Maps using three.js:
    Big Glass Mic
    vam.ac.uk / bigglassmic

    View Slide

  49. Big Glass Mic
    vam.ac.uk / bigglassmic

    View Slide

  50. Image: Tom Carden and Steve Coast, 2005
    OpenStreetMap

    View Slide

  51. OpenStreetMap

    View Slide


  52. OpenStreetMap: Every Line Ever
    sta.mn / rzx

    View Slide

  53. Volunteered Geographic Information:
    amateurs

    View Slide

  54. View Slide

  55. View Slide

  56. maps.stamen.com

    View Slide

  57. Stamen Toner
    maps.stamen.com

    View Slide

  58. !58

    View Slide

  59. !59

    View Slide

  60. !60

    View Slide

  61. Stamen Terrain
    maps.stamen.com

    View Slide

  62. View Slide

  63. View Slide

  64. Stamen Watercolor
    maps.stamen.com

    View Slide

  65. View Slide

  66. Watercolor process
    sta.mn / 622

    View Slide

  67. View Slide

  68. View Slide

  69. maps for dawdling
    not for navigation

    View Slide

  70. View Slide

  71. View Slide

  72. View Slide

  73. meetup.com / OpenStreetMap-Vancouver
    (show up to a meeting!)
    meetup.com / MaptimeYVR
    (you can get it started again!)
    Want to learn more?

    View Slide

  74. Thank you!
    @mappingmashups
    @stamen
    #GISDay sta.mn / cbp

    View Slide