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

Open Source Cartography: Blending Data and Design for the Next Generation of Online Maps

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)

Video: https://vimeo.com/245809301

Presented at:
Huxley College Speaker Series,
Western Washington University
November 16, 2017
#PostGISDay

Details: https://huxley.wwu.edu/blog/huxley-college/huxley-speaker-series-mcconchie

Alan McConchie

November 16, 2017
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
    Huxley College Speaker Series,
    Western Washington University
    November 16, 2017
    @mappingmashups // @stamen
    #PostGISDay sta.mn / vrx

    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:

    View Slide

  7. PostGIS + CartoCSS
    What is
    really?

    View Slide

  8. PostGIS + CartoCSS
    What is
    really?
    Because it's
    #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. sta.mn / yw2

    View Slide

  26. MPG Ranch Raptor Map
    raptortracker.mpgranch.com

    View Slide

  27. 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. raptor tracker
    sta.mn / 24k

    View Slide

  32. View Slide

  33. View Slide

  34. railroads vs ladders

    View Slide

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

    View Slide

  36. sealevel.climatecentral.org
    sta.mn / 7bh

    View Slide

  37. View Slide

  38. View Slide

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

    View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. d3.js
    sta.mn / krr

    View Slide

  44. sta.mn / nrq

    View Slide

  45. View Slide

  46. View Slide

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

    View Slide

  48. OpenStreetMap

    View Slide


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

    View Slide

  50. Volunteered Geographic Information:
    amateurs

    View Slide

  51. View Slide

  52. View Slide

  53. maps.stamen.com

    View Slide

  54. Stamen Toner
    maps.stamen.com

    View Slide

  55. 55

    View Slide

  56. 56

    View Slide

  57. 57

    View Slide

  58. Stamen Terrain
    maps.stamen.com

    View Slide

  59. View Slide

  60. View Slide

  61. Stamen Watercolor
    maps.stamen.com

    View Slide

  62. View Slide

  63. Watercolor process
    sta.mn / 622

    View Slide

  64. View Slide

  65. View Slide

  66. maps for dawdling
    not for navigation

    View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. Mapping buildings and parcels
    la.stamen.com

    View Slide

  71. Open Data
    la.stamen.com

    View Slide

  72. la.stamen.com

    View Slide

  73. View Slide

  74. View Slide

  75. View Slide

  76. View Slide

  77. View Slide

  78. View Slide

  79. View Slide

  80. View Slide

  81. View Slide

  82. North Sound OpenStreetMap meetup
    sta.mn / wx5

    View Slide

  83. Thank you!
    @mappingmashups
    @stamen
    #PostGISDay sta.mn / vrx

    View Slide