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.
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";
}
});