menambahkan fitur heatmap dan memperbarui ui layer control

WebGISPovertyMapping/assets/js/script.js

@@ -11,14 +11,21 @@ const layerTidakTercakup = L.layerGroup().addTo(map);
 const layerIbadah        = L.layerGroup().addTo(map);
 const layerRadius        = L.layerGroup().addTo(map);
 
-// 2. DAFTARKAN LAYER-LAYER TERSEBUT KE DALAM CONTROL PANEL
-const overlays = {
-    "<span style='color:#27ae60'>⌂</span> Prasejahtera Tercakup":      layerTercakup,
-    "<span style='color:#e74c3c'>⌂</span> Prasejahtera Tidak Tercakup": layerTidakTercakup,
-    "<i class='fa-solid fa-place-of-worship' style='color:purple'></i> Rumah Ibadah": layerIbadah,
-    "○ Radius Jangkauan": layerRadius,
-};
-L.control.layers(null, overlays, { collapsed: false }).addTo(map);
+function toggleLayer(namaLayer, checkbox) {
+    const layers = {
+        'tercakup':      layerTercakup,
+        'tidakTercakup': layerTidakTercakup,
+        'ibadah':        layerIbadah,
+        'radius':        layerRadius,
+    };
+
+    if (checkbox.checked) {
+        layers[namaLayer].addTo(map);
+    } else {
+        map.removeLayer(layers[namaLayer]);
+    }
+}
+
 let legend = L.control({ position: 'topright' });
 legend.onAdd = function() {
     let div = L.DomUtil.create('div', 'map-legend');
@@ -38,6 +45,14 @@ legend.onAdd = function() {
         <div class="legend-item"><span class="legend-dot" style="background:#e74c3c;"></span> Klenteng</div>
         <hr style="margin:6px 0; border-color:#eee;">
         <div class="legend-item"><span class="legend-radius"></span> Radius Jangkauan</div>
+        <div class="legend-item">
+            <span style="
+                width:40px; height:10px;
+                background: linear-gradient(to right, #3498db, #f1c40f, #e67e22, #e74c3c);
+                border-radius:4px; display:inline-block; flex-shrink:0;
+            "></span>
+            Heatmap Kemiskinan
+        </div>
     `;
     return div;
 };
@@ -372,6 +387,12 @@ function loadDB() {
             daftarMarker['p_' + rumah.id] = marker;
         });
 
+        // Perbarui heatmap setelah data prasejahtera termuat
+        if (document.getElementById('checkbox-heatmap')?.checked) {
+            buatHeatmap();
+            heatmapAktif = true;
+        }
+
         // Muat ibadah SETELAH prasejahtera selesai
         loadIbadah();
     });
@@ -391,6 +412,8 @@ function refreshPeta() {
 
     // 3. Panggil ulang data terbaru dari database
     loadDB();
+
+    if (heatmapAktif) buatHeatmap();
 }
 
 // --- EVENT KLIK PETA ---
@@ -864,4 +887,45 @@ function simpanEditIbadah(id) {
             Toast.fire({ icon: 'error', title: 'Gagal: ' + (data.message || 'Error') });
         }
     });
+}
+
+// --- HEATMAP ---
+let heatmapLayer = null;
+let heatmapAktif = false;
+
+function toggleHeatmap() {
+    let checkbox = document.getElementById('checkbox-heatmap');
+
+    if (checkbox.checked) {
+        buatHeatmap();
+        heatmapAktif = true;
+    } else {
+        if (heatmapLayer) map.removeLayer(heatmapLayer);
+        heatmapAktif = false;
+    }
+}
+
+function buatHeatmap() {
+    // Ambil koordinat dari dataPrasejahtera yang sudah ada di memori
+    let points = [];
+    for (let id in dataPrasejahtera) {
+        let p = dataPrasejahtera[id];
+        points.push([p.lat, p.lng, 1]); // [lat, lng, intensity]
+    }
+
+    // Hapus layer lama kalau ada
+    if (heatmapLayer) map.removeLayer(heatmapLayer);
+
+    heatmapLayer = L.heatLayer(points, {
+        radius:  35,    // ukuran area panas per titik
+        blur:    25,    // tingkat kehalusan gradasi
+        maxZoom: 17,    // zoom maksimal sebelum intensitas penuh
+        max:     1.0,
+        gradient: {
+            0.2: '#3498db',  // biru  = kepadatan rendah
+            0.5: '#f1c40f',  // kuning = kepadatan sedang
+            0.8: '#e67e22',  // oranye = kepadatan tinggi
+            1.0: '#e74c3c'   // merah  = kepadatan sangat tinggi
+        }
+    }).addTo(map);
 }