Mapping_Earthquakes

An interactive map of Earthquakes; Use JavaScript's Leaflet library along with the Mapbox API to create visualizations of earthquake data form the U.S. Geological Survey

Overview of Project

This project will expand our JavaScript abilities and the D3 library to make an intuitive world guide. We will utilize GeoJSON; a JSON record explicitly intended to have geological data. We will explore geographical features such as points, which contain addresses and locations, like latitude and longitude coordinates. Linestrings contain facilitates for the limits of roads, interstates, travel courses, and structural plates. Furthermore, polygons which contain facilitate the limits of postal divisions, regions, nations, regions, and plots of land. We will likewise investigate non-spatial traits which are information free of all mathematical contemplations and bundled in the progressive design of a GeoJSON record. Utilizing our insight into JavaScript and the D3 library, we will cross and recover GeoJSON seismic tremor information and structural plate information to populate a geological guide. For this, we will likewise utilize the handout library and the Mapbox API. We should begin utilizing information from a GeoJSON record to populate a geological guide utilizing JavaScript and the D3 and pamphlet libraries

Follow below the goals for this project:

1. Objective 1: Add Tectonic Plate Data
2. Objective 2: Add Major Earthquake Data
3. Objective 3: Add an Additional Map

Resources

• Data Source: index.html, challenge_logic.js and style.css.
• Software & Data Tools: Visual Studio Code 1.63.2, Javascript ES6, D3 js.CSS, HTML5, Leaflet js and Chrome Browser Version 97.0.4692.71 (Official Build) (64-bit)

Results & Code

Objective 1: Add Tectonic Plate Data

• The tectonic plate data is added as a second layer group
• The tectonic plate data is added to the overlay object
• The d3.json() callback is working and does the following:
  • The tectonic plate data is passed to the geoJSON() layer
  • The geoJSON() layer adds color and width to the tectonic plate lines
  • The tectonic layer group variable is added to the map
• The earthquake data and tectonic plate data displayed on the map when the page loads

Tectonic Plate layer (Streets layer view):

Tectonic Plate and Earthquakes layer (Streets layer view):

Objective 2: Add Major Earthquake Data

• The major earthquake data is added as a third layer group
• The major earthquake data is added to the overlay object
• The d3.json() callback is working and does the following: (
  • Sets the color and diameter of each earthquake.
  • The major earthquake data is passed to the geoJSON() layer.
  • The geoJSON() layer creates a circle for each major earthquake, and adds a popup for each circle to display the magnitude and location of the earthquake
  • The major earthquake layer group variable is added to the map
• All the earthquake data and tectonic plate data are displayed on the map when the page loads and the datasets can be toggled on or off

Tectonic Plate, Earthquakes and major Earthquakes layer (Satellite layer view):

Objective 3: Add an Additional Map

• Create a third map tile layer and add to the overlay object
• Display all the earthquake data and tectonic plate data on the all maps of the webpage

Tectonic Plate, Earthquakes and major Earthquakes layer with marker and information such as Magnitude and Location (Dark layer view):

** Note **

In order to open the index.html, it is necessary open this file in a local host, such as Python server (python -m http.server) and also It is essential to have a file called config.js and an API Key inside this file.