Build a Real-Time Australian Emergency Map with JavaScript (Free API)

Source: Dev.to

Overview

This tutorial shows how to build a live emergency map of Australia using Leaflet.js and the free EmergencyAPI, which aggregates real‑time emergency data from all eight Australian states.

Prerequisites

• An EmergencyAPI key (free; sign up at , verify your email, and copy the key from the dashboard)
• Basic HTML/JavaScript knowledge
• Internet connection to load map tiles and API data

Project Structure

project/
├─ index.html
└─ app.js

index.html

  Australian Emergency Map
  
  
    #map { height: 100vh; width: 100%; }
  

  

  
  

app.js

const API_KEY = 'your_api_key_here';
const API_URL = 'https://emergencyapi.com/api/v1/incidents';

const map = L.map('map').setView([-28, 134], 5);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

const colours = {
  bushfire:   '#dc2626',
  flood:     '#2563eb',
  storm:     '#7c3aed',
  rescue:    '#f59e0b',
  earthquake:'#92400e',
  medical:   '#10b981',
  other:     '#6b7280',
};

async function loadIncidents() {
  const res = await fetch(API_URL, {
    headers: { 'Authorization': `Bearer ${API_KEY}` }
  });
  const data = await res.json();

  data.features.forEach(feature => {
    const [lng, lat] = feature.geometry.coordinates;
    const props = feature.properties;
    const colour = colours[props.eventType] || colours.other;

    L.circleMarker([lat, lng], {
      radius: 6,
      fillColor: colour,
      color: '#fff',
      weight: 1,
      fillOpacity: 0.8
    })
    .bindPopup(`**${props.title}**
${props.eventType} | ${props.severity}`)
    .addTo(map);
  });
}

// Initial load
loadIncidents();
// Refresh every minute
setInterval(loadIncidents, 60000);

Running the Map

1. Replace 'your_api_key_here' in app.js with the key obtained from the EmergencyAPI dashboard.
2. Open index.html in a web browser.
3. The map will display active emergencies across Australia, colour‑coded by event type.

Optional: Filter by State

Append a query string to the API URL, e.g.:

const API_URL = 'https://emergencyapi.com/api/v1/incidents?state=nsw';

Disclaimer

EmergencyAPI aggregates data from official Australian government emergency services. The data may be delayed or incomplete. Always refer to your state emergency service for safety‑critical decisions.