(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

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