Skip to content

Latest commit

 

History

History
9 lines (5 loc) · 1.92 KB

README.md

File metadata and controls

9 lines (5 loc) · 1.92 KB

This challenge was set up to help the USGS visualize their earthquake data. Earthquake data was taken from the USGS GeoJSON page (https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php). Specifically, the data for all earthquakes over the past 7 days was the dataset that was chosen for visualization. Leaflet for Javascript, CSS, HTML and Mapbox (https://www.mapbox.com/maps/) were used to create the map visualization.

In "Leaflet-Step-1", the earthquake data in GeoJSON format was accessed using Leaflet to plot all of the earthquakes based on the latitude and longitude recorded for each earthquake. The markers used to plot each earthquake were sized according to the magnitude of each earthquake (higher magnitudes being larger) and the color scale of the markers was set according to the depth of the earthquake. The color scale is defined by the legend on the visualization. Additionally, when any marker is clicked, a popup appears with more information about the location of the earthquake, the date/time and the magnitude. The javascript files are found in the "static" folder along with the css. To run the application, a mapbox API key should be posted in the config.js file.

In "Leaflet-Step-2", additional layers were added. The same earthquake data and markers were used, but a satellite map, outdoors map, and grayscale map are all base map layer choices in the visualization. One base layer can be selected using the layer controls. Additionally, data for the tectonic plates was used to create visible outlines in a "Tectonic Plates" map layer that may be toggled on or off using layer controls. Tectonic plate data was obtained from: https://github.com/fraxen/tectonicplates. The earthquake markers can also be toggled on or off. The javascript files are found in the "static" folder along with the css. To run the application, a mapbox API key should be posted in the config.js file.