From 94ca490bf2c99a048ccfd2135830d6ae1552ee2f Mon Sep 17 00:00:00 2001 From: powji17 Date: Fri, 12 Jun 2026 11:39:27 +0700 Subject: [PATCH] menambahkan fitur heatmap dan memperbarui ui layer control --- WebGISPovertyMapping/assets/css/style.css | 63 ++++++++++++++++-- WebGISPovertyMapping/assets/js/script.js | 80 ++++++++++++++++++++--- WebGISPovertyMapping/index.php | 63 ++++++++++++++++++ 3 files changed, 191 insertions(+), 15 deletions(-) diff --git a/WebGISPovertyMapping/assets/css/style.css b/WebGISPovertyMapping/assets/css/style.css index 70291e8..ab20b5b 100644 --- a/WebGISPovertyMapping/assets/css/style.css +++ b/WebGISPovertyMapping/assets/css/style.css @@ -282,13 +282,53 @@ html, body { top: 0; bottom: 0; left: 0; right: 0; } -/* ===== LAYER CONTROL ===== */ -.leaflet-control-layers { - border-radius: 10px !important; - border: none !important; - box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important; - font-family: 'Segoe UI', Arial, sans-serif !important; - font-size: 13px !important; +/* ===== LAYER CONTROL DI SIDEBAR ===== */ +.layer-control { + display: flex; + flex-direction: column; + gap: 6px; + padding: 4px 2px; +} + +.layer-item { + display: flex; + align-items: center; + gap: 8px; + font-size: 13px; + color: #444; + cursor: pointer; + padding: 4px 2px; + border-radius: 6px; + transition: background 0.15s; +} + +.layer-item:hover { + background: #f0f4f8; +} + +.layer-item input[type="checkbox"] { + width: 15px; + height: 15px; + cursor: pointer; + accent-color: #1B2A4A; + flex-shrink: 0; +} + +.layer-dot { + width: 12px; + height: 12px; + border-radius: 50%; + display: inline-block; + flex-shrink: 0; +} + +.layer-radius-icon { + width: 16px; + height: 10px; + border: 2px dashed #8e44ad; + border-radius: 50%; + display: inline-block; + flex-shrink: 0; } .map-legend { @@ -327,4 +367,13 @@ html, body { border-radius: 50%; display: inline-block; flex-shrink: 0; +} + +.layer-heatmap-icon { + width: 16px; + height: 12px; + border-radius: 4px; + background: linear-gradient(to right, #3498db, #f1c40f, #e67e22, #e74c3c); + display: inline-block; + flex-shrink: 0; } \ No newline at end of file diff --git a/WebGISPovertyMapping/assets/js/script.js b/WebGISPovertyMapping/assets/js/script.js index dda6241..0f571d5 100644 --- a/WebGISPovertyMapping/assets/js/script.js +++ b/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 = { - "⌂ Prasejahtera Tercakup": layerTercakup, - "⌂ Prasejahtera Tidak Tercakup": layerTidakTercakup, - " 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() {
Klenteng
Radius Jangkauan
+
+ + Heatmap Kemiskinan +
`; 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); } \ No newline at end of file diff --git a/WebGISPovertyMapping/index.php b/WebGISPovertyMapping/index.php index d269777..60927d0 100644 --- a/WebGISPovertyMapping/index.php +++ b/WebGISPovertyMapping/index.php @@ -56,6 +56,37 @@ $role = $isLoggedIn ? $_SESSION['role'] : 'viewer'; +
+ Visualisasi + +
+ + + + + +
+
Logout @@ -70,6 +101,37 @@ $role = $isLoggedIn ? $_SESSION['role'] : 'viewer'; Login +
+ Visualisasi + +
+ + + + + +
+ @@ -88,6 +150,7 @@ $role = $isLoggedIn ? $_SESSION['role'] : 'viewer'; const ROLE = ''; + \ No newline at end of file