Tutorial

Build a Real-Time Bushfire Map with Leaflet

This tutorial walks through building an interactive map that shows live Australian emergency incidents using Leaflet.js and the EmergencyAPI. By the end, you will have a map with colour-coded markers by warning level, popups with incident details, and auto-refresh every 60 seconds.

Time: ~15 minutes
Requirements: a free EmergencyAPI key and a text editor

What You Will Build

A single HTML page with an interactive map of Australia showing:

Live emergency incidents as circle markers
Colour-coded by warning level (red for emergency warning, orange for watch and act, blue for advice, grey for active)
Click any marker to see incident title, type, location, and last update time
Auto-refreshes every 60 seconds without page reload
Filter by state using URL parameters

No build tools, no npm, no framework. Just HTML, CSS, and JavaScript loaded from CDN.

Step 1: Get Your API Key

Sign up for a free EmergencyAPI account. Once logged in, go to your dashboard and copy your API key. The free tier gives you 5,000 calls a month, which is plenty for building and testing a map. For a public map with steady traffic, see the paid plans.

Because this map runs the key in browser JavaScript, restrict the key to your own site before you go live. In the dashboard, open the key's Origins editor and add your site's origin (for example https://yoursite.com.au). The key then only works when called from a browser on that site, so it is useless if someone copies it from your page source. You can add more origins later, and server-side calls are never affected.

Step 2: Create the HTML File

Create a file called bushfire-map.html and paste the following. This sets up a full-page map with Leaflet loaded from CDN:

bushfire-map.html

<!DOCTYPE html>
<html lang="en-AU">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Australian Emergency Map</title>
  <link rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js">
  </script>
  <style>
    body { margin: 0; padding: 0; }
    #map { width: 100%; height: 100vh; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    // We will fill this in next
  </script>
</body>
</html>

Open this file in a browser. You should see an empty page. Next we will add the map.

Step 3: Initialise the Map

Replace the empty script block with this. It creates a Leaflet map centred on Australia with OpenStreetMap tiles:

JavaScript

// Centre on Australia
const map = L.map('map').setView([-28.0, 134.0], 5);

// Add OpenStreetMap tiles (free, no API key needed)
L.tileLayer(
  'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
  {
    maxZoom: 18,
    attribution:
      '&copy; OpenStreetMap contributors'
  }
).addTo(map);

Refresh the page. You should see a map of Australia.

Step 4: Fetch Incidents from EmergencyAPI

Add this function below the map setup. Replace YOUR_API_KEY with your actual key:

JavaScript

const API_KEY = 'YOUR_API_KEY';
let incidentLayer = null;

// Colour by warning level
const COLOURS = {
  emergency_warning: '#cc0000',
  watch_and_act: '#cc6600',
  advice: '#0066cc',
  none: '#808080'
};

async function fetchIncidents() {
  const url =
    'https://emergencyapi.com/api/v1/incidents'
    + '?status=active&format=geojson&limit=500';

  const res = await fetch(url, {
    headers: {
      'Authorization': 'Bearer ' + API_KEY
    }
  });

  if (!res.ok) {
    console.error('API error:', res.status);
    return;
  }

  const data = await res.json();

  // Remove old markers
  if (incidentLayer) {
    map.removeLayer(incidentLayer);
  }

  // Add new markers from GeoJSON
  incidentLayer = L.geoJSON(data, {
    pointToLayer: function(feature, latlng) {
      const level =
        feature.properties.warningLevel || 'none';
      return L.circleMarker(latlng, {
        radius:
          level === 'emergency_warning' ? 10 : 6,
        fillColor: COLOURS[level] || '#808080',
        color: '#000',
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
      });
    },

    onEachFeature: function(feature, layer) {
      const p = feature.properties;
      const updated =
        new Date(p.timestamps.updated);
      const ago =
        Math.round(
          (Date.now() - updated) / 60000
        );

      layer.bindPopup(
        '<strong>' + p.title + '</strong>'
        + '<br>Type: ' + p.eventType
        + '<br>State: '
          + p.source.state.toUpperCase()
        + '<br>Agency: ' + p.source.agency
        + '<br>Warning: '
          + (p.warningLevel || 'none')
            .replace(/_/g, ' ')
        + '<br>Updated: ' + ago + ' min ago'
      );
    }
  }).addTo(map);

  console.log(
    'Loaded', data.features.length, 'incidents'
  );
}

// Fetch immediately, then every 60 seconds
fetchIncidents();
setInterval(fetchIncidents, 60000);

Refresh the page. You should see circle markers across Australia. Red markers are emergency warnings, orange is watch and act, blue is advice, grey is active with no specific warning. Click any marker to see details.

Step 5: Filter by State (Optional)

To show only one state, add a state parameter to the API URL. For example, to show only NSW bushfires:

JavaScript

const url =
  'https://emergencyapi.com/api/v1/incidents'
  + '?status=active&state=nsw&eventType=bushfire'
  + '&format=geojson&limit=500';

Available state codes: nsw, vic, qld, sa, wa, tas, act, nt.

You can also filter by event type (bushfire, flood, storm, earthquake, etc.) and severity (Extreme, Severe, Moderate). See the full API docs for all available filters.

Step 6: Add Proximity Search (Optional)

EmergencyAPI supports proximity search. To find incidents within 50km of a location:

JavaScript

const url =
  'https://emergencyapi.com/api/v1/incidents/nearby'
  + '?lat=-33.8688&lng=151.2093&radius=50'
  + '&format=geojson';

This returns incidents within 50km of Sydney CBD. Useful for building "fires near me" functionality. Combine with the browser Geolocation API to use the user's actual position.

Next Steps

Add a state filter dropdown using Leaflet Controls
Use polygon geometry for fire boundaries (the API returns polygons for some feeds)
Add the proximity search endpoint with browser geolocation for a "fires near me" feature
Style the map with a dark tile layer for a dashboard look
Deploy on Vercel, Netlify, or any static host