The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a real-time map with public data

Written by

Bernardo Palos

in

Building a real-time map with public data involves integrating mapping libraries (like Leaflet or Google Maps) with live data sources (e.g., government APIs, transport data, weather, or IoT feeds). Below is a step-by-step breakdown for building a simple real-time web map using JavaScript, Leaflet.js, and a public data API (example: real-time earthquake data from USGS).

1. Project Setup

Create an HTML file and include Leaflet:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Real-Time Public Data Map</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map {
      height: 100vh;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="app.js"></script>
</body>
</html>

2. JavaScript (Real-Time Data Fetch + Map)

Create a file named app.js:

javascript
const map = L.map('map').setView([20, 0], 2); // World view

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

// Function to fetch real-time data from USGS (earthquakes in past hour)
async function fetchData() {
  const response = await fetch('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson');
  const data = await response.json();

  // Clear existing layers
  if (window.earthquakeLayer) {
    map.removeLayer(window.earthquakeLayer);
  }

  // Create a new geoJSON layer
  window.earthquakeLayer = L.geoJSON(data, {
    pointToLayer: (feature, latlng) => {
      const magnitude = feature.properties.mag || 0;
      const color = magnitude > 5 ? 'red' : magnitude > 3 ? 'orange' : 'yellow';
      return L.circleMarker(latlng, {
        radius: magnitude * 2,
        fillColor: color,
        color: '#000',
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
      });
    },
    onEachFeature: (feature, layer) => {
      const { place, mag, time, url } = feature.properties;
      layer.bindPopup(
        `<strong>${place}</strong><br>Magnitude: ${mag}<br>Time: ${new Date(time).toLocaleString()}<br><a href="${url}" target="_blank">More Info</a>`
      );
    }
  }).addTo(map);
}

// Fetch data every minute
fetchData();
setInterval(fetchData, 60000);

3. Optional Features to Add

  • Legend: Show what colors represent different magnitudes.

  • Filters: Add dropdowns to show only certain regions or magnitudes.

  • Data Toggle: Allow user to switch between datasets (e.g., weather, traffic).

  • WebSocket Integration: For APIs that support push data (e.g., transport data feeds).

4. Example Public APIs for Real-Time Maps

5. Deployment

Host your project with:

  • GitHub Pages (free static hosting)

  • Netlify / Vercel for automatic deployments from a repo

  • Custom server for advanced needs (Node.js + Express for backend aggregation)

This setup provides a lightweight, client-side real-time map with data refresh capabilities. You can expand it by integrating backend logic, WebSockets, and complex filtering for large-scale or enterprise-grade solutions.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About