Peta curah hujan dari BMKG

Ternyata BMKG juga menyediakan peta curah hujan, walaupun tampilannya kurang menarik sih...
Ini sumber datanya: https://gis.bmkg.go.id/portal/dataapi
Berikut setelah diimplementasikan dalam bentuk peta
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Peta Curah Hujan dan Hari Hujan - BMKG</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Leaflet CSS -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />

  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    #map {
      width: 100%;
      height: 100vh;
    }
    .legend {
      position: absolute;
      bottom: 10px;
      left: 10px;
      background: white;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(0,0,0,0.3);
      font-size: 12px;
      line-height: 1.5;
      z-index: 1000;
    }
    .legend img {
      width: 100px;
      display: block;
    }
  </style>
</head>
<body>

  <div id="map"></div>
  <div class="legend" id="legend">
    <strong>Legenda:</strong>
    <div id="curahLegend" style="margin-top:5px;"></div>
  </div>

  <!-- Leaflet JS -->
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

  <script>
    // Inisialisasi peta
    var map = L.map('map').setView([-2, 118], 5); // Koordinat tengah Indonesia

    // Tambahkan layer dasar dari OpenStreetMap
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // Layer Curah Hujan (layer 2)
    var curahHujan = L.tileLayer.wms('https://gis.bmkg.go.id/arcgis/services/Peta_Curah_Hujan_dan_Hari_Hujan_/MapServer/WMSServer', {
      layers: '2',
      format: 'image/png',
      transparent: true,
      version: '1.3.0',
      attribution: 'BMKG'
    }).addTo(map);

    // Layer Hari Hujan (layer 1)
    var hariHujan = L.tileLayer.wms('https://gis.bmkg.go.id/arcgis/services/Peta_Curah_Hujan_dan_Hari_Hujan_/MapServer/WMSServer', {
      layers: '1',
      format: 'image/png',
      transparent: true,
      version: '1.3.0',
      attribution: 'BMKG'
    });

    // Kontrol layer (checkbox untuk mengaktifkan/mematikan layer)
    L.control.layers(null, {
      "Curah Hujan": curahHujan,
      "Hari Hujan": hariHujan
    }).addTo(map);

    // Tampilkan legenda default (Curah Hujan)
    document.getElementById("curahLegend").innerHTML = '<img src="https://gis.bmkg.go.id/arcgis/services/Peta_Curah_Hujan_dan_Hari_Hujan_/MapServer/WMSServer?request=GetLegendGraphic&version=1.3.0&format=image/png&layer=2" alt="Legenda Curah Hujan">';

    // Tambahkan handler untuk update legenda saat layer aktif berubah
    map.on('overlayadd', function (e) {
      if (e.name === 'Curah Hujan') {
        document.getElementById("curahLegend").innerHTML = '<img src="https://gis.bmkg.go.id/arcgis/services/Peta_Curah_Hujan_dan_Hari_Hujan_/MapServer/WMSServer?request=GetLegendGraphic&version=1.3.0&format=image/png&layer=2" alt="Legenda Curah Hujan">';
      } else if (e.name === 'Hari Hujan') {
        document.getElementById("curahLegend").innerHTML = '<img src="https://gis.bmkg.go.id/arcgis/services/Peta_Curah_Hujan_dan_Hari_Hujan_/MapServer/WMSServer?request=GetLegendGraphic&version=1.3.0&format=image/png&layer=1" alt="Legenda Hari Hujan">';
      }
    });
  </script>

</body>
</html>
DEV Community

Peta curah hujan dari BMKG

Top comments (0)
