The United States Geological Survey (USGS) monitors and reports on earthquakes. They collect data and asses the impacts, hazards, and the cause and effects of earthquakes. By using the data collected from USGS and the use of Leaflet library, I was able to created a tool that allows users to visualize where earthquakes have taken place in the past 7 days, along with additional information.
There are 2 relevant folders which contains files and subfolders:
1. data:
• PB2002_boundaries.json (this file is required in order to rund the program)
2. static:
• css --> style.css
• js --> logic.js (this is where you will be able to find the lines of code)
To access the tool you can go to: https://dav5t.github.io/leaflet-challenge/
Alternatively you can download everything and open index.html
note: If you run in to CORS policy issues and have downloaded the files, you can one of the following options when using Visual Studio Code:
1. Right click on index.html and click "Open with server"
2. Open the terminal, make sure it's rooted to the same folder as your logic.js, type: python -m http.server" and click on the server link
The default setting when you open the tool is GrayScale map layer and earthquake overlay data. You can toggle between three map layers: GrayScale, Satellite, and Outdoor. For the overlay, you can choose one or both; Earthquake and Tectonic. You can also click on each circle marker and it will provide you the location, time, magnitude and depth of the earthquake.
Earthquake: https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php
Tectonic lines: https://github.com/fraxen/tectonicplates
1. Gradient Generator
https://colordesigner.io/gradient-generator
2. Interactive Choropleth Map
https://leafletjs.com/examples/choropleth/
3. JavaScript Question Mark (?) Operator Explained
https://builtin.com/software-engineering-perspectives/javascript-question-mark-operator
4. Maps for Leaflets
https://leaflet-extras.github.io/leaflet-providers/preview/
5. Using GeoJSON with Leaflet
https://leafletjs.com/examples/geojson/