Build a Real-Time Australian Emergency Map with JavaScrip...

I built a free API that aggregates real-time emergency data from all 8 Australian states. In this tutorial, I'll show you how to build a live emergency map using Leaflet.js and the EmergencyAPI.

What you'll build

A browser-based map showing active bushfires, floods, storms, and other emergencies across Australia. Colour-coded by event type, updating in real-time.

Prerequisites

An EmergencyAPI key (free, takes 30 seconds: emergencyapi.com/signup)
Basic HTML/JavaScript knowledge

Step 1: Get your API key

Step 2: Set up the HTML

Create an index.html file:

html
<!DOCTYPE html>
<html>
<head>
  <title>Australian Emergency Map</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <style>
    #map { height: 100vh; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="app.js"></script>
</body>
</html>

Step 3: Fetch incidents and render markers

Create an app.js file:

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: '&copy; 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(`<b>${props.title}</b><br>${props.eventType} | ${props.severity}`)
    .addTo(map);
  });
}

loadIncidents();
setInterval(loadIncidents, 60000);

Step 4: Open it

Open index.html in your browser. You should see active emergencies across Australia.

What's next?

Filter by state: add ?state=nsw to the API URL
Filter by type: add ?event_type=bushfire
Proximity search: use /incidents/nearby?lat=-33.9&lng=151.2&radius=50
Full docs: emergencyapi.com/docs
The free tier gives you 500 requests per day. If you need more, paid plans start at A$49/month.

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.

推荐订阅源

DEV Community