The purpose of this analysis is to use JavaScript's Leaflet library along with the Mapbox API to create visualizations of GeoJSON earthquake data from the U.S. Geological Survey. The user will be able to select from 3 different map styles, street view, satellite view, and dark view. The user will also be able to toggle earthquakes in the past 7 days, tectonic plate lines, and major earthquake (magnitude greater than 4.5) locations.

• Software:

  • Visual Studio Code 1.61.2
  • HTML/CSS
  • JavaScript
    • Leaflet library
    • D3.js library
  • Mapbox API

• Data sources:

  • GeoJSON data
    • Earthquakes Past 7 Days
    • Earthquakes with a magnitude greater than 4.5
    • Tectonic Plate

• The interactive features

  • Earthquakes with tectonic plates

    

  • Major Earthquakes with tectonic plates

    

  • Mapbox Styles

    • Streets Style:

      let streets = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        accessToken: API_KEY
      });
      

      

    • Satellite Streets Style:

      let satelliteStreets = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        accessToken: API_KEY
      });
      

      

    • Dark Style:

      let dark = L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/dark-v10/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        accessToken: API_KEY
      });
      

      

• This earthquakes map was built with earthquake data from around the world which came from the last seven days of earthquake GeoJSON data.
• On the map,
  • The magnitude and the location of each earthquake will be shown in a popup marker.
  • The diameter of the markers for each earthquake will reflect the magnitude of the earthquakes in their size and color.
  • Earthquakes with higher magnitudes will appear larger and darker in color with a legend providing the context for the map data.
  • Finally, to illustrate the relationship between the location and frequency of seismic activity and tectonic plates, I added fault lines in the map.