Mapping Earthquake Data

Visualizing United States Geological Survey (USGS) data using Leaflet and Mapbox, in JavaScript, HTML/CSS.

Part One:

Data selection

• GeoJson data from the USGS Earthquake Hazards Program
  • All Earthquakes from the past 30 days
  • updated every minute

HTML/CSS

• brought in the necessary script tags to html for leaflet, d3, and the config file with Mapbox API key
• css for sizing map and styling legend

JavaScript

• Leaflet and Mapbox for rendering maps, checking the console to confirm data is called with d3

var myMap = L.map("map", {
  center: [
    40.79004113996794, -111.97816943898866
  ],
  zoom: 5,
});

// map layer
L.tileLayer("https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", {
      attribution: "© <a href='https://www.mapbox.com/about/maps/'>Mapbox</a> © <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> <strong><a href='https://www.mapbox.com/map-feedback/' target='_blank'>Improve this map</a></strong>",
      tileSize: 512,
      maxZoom: 18,
      zoomOffset: -1,
      id: "mapbox/light-v10",
      accessToken: API_key
    }).addTo(myMap);

// d3 for fetching earthquake geoJson data    
d3.json(geoJson).then(data => {
    //console.log(data);
    var earthquakes = data.features;
    //console.log(earthquakes)

Map Result

• circle markers correlate to magnitude of earthquake in color and size
• legend for color reference to magnitude
• popup on any marker for further information

Light map with Earthquakes	Popup on markers

Part Two:

Adding a Second Dataset

• Rendered Earthquake Data
• Added Data on Tectonic Plates, downloaded from Hugo Ahlenius, with Corey Sterling given credit for the GeoJson data.

JavaScript

• organized code for additional map layers with a control for the user to select the map and data they'd like to view

var quakesLayer = L.layerGroup();
var platesLayer = L.layerGroup();

// Define an overlayMaps object to hold layers for earthquakes and techtonic plates
var overlayMaps = {
  Earthquakes: quakesLayer,
  Plates: platesLayer
}

// add control for layers that is always visible (no collapse)
L.control.layers(baseMaps, overlayMaps, {
    collapsed: false,
}).addTo(myMap)

Map Result

Light map with Earthquakes and Plates	Satellite map with Plates
Outdoors map with Earthquakes and Plates	Light map with Earthquakes and Popup