feat: tambah fitur pencarian data penduduk miskin pada peta

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();