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: , verify your email, then grab your key from the dashboard.
Step 2: Set up the HTML
Create an
index.htmlfile:
CODEhtml
<!DOCTYPE html>
<html>
<head>
<title>Australian Emergency Map</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<style>
#map { height: 100vh; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="app.js"></script>
</body>
</html>
Step 3: Fetch incidents and render markers
Create an app.js file:
CODEconst 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(`<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.
↗ Original-Artikel auf dev.to lesenVollständiger Original-ArtikelDen kompletten Beitrag mit allen Details direkt auf dev.to lesen.
SOCIAL SHARE CARD GENERATOR