Maps - Boulder JS Meetup - August 2016

An introduction to maps on the web.

Transcript

1. Maps In Your .JS What You Should Know As A Web Developer Laura Steadman @adventuresteady Boulder JS, August 17, 2016
2. Our Path Tonight 1. Thinking About Purpose: Why do you want a map, anyway? 2. Understanding Components: What exactly is a “map” made of? 3. Surveying Your Options: How do you make maps with JS? 4. Let’s All Be Badasses: What are some cool things you can do? 5. Learn More: Where can you learn more?
3. Thinking About Purpose: Why Do You Want a Map, Anyway? - Maps are a type of data visualization that display spatial data. - There are lots of ways to display spatial data on the web. - Understanding what you want to convey to your audience can inform what it is you need to build.
4. Provide Directions
5. Show Analysis Results http://projects.fivethirtyeight.com/2016-election-forecast
6. Show Context, Look Cool http://stateofthemap.us
7. Tell a Story In an Interactive Way https://storymap.knightlab.com/examples/aryas-journey/
8. Understanding Components Map with confidence! What exactly is a map, anyway? What are the building blocks?
9. The 3 Pieces to A Web Map - Let’s Break It Down - Base Map (or base layer) - Data layer - UI interaction And a 4th to help you get it all done…
10. Rishi S. https://flic.kr/p/7DUMPR Base Map
11. Base Map
12. Base Map - Made of Tiles Image: https://en.wikipedia.org/wiki/Tiled_web_map http://wiki.openstreetmap.org/wiki/Tiles Raster (.png, .jpeg) Vector (newer, not widely used… yet)
13. Data Layer What are you telling a story about? What data do you want your audience to see and explore? Points, Lines, Polygons
14. UI Interactions - pan/zoom, popups, turning on/off layers
15. Surveying Your Options How Do You Make a Map with JavaScript?
16. You need a library! How do you combine a base map, data, and interactions with JavaScript to make your web map?
17. JS Mapping Libraries
18. Base Maps - How Do You Get One? - Library defaults (e.g., Google) - Variety of providers, many free - Roll your own!
19. A Few Base Map Providers Stamen.com Mapbox.com OpenStreetMap Google ESRI
20. Mapbox
21. Stamen
22. Make A Custom Base Map Mapbox Studio https://www.mapbox.com/mapbox-studio See their Gallery for examples: https://www.mapbox.com/gallery/ https://www.mapbox.com/blog/sketchy-maps
23. Be careful about where you get your base map from, and how well-maintained it is! Base Maps - A Caveat http://www.slate.com/articles/technology/future_tense/2016/08/the_open_source_community_stepped_in_after_maps_broke_across_the_internet.html
24. Demo Time! Base Maps with Google Adding Data With Leaflet
25. Data - Comes in a wide variety of formats (Shapefile, GeoJSON, JSON, ...) - Lots of tools to process it (ogr2ogr, QGIS)
26. Interactions - Your library will handle the basics! - Point pop-ups: usually just HTML - Many interactions are actually just event handlers that you’re used to (e.g., click events)
27. Let’s All Be Badasses Mapping Tools To Wow Your Cat
29. Heat Maps! - Leaflet Plugin (https://github.com/Leaflet/Leaflet.heat) - http://leaflet.github.io/Leaflet.heat/demo/draw.html
30. Watercolor Basemap by Stamen Cool Base Maps!
31. CARTO’s Torque.js https://github.com/CartoDB/torque Snowy Owl Example: https://steady.carto.com/viz/21540aa0-6b35-11e3-84de-3085a9a9563c/map https://steady.carto.com/viz/21540aa0-6b35-11e3-84de-3085a9a9563c/public_map
32. Turf.js - Add Analysis to Your Maps! Client-side or via Node.js http://turfjs.org/ https://www.mapbox.com/bites/00087/ https://www.mapbox.com/blog/coffee-with-turf/
33. Who Says You Need To Map in 2D? https://cesiumjs.org - WebGL 3D renderings https://cesiumjs.org/NewYork
34. Resources/ Learn More https://github.com/thesteady/mapping_examples Great Tutorials Leaflet - leafletjs.com Mapbox - mapbox.com Meetups! MapTime Boulder / Denver GeoSpatial Amateurs (Denver) Thanks! Twitter: @adventuresteady