This content originally appeared on DEV Community and was authored by Oki BAYU

Overview

Indonesia is one of the most earthquake-prone countries as it is located within the Pacific Ring of Fire . Therefore, it is crucial to receive earthquake information quickly and accurately. BMKG (Indonesian Meteorological, Climatological, and Geophysical Agency) provides real-time earthquake data that we can use to build an earthquake monitoring application.

In this article, we will create a simple application to displays the latest earthquake data from BMKG’s API and a list of the most recent 15 earthquakes with a magnitude greater than 5.0. The interactive map is powered by Leaflet.

Features

Latest Earthquake Display:

Shows the most recent earthquake location with a blinking marker.
Provides details such as region, magnitude, depth, date, and time.

List of Recent Significant Earthquakes:

Displays the latest 15 earthquakes with a magnitude greater than 5.0.
Markers are shown on the map, and clicking them reveals earthquake details.

Interactive Map:

Uses OpenStreetMap as the map layer.
Markers display earthquake information on click.
The most recent earthquake marker blinks to draw attention.

Implementation:

Step 1: HTML Structure

First, we create the HTML structure as the foundation of our application. Here’s an example code:

<body>
  <h1>BMKG Latest Earthquake Data</h1>
  <p>Displays the latest earthquake and the list of 15 recent M 5.0+ earthquakes.</p>
  <div id="map" style="width: 100%; height: 500px;"></div>
</body>

Step 2: Styling with CSS

To make the appearance more attractive, we use CSS to create a simple yet informative design.

blink {
  animation: blink-animation 1s infinite;
  color: red;
  font-weight: bold;
}

@keyframes blink-animation {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.blink-marker {
  background-color: red;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: blink-animation 1s infinite;
  border: 2px solid yellow;
}

Step 3: Fetching Real-Time Data with JavaScript

To retrieve real-time earthquake data from BMKG’s API. We also utilize Leaflet to display an interactive map with the earthquake’s location. Here’s how to use JavaScript to fetch the data:

// Import Leaflet from CDN
const leafletCSS = document.createElement("link");
leafletCSS.rel = "stylesheet";
leafletCSS.href = "https://unpkg.com/leaflet@1.7.1/dist/leaflet.css";
document.head.appendChild(leafletCSS);

const leafletScript = document.createElement("script");
leafletScript.src = "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js";
leafletScript.onload = initMap;
document.body.appendChild(leafletScript);

// Function to convert coordinates from BMKG format
function parseCoordinates(coord) {
  const direction = coord.slice(-2);
  const value = parseFloat(coord.slice(0, -2));
  return (direction === "LS" || direction === "BB") ? -value : value;
}

// Initialize Map after Leaflet is loaded
function initMap() {
  fetch("https://data.bmkg.go.id/DataMKG/TEWS/autogempa.json")
    .then(res => res.json())
    .then(latestData => {
      const latest = latestData.Infogempa.gempa;
      const lat = parseCoordinates(latest.Lintang);
      const lon = parseCoordinates(latest.Bujur);

      // Map Initialization
      const map = L.map("map").setView([lat, lon], 5);

      // Adding OpenStreetMap Layer
      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: '© OpenStreetMap contributors'
      }).addTo(map);

      // Blinking Marker for the Latest Earthquake
      const blinkIcon = L.divIcon({
        className: "blink-marker",
        iconSize: [20, 20]
      });

      const latestMarker = L.marker([lat, lon], { icon: blinkIcon }).addTo(map);
      latestMarker.bindPopup(`
        <strong>🌟 Latest Earthquake 🌟</strong><br>
        Region: ${latest.Wilayah}<br>
        Magnitude: ${latest.Magnitude}<br>
        Depth: ${latest.Kedalaman}<br>
        Time: ${latest.Tanggal} ${latest.Jam}
      `);

      // Fetching Recent Earthquakes (Magnitude > 5.0)
      fetch("https://data.bmkg.go.id/DataMKG/TEWS/gempaterkini.json")
        .then(res => res.json())
        .then(recentData => {
          recentData.Infogempa.gempa.forEach(quake => {
            const lat = parseCoordinates(quake.Lintang);
            const lon = parseCoordinates(quake.Bujur);
            const magnitude = parseFloat(quake.Magnitude);

            if (magnitude > 5.0) {
              const marker = L.marker([lat, lon]).addTo(map);
              marker.bindPopup(`
                <strong>${quake.Wilayah}</strong><br>
                Magnitude: ${quake.Magnitude}<br>
                Depth: ${quake.Kedalaman}<br>
                Time: ${quake.Tanggal} ${quake.Jam}
              `);
            }
          });
        })
        .catch(error => console.error("Failed to fetch recent earthquakes:", error));
    })
    .catch(error => console.error("Failed to fetch the latest earthquake:", error));
}

Conclusion

By leveraging data from BMKG and utilizing HTML, CSS, and JavaScript, we can create a simple application to display real-time earthquake information. This application is useful for monitoring seismic activity and raising awareness about potential earthquakes.

You can view the real-time DEMO (in Bahasa) of the application directly below:

I hope this article helps you understand how to build a real-time earthquake monitoring app easily and efficiently!

Happy coding!