Earthquake GeoJSON Leaflet Map

Project Overview

Interactive earthquake visualization powered with GeoJSON data from USGS and Leaflet.js to map each earthquake and magnitude that was recorded from the previous day. Further visual customization to the map can be seen in both 'style.css' and 'logic.js', with 'index.html' hosting those custom scripts for displaying our interactive earthquake visualization.

‍

GitHub Repository - Earthquake Leaflet Map

‍

Building Earthquake Map

// Function to create the earthquake map
function createMap(earthquakes) {

   // Create the tile layer for the map background
   let worldmap = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
   });
 
   // Create baseMaps object to hold worldmap layer
   let baseMaps = {
     "World Map": worldmap    };
 
   // Create overlayMaps object to hold earthquakes layer
   let earthquakesLayer = new L.LayerGroup();
   let overlayMaps = {
     "Earthquakes": earthquakesLayer
   };

   // Create the map object with options
   let map = L.map("map", {
       center: [20, 0],
       zoom: 2,
       layers: [worldmap, earthquakesLayer]
   });

   // Create layer control, pass it baseMaps and overlayMaps
   L.control.layers(baseMaps, overlayMaps, {
       collapsed: false
   }).addTo(map); // Add the layer control to the map

Creating Markers

Marker Color = Earthquake Depth‍

function getColor(depth) {
       return depth >= 90 ? '#660000' :
              depth >= 70 ? '#b30000' :
              depth >= 50 ? '#cc0000' :
              depth >= 30 ? '#ff3300' :
              depth >= 10 ? '#ff6600' :
              '#ffcc66';
   }

Marker Size = Earthquake Magnitude

function getRadius(magnitude) {
       return magnitude >= 7.5 ? magnitude * 50000 :
              magnitude >= 6.5 ? magnitude * 45000 :
              magnitude >= 5.5 ? magnitude * 40000 :
              magnitude >= 4.5 ? magnitude * 30000 :
              magnitude >= 3.5 ? magnitude * 15000 :
              magnitude >= 2.5 ? magnitude * 10000 :
              magnitude >= 1.5 ? magnitude * 5000 :
              magnitude * 1000;
   }

// Loop through earthquakes and create markers
   earthquakes.forEach(earthquake => {
       let coords = earthquake.geometry.coordinates;
       let lat = coords[1];
       let lng = coords[0];
       let depth = coords[2];
       let mag = earthquake.properties.mag;

       // Create circle marker for each earthquake
       let marker = L.circle([lat, lng], {
           fillOpacity: 0.75,
           color: getColor(depth),
           fillColor: getColor(depth),
           radius: getRadius(mag)
       }).bindPopup(`
           <h3>${earthquake.properties.place}</h3>
           <hr>
           <p>Magnitude: ${mag}</p>
           <p>Depth: ${depth} km</p>
           <p>Time: ${new Date(earthquake.properties.time)}</p>
       `);

       // Add marker to earthquakes layer
       earthquakesLayer.addLayer(marker);
   });

‍

‍

GitHub Repository