Visualizing Data with Leaflet

Visualize Earthquake data to allow USGS to better educate the public and other government organizations (and hopefully secure more funding) on issues facing our planet.

View preview here: https://rb25s13.github.io/earthquake-data-map-js/

---

Tools, Languages, & Libraries Utilized

d3

Leaflet

jQuery

Bootstrap

OpenStreetMap API

Mapbox API

HTML/CSS

VS Code

Sources:

Earthquakes: https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php

Tectonic Plates: https://github.com/fraxen/tectonicplates

Contents:

    /static - folders for js and css
            /css - style.css for custom styles
            /js - logic.js: code for preview using openstreetmap w/o mapbox
            /img - screenshots for readme
    /Leaflet-Step-1 - mapbox map with Earthquake Markers
    /Leaflet-Step-2 - same as above + layer control and Tectonic Plate Lines

NOTE: config.js file containing mapbox API_KEY is needed to generate the maps in Step-1 and Step-2

    // API key
    const API_KEY = 'API key';

Preview: OpenStreetMap w/o Mapbox - no api needed

Step-1: All Earthquakes in the Last Month using Mapbox

• Color of cirle is based on the depth of the earthquake
• Radius of circle is based on the magnitude of the earthquake

Step-2: Step-1 with extra features

• Added Layer control
• Added different base maps to choose from
• Added Tectonic Plates layer