Building Maps with Impact on React and the JAMstack

We’ll talk about the technical challenges we face building maps and how the JAMstack has helped with that process. Attendees can learn how the technology we use every day can help save lives as well as a brief overview of the Javascript libraries used to render maps in a browser such as React and Leaflet. Maps are a powerful tool that provide much more than we take for granted and can help people understand another powerful use case of the tools they work with everyday.

Colby Fayock is a Senior Front End Engineer and UX Designer at Element 84 in Alexandria, VA. Some of the projects Colby and his team have worked on include NASA and commercial satellite mapping interfaces, as well as helping first responders with Disaster Response solutions.

Transcript

1. Building Maps with Impact on React and the JAMstack
2. Colby Fayock Sr UX & Front End Engineer @colbyfayock
10. Where does this data come from?
11. Scientists Analysts
12. Technology
14. Satellites High resolution imagery of Earth
19. Downtown Alexandria, VA May 2019
20. You!
22. Border of South Sudan / Ethiopia
23. More than driving directions...
24. Saving the world. Climate Change Disaster Response Farming Public Health Tons of other Scientific Research
25. Tropical Cyclone Idai March 2019
26. Active Fires Jan 8, 2020
30. https://maps.redcross.org https://www.hotosm.org/ https://www.hotosm.org/updates/interactive-maps/ https://www.ers.usda.gov/data-products/food- access-research-atlas/go-to-the-atlas.aspx Food Access Humanitarian Aid (Disasters, Refugees, etc) Weather, Disasters https://worldview.earthdata.nasa.gov/ https://firms.modaps.eosdis.nasa.gov/map/ http://maps.who.int/mapgallery/ https://maps.who.int/airpollution/ https://earthquake.usgs.gov/earthquakes/map/ https://www.usgs.gov/products/maps/topo-maps Earthquakes, Topography Air Pollution, Biological Threats, etc Study of Earth Imagery & Much More
31. How does this work?
32. JAMstack Javascript Markup API
34. JAMstack Javascript Markup Basemap Overlays Datapoints API
35. APIs Javascript Markup
39. Div ID Coordinates Zoom Initializing the Map
40. Tile Layer URL Attribution Rendering the Map
41. Adding a Marker Coordinates Marker Content
45. Component Coordinates Zoom Initializing the Map
46. Tile Layer URL Attribution Rendering the Map
47. Adding a Marker Coordinates Marker Content Component
49. ngx-leaflet Vue Leaflet
54. APIs ✓ Javascript Markup
55. Browser Basemap Overlays Mounting Point Data Data Data
56. Browser Basemap Overlays Mounting Point Data Data <div id=”mymap” /> OpenStreetMap, MODIS Terra & Aqua High res imagery, Heatmaps, Coastlines Active fires, evacuation zone High Res Imagery Data
57. MODIS Aqua – California “Campfire” Wildfires Basemap
58. MODIS Aqua – California “Campfire” Wildfires
59. Blurry MODIS Aqua with tile from DigitalGlobe’s Open Data Program Overlays
61. MODIS Aqua with VIIRS fire datapoint layer Data
66. ✓ APIs ✓ Javascript Markup
67. Create React App
69. What we can build...
70. Disaster Response
73. Understands UI Ready to operate Rapid response < 15 minutes
75. Disaster Response Community data Stored locally Synced to cloud
76. In-situ drone imagery Disaster Response
78. What makes this impactful?
79. Satellite Tasking
82. Imagery & metadata Collected by satellites Satellite Tasking
84. FilmDrop
87. What makes this impactful?
88. Road Trip
90. summer-road-trip.netlify.com
98. What makes this impactful?
99. What we you can build.
100. Gatsby Starter Leaflet
101. npm gatsby
103. Summer Road Trip Starter & Tutorial
105. Get Involved
106. State of the map
107. OpenStreetMap
113. How do you use maps?
114. Colby Fayock Sr UX & Front End Engineer @colbyfayock Thank You!