feat: tambah fitur pencarian data penduduk miskin pada peta

WebGISPovertyMap/index.php

@@ -74,6 +74,7 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
                     <div class="custom-select-options" id="custom-select-options">
                         <div class="custom-option selected" data-value="Semua">Semua Layer</div>
                         <div class="custom-option" data-value="Rumah Ibadah">Rumah Ibadah</div>
+                        <div class="custom-option" data-value="Penduduk Miskin">Penduduk Miskin</div>
                     </div>
                 </div>
 
@@ -85,7 +86,7 @@ $isAdmin = isset($_SESSION['role']) && $_SESSION['role'] === 'admin';
                                 d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                         </svg>
                     </span>
-                    <input type="text" id="search-input" placeholder="Cari nama lokasi atau rumah ibadah..."
+                    <input type="text" id="search-input" placeholder="Cari nama kepala keluarga atau rumah ibadah..."
                         onkeyup="jalankanPencarian()" oninput="toggleClearBtn()" autocomplete="off">
                     <button class="search-clear-btn" id="search-clear" onclick="clearSearch()" title="Hapus pencarian">
                         <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">

WebGISPovertyMap/script.js

@@ -97,6 +97,7 @@ var databasePendudukMiskin = [];
 
 function loadRumahIbadah() {
     rumahIbadahLayer.clearLayers();
+    databasePencarian = []; // Reset database pencarian untuk mencegah duplikat
 
     fetch('load.php?jenis=rumah_ibadah')
         .then(res => res.json())
@@ -168,6 +169,17 @@ function loadRumahIbadah() {
                             .bindPopup(htmlIsi);
 
                         pendudukMiskinCluster.addLayer(marker);
+
+                        var namaKK = penduduk.nama_kk || 'Tanpa Nama';
+                        databasePencarian.push({
+                            namaLower: namaKK.toLowerCase(),
+                            namaAsli: namaKK,
+                            kategori: 'Penduduk Miskin',
+                            bantuan: statusBantuan,
+                            ikon: '👥',
+                            tipe: 'titik',
+                            layer: marker
+                        });
                     });
 
                     dataRumahIbadah.forEach(ibadah => {
@@ -492,10 +504,11 @@ var databasePencarian = [];
 
 var ikonKategori = {
     'Rumah Ibadah': '🕌',
+    'Penduduk Miskin': '👥'
 };
 
 var warnaBadge = {
-    'Rumah Ibadah': 'badge-Rumah-Ibadah',
+    'Rumah Ibadah': 'badge-Rumah-Ibadah'
 };
 
 function jalankanPencarian() {
@@ -522,11 +535,28 @@ function jalankanPencarian() {
 
         hasil.forEach(function (item) {
             var badgeClass = warnaBadge[item.kategori] || 'badge-default';
-            var ikon = ikonKategori[item.kategori] || '📍';
+            var kategoriText = item.kategori;
+            var ikon = item.ikon || '📍';
             var bgColors = {
-                'Rumah Ibadah': 'rgba(59,130,246,0.12)'
+                'Rumah Ibadah': 'rgba(59,130,246,0.12)',
+                'Penduduk Miskin': item.bantuan === 'Sudah Menerima' ? 'rgba(16,185,129,0.12)' : 'rgba(239,68,68,0.12)'
             };
 
+            if (item.kategori === 'Penduduk Miskin') {
+                if (item.bantuan === 'Sudah Menerima') {
+                    badgeClass = 'badge-penduduk-sudah';
+                    kategoriText = 'Sudah Menerima';
+                } else {
+                    badgeClass = 'badge-penduduk-belum';
+                    kategoriText = 'Belum Menerima';
+                }
+            }
+
+            var subText = 'Klik untuk zoom ke lokasi';
+            if (item.kategori === 'Penduduk Miskin') {
+                subText = 'Penduduk Miskin • ' + subText;
+            }
+
             var div = document.createElement('div');
             div.className = 'result-item';
             div.innerHTML = `
@@ -535,17 +565,24 @@ function jalankanPencarian() {
                         </div>
                         <div class="result-item-text">
                             <div class="result-item-name">${item.namaAsli}</div>
-                            <div class="result-item-sub">Klik untuk zoom ke lokasi</div>
+                            <div class="result-item-sub">${subText}</div>
                         </div>
-                        <span class="badge-kategori ${badgeClass}">${item.kategori}</span>`;
+                        <span class="badge-kategori ${badgeClass}">${kategoriText}</span>`;
 
             div.onclick = function () {
                 if (item.tipe === 'titik') {
-                    map.flyTo(item.layer.getLatLng(), 17, { animate: true, duration: 1.5 });
+                    if (item.kategori === 'Penduduk Miskin') {
+                        // For markers in markerClusterGroup, use zoomToShowLayer to expand clusters
+                        pendudukMiskinCluster.zoomToShowLayer(item.layer, function () {
+                            item.layer.openPopup();
+                        });
+                    } else {
+                        map.flyTo(item.layer.getLatLng(), 17, { animate: true, duration: 1.5 });
+                        item.layer.openPopup();
+                    }
                 } else {
                     map.fitBounds(item.layer.getBounds());
                 }
-                item.layer.openPopup();
                 wadahHasil.style.display = 'none';
                 document.getElementById('search-input').value = item.namaAsli;
                 toggleClearBtn();

WebGISPovertyMap/style.css

@@ -430,6 +430,16 @@ body {
     color: #60a5fa;
 }
 
+.badge-penduduk-sudah {
+    background: rgba(16, 185, 129, 0.15);
+    color: #34d399;
+}
+
+.badge-penduduk-belum {
+    background: rgba(239, 68, 68, 0.15);
+    color: #f87171;
+}
+
 .badge-default {
     background: rgba(148, 163, 184, 0.15);
     color: #94a3b8;