Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

093f0811fe96f1185abccd1a73b049ab?s=128

Alan McConchie

November 16, 2017
Tweet

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
  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:

  7. PostGIS + CartoCSS What is really?

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

  26. MPG Ranch Raptor Map raptortracker.mpgranch.com

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

  29. raptor tracker sta.mn / 24k

  30. raptor tracker sta.mn / 24k

  31. raptor tracker sta.mn / 24k

  32. None
  33. None
  34. railroads vs ladders

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

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

  37. None
  38. None
  39. climate.audubon.org sta.mn / wf9

  40. None
  41. None
  42. None
  43. d3.js sta.mn / krr

  44. sta.mn / nrq

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

  48. OpenStreetMap

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

  50. Volunteered Geographic Information: amateurs

  51. None
  52. None
  53. maps.stamen.com

  54. Stamen Toner maps.stamen.com

  55. 55

  56. 56

  57. 57

  58. Stamen Terrain maps.stamen.com

  59. None
  60. None
  61. Stamen Watercolor maps.stamen.com

  62. None
  63. Watercolor process sta.mn / 622

  64. None
  65. None
  66. maps for dawdling not for navigation

  67. None
  68. None
  69. None
  70. Mapping buildings and parcels la.stamen.com

  71. Open Data la.stamen.com

  72. la.stamen.com

  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. North Sound OpenStreetMap meetup sta.mn / wx5

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