powji/webgis-pemetaan-sosial
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menambahkan data jumlah rumah prasejahtera yang tercakup bantuan dari rumah ibadah pada popup

Browse Source
This commit is contained in:
powji17
2026-06-10 20:01:57 +07:00
parent 6158f4b1a4
commit 0108c35a05
2 changed files with 99 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGISPovertyMapping/api/rumahibadah/load_ibadah.php
+32 -2
View File
@@ -1,8 +1,38 @@
<?php
header('Content-Type: application/json');
$conn = new mysqli('localhost', 'root', '', 'webgis');
$conn = new mysqli("localhost", "root", "", "webgis");
$result = $conn->query("SELECT * FROM rumah_ibadah");
$data = [];
while ($row = $result->fetch_assoc()) $data[] = $row;
while ($row = $result->fetch_assoc()) {
$id = $row['id'];
$lat = $row['lat'];
$lng = $row['lng'];
$radius_m = $row['radius_m'];
// Hitung jumlah rumah prasejahtera dalam radius
// menggunakan formula Haversine langsung di SQL
$stmt = $conn->prepare("
SELECT COUNT(*) as total
FROM rumah_prasejahtera
WHERE (
6371000 * acos(
cos(radians(?)) * cos(radians(lat)) *
cos(radians(lng) - radians(?)) +
sin(radians(?)) * sin(radians(lat))
)
) <= ?
");
$stmt->bind_param("dddd", $lat, $lng, $lat, $radius_m);
$stmt->execute();
$hitungResult = $stmt->get_result()->fetch_assoc();
$stmt->close();
$row['jumlah_tercakup'] = (int) $hitungResult['total'];
$data[] = $row;
}
echo json_encode($data);
$conn->close();
?>
WebGISPovertyMapping/assets/js/script.js
+67 -21
View File
@@ -183,27 +183,73 @@ function loadIbadah() {
fillColor: '#8e44ad', fillOpacity: 0.1, weight: 1, dashArray: '5,5'
}).addTo(layerIbadah);
marker.bindPopup(`<b>${ib.nama_ibadah}</b><br>
Jenis Rumah Ibadah: ${ib.jenis}<br>
Jangkauan Bantuan: ${ib.radius_m} m
<hr>
<div style="display:flex; gap:6px;">
${ROLE === 'admin' || ROLE === 'operator' ? `
<button onclick="editIbadah(${ib.id})"
style="flex:1; padding:6px; background:#2980b9; color:white;
border:none; border-radius:4px; cursor:pointer; font-size:12px;">
<i class="fa-solid fa-pen-to-square"></i> Edit
</button>
` : ''}
${ROLE === 'admin' ? `
<button onclick="hapusIbadah(${ib.id})"
style="flex:1; padding:6px; background:none; color:red;
border:1px solid red; border-radius:4px; cursor:pointer; font-size:12px;">
<i class="fa-solid fa-trash"></i> Hapus
</button>
` : ''}
</div>`
);
const totalPrasejahtera = Object.keys(dataPrasejahtera).length;
const persen = totalPrasejahtera > 0
? Math.round((ib.jumlah_tercakup / totalPrasejahtera) * 100)
: 0;
marker.bindPopup(`
<div style="font-size:13px; min-width:200px;">
<b style="font-size:15px;">
<i class="fa-solid fa-place-of-worship"></i> ${ib.nama_ibadah}
</b>
<hr style="margin:6px 0;">
<b>Jenis:</b> ${ib.jenis}<br>
<b>Jangkauan Bantuan:</b> ${ib.radius_m} m<br>
<hr style="margin:6px 0;">
<div style="
background:#f0f4f8;
border-radius:8px;
padding:10px;
margin:6px 0;
text-align:center;
">
<div style="font-size:22px; font-weight:700; color:#1B2A4A;">
${ib.jumlah_tercakup}
</div>
<div style="font-size:11px; color:#666; margin-bottom:6px;">
rumah tercakup dari ${totalPrasejahtera} total
</div>
<!-- Progress bar -->
<div style="
background:#dde3ea;
border-radius:20px;
height:6px;
overflow:hidden;
">
<div style="
background: ${persen > 0 ? '#27ae60' : '#dde3ea'};
width:${persen}%;
height:100%;
border-radius:20px;
transition: width 0.3s;
"></div>
</div>
<div style="font-size:11px; color:#888; margin-top:4px;">
${persen}% dari total prasejahtera
</div>
</div>
<div style="display:flex; gap:6px; margin-top:4px;">
${ROLE === 'admin' || ROLE === 'operator' ? `
<button onclick="editIbadah(${ib.id})"
style="flex:1; padding:6px; background:#2980b9; color:white;
border:none; border-radius:4px; cursor:pointer; font-size:12px;">
<i class="fa-solid fa-pen-to-square"></i> Edit
</button>
` : ''}
${ROLE === 'admin' ? `
<button onclick="hapusIbadah(${ib.id})"
style="flex:1; padding:6px; background:none; color:red;
border:1px solid red; border-radius:4px; cursor:pointer; font-size:12px;">
<i class="fa-solid fa-trash"></i> Hapus
</button>
` : ''}
</div>
</div>
`);
marker.on('dragend', function(e) {
let pos = e.target.getLatLng();