(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

093f0811fe96f1185abccd1a73b049ab?s=128

Alan McConchie

November 14, 2018
Tweet

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
  2. Open Source aka "Free Software"

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

    Richard Stallman
  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
  5. Tile renderer (Mapnik) Feature layers (CSV, GeoJSON, TopoJSON, KML) Leaflet

    (or OpenLayers) Tile cache / server (TileServer, TileStache, Tessera) Database (PostGIS) Raster tiles <HTML> <javascript> <css> </HTML> 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
  6. Just a few companies with an open source business model:

    ⚰ R.I.P.
  7. PostGIS + CartoCSS What is really?

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

  9. None
  10. None
  11. American Panorama dsl.richmond.edu / panorama @americanpano

  12. An interactive atlas of American history Built on CARTO +

    d3.js Funded by the Mellon Foundation
  13. sta.mn / yw2

  14. sta.mn / yw2

  15. sta.mn / yw2

  16. sta.mn / yw2

  17. synced tables from Google Sheets GeoJSON D3 charts map tiles

    Leaflet markers, D3 overlays (svg + canvas) user interaction: react.js
  18. None
  19. EPSG: 2163 US National Atlas Equal-Area (Lambert Azimuthal)

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

  21. None
  22. None
  23. None
  24. None
  25. MPG Ranch Raptor Map raptortracker.mpgranch.com

  26. None
  27. raptor tracker sta.mn / 24k

  28. raptor tracker sta.mn / 24k

  29. raptor tracker sta.mn / 24k

  30. raptor tracker sta.mn / 24k

  31. None
  32. None
  33. railroads vs ladders

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

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

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

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

  41. Culture Compass
 coming soon: cast-sf.org

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

    soon)
  43. None
  44. Maps using d3.js: Planet Labs sta.mn / nrq

  45. sta.mn / nrq

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

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

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

  51. OpenStreetMap

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

  53. Volunteered Geographic Information: amateurs

  54. None
  55. None
  56. maps.stamen.com

  57. Stamen Toner maps.stamen.com

  58. !58

  59. !59

  60. !60

  61. Stamen Terrain maps.stamen.com

  62. None
  63. None
  64. Stamen Watercolor maps.stamen.com

  65. None
  66. Watercolor process sta.mn / 622

  67. None
  68. None
  69. maps for dawdling not for navigation

  70. None
  71. None
  72. None
  73. meetup.com / OpenStreetMap-Vancouver (show up to a meeting!) meetup.com /

    MaptimeYVR (you can get it started again!) Want to learn more?
  74. Thank you! @mappingmashups @stamen #GISDay sta.mn / cbp