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

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. View Slide

56. View Slide

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