Leaflet Map of Earthquake Data

Maps self-updating recent earthquake data downloaded from the United States Geological Society (USGS) using Leaflet, and adds a layer helping viewers understand the relationship between earthquakes and the location of tectonic fault lines. Map features include a legend and pop-ups with additional information about particular earthquake events.

Github Repository

Self-updating API calls

Query USGS for recent earthquake data using D3’s JSON feature:

// Store our API endpoint inside queryUrl
var queryUrl = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_week.geojson";

// Perform a GET request to the query URL
d3.json(queryUrl).then(function(data) {
  
  // Once we get a response, send the data.features object to the createFeatures function
  //console.log(data.features)
  createFeatures(data.features);
});

Use Leaflet and Mapbox to draw map

function createMap(earthquakes) {
  // Define streetmap and darkmap layers
  var streetmap = 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/streets-v11",
      accessToken: API_KEY,
    }
  );

Build circles to represent earthquake events

Size and color of circles determined by magnitude and depth of events

    // Binding the SVG to data

    var circles = svg.selectAll("circle");

    var rValues = [20, 16, 12, 8, 4];

    circles
      .data(rValues)
      .enter()
      .append("circle")
      .attr("cy", function (d) {
        return d;
      })
      .attr("cx", 50)
      .attr("r", function (d) {
        return d;
      })
      .attr("stroke", "black")
      .attr("stroke-width", ".1")
      .attr("fill", function (d) {
        switch (d) {
          case 20:
            return "#ffffff";
          case 16:
            return "#c7ced3";
          case 12:
            return "#909fa8";
          case 8:
            return "#5d727f";
          case 4:
            return "#2a4858";
        }
      });