Mapping Earthquakes with JS and APIs
In this project, we used URL for GeoJSON earthquake data, tectonic data and major earthquakes data to retrieve geographical coordinates and magnitudes of earthquakes for the last seven days. Then we have visualized the data on a map.
The aim of this project is to visually show the differences between the magnitudes of earthquakes all over the world for the last seven days.
- Data Source: GeoJSON Earthquake Data
- Software: Visual Studio 1.69.1
- HTML code: index.html
- JavaScript code: challenge_logic.js
- Style .css code: style.css
Using JavaScript and Leaflet.js we have created a map that has three styles:
- Streets View
- Satellite Streets View
- Dark View
Using the JavaScript and the D3.js library we have retrieved the coordinates and magnitudes of the earthquakes from the GeoJSON data of the last seven days. We have used Leaflet library to plot the data on a Mapbox map through an API request and created interactive circle markers for the earthquake data:
- We have color coded the circle markers and modified the radius of the circle based on each earthquake's magnitude.
- We have added a popup message for each earthquake data.
- And we have create a legend for the color range of earthquakes.
Following the same concept, we have retrieved major earthquakes data from the GeoJSON Summary Feed for M4.5+Earthquakes for the past 7 days and we have added them to the map.
Moreover, we have retrieved the Tectonic Plate Data from this GitHub repository and we have added them to the map and styled them.
The final map looks like Fig.1 below.
Figue 1 - Mapping earthquakes all over the world for the last seven days.
We have visually mapped the earthquakes, major earthquakes and tectonic plates all over the world for the last seven days.