JavaScript(무료 API)로 실시간 호주 비상 지도 만들기
발행: (2026년 4월 24일 PM 01:01 GMT+9)
3 분 소요
원문: Dev.to
Source: Dev.to
개요
이 튜토리얼에서는 Leaflet.js와 무료 EmergencyAPI를 사용하여 호주의 실시간 비상 지도(라이브 emergency map)를 만드는 방법을 보여줍니다. EmergencyAPI는 호주 8개 주의 실시간 비상 데이터를 집계합니다.
사전 요구 사항
- EmergencyAPI 키 (무료; 회원가입 후 이메일 인증을 거쳐 대시보드에서 키 복사)
- 기본 HTML/JavaScript 지식
- 지도 타일과 API 데이터를 불러오기 위한 인터넷 연결
프로젝트 구조
project/
├─ index.html
└─ app.jsindex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Australian Emergency Map</title>
<style>
#map { height: 100vh; width: 100%; }
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="app.js"></script>
</body>
</html>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);지도 실행하기
- app.js 파일에서
'your_api_key_here'를 EmergencyAPI 대시보드에서 받은 키로 교체합니다. index.html을 웹 브라우저에서 엽니다.- 지도에 호주 전역의 현재 비상 상황이 사건 유형별 색상으로 표시됩니다.
선택 사항: 주별 필터링
API URL에 쿼리 문자열을 추가합니다. 예:
const API_URL = 'https://emergencyapi.com/api/v1/incidents?state=nsw';면책 조항
EmergencyAPI는 호주 정부 공식 비상 서비스의 데이터를 집계합니다. 데이터가 지연되거나 불완전할 수 있습니다. 안전에 중요한 결정을 내릴 때는 항상 해당 주의 비상 서비스를 참고하십시오.