saulobr88 / earthquakes-mapper

"Earthquakes Mapper" was created using React with no backend persistence. Users can view earthquakes from around the world on a Google Map and filter based on specific times and earthquake magnitude. Earthquake data from USGS.

Earthquakes Mapper 🗺

React App without backend persistence. Users can view earthquakes from around the world on a Google map and filter based on specific times and earthquake magnitude. Earthquake information is from the USGS API.

Components

it is fairly simple React Web App. The components are EarthquakesContainer, which has all other components as children. The children are EarthquakesForm with EarthquakesMap. EarthquakesMap is a implementation of Google Map, with Markers and InfoWindow, which is the information that is displayed when a user clicks on the earthquake icon on the map.

EarthquakesContainer makes use of the google-maps-react component. For the map is utilized a terrain Google Map, Markers, PopUps and a Heatmap layer. Google Maps API documentation here.

Each earthquake data point the map receives is plotted on the map based on its coordinates, weighted (for Heatmap) based on its magnitude, and given a title (for popup).

Services

Services holds the fetch requests to the USGS API. There fetchQuakes (which returns all earthquakes for last 30 days) and searchQuakes (which returns all earthquakes that meet user-specified criteria) functions. The results of the fetch requests are stored in the quakes state in the EarthquakesContainer.

Live

To see this application live, access here

Screenshots

Original Autor

Matthew Thorry