Membuat rain map dengan leaflet dan rainviewer
<!DOCTYPE html>
<html>
<head>
<title>Peta Hujan - RainViewer + Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
<style>
#map { height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script>
// Inisialisasi peta di koordinat Indonesia
var map = L.map('map').setView([-7.65, 111.6], 7); // Trenggalek
// Tambahkan tile dasar (OpenStreetMap)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
}).addTo(map);
// Ambil data radar terbaru dari RainViewer
fetch('https://api.rainviewer.com/public/weather-maps.json')
.then(response => response.json())
.then(data => {
// Ambil path radar terbaru
const radar = data.radar;
const latestFrame = radar.past[radar.past.length - 1];
const tileUrl = `https://tilecache.rainviewer.com${latestFrame.path}/256/{z}/{x}/{y}/2/1_1.png`;
// Tambahkan layer radar ke peta
L.tileLayer(tileUrl, {
attribution: 'Radar data © RainViewer',
opacity: 0.6,
transparent: true
}).addTo(map);
})
.catch(error => {
console.error('Gagal memuat data radar:', error);
});
</script>
</body>
</html>
Top comments (0)