From 34cdf384c896c21262acda1196ae82398f30312a Mon Sep 17 00:00:00 2001 From: powji17 Date: Fri, 12 Jun 2026 08:57:39 +0700 Subject: [PATCH] menambahkan legenda peta --- WebGISPovertyMapping/assets/css/style.css | 38 ++++++++++++++ WebGISPovertyMapping/assets/js/script.js | 62 +++++++++++++++++++---- 2 files changed, 91 insertions(+), 9 deletions(-) diff --git a/WebGISPovertyMapping/assets/css/style.css b/WebGISPovertyMapping/assets/css/style.css index c89b3d7..70291e8 100644 --- a/WebGISPovertyMapping/assets/css/style.css +++ b/WebGISPovertyMapping/assets/css/style.css @@ -289,4 +289,42 @@ html, body { box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important; font-family: 'Segoe UI', Arial, sans-serif !important; font-size: 13px !important; +} + +.map-legend { + background: white; + padding: 14px 16px; + border-radius: 10px; + box-shadow: 0 2px 12px rgba(0,0,0,0.12); + font-size: 13px; + font-family: 'Segoe UI', sans-serif; + min-width: 190px; +} +.map-legend h4 { + margin: 0 0 10px 0; + font-size: 13px; + font-weight: 700; + color: #1B2A4A; +} +.legend-item { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 6px; + color: #444; +} +.legend-dot { + width: 12px; + height: 12px; + border-radius: 50%; + display: inline-block; + flex-shrink: 0; +} +.legend-radius { + width: 18px; + height: 10px; + border: 2px dashed #8e44ad; + border-radius: 50%; + 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 4f0cca7..dda6241 100644 --- a/WebGISPovertyMapping/assets/js/script.js +++ b/WebGISPovertyMapping/assets/js/script.js @@ -6,17 +6,42 @@ const popup = L.popup(); const daftarMarker = {}, daftarPolyline = {}, daftarPolygon = {}; // 1. BUAT KERTAS TRANSPARAN (LAYER GROUPS) -const layerPrasejahtera = L.layerGroup().addTo(map); -const layerIbadah = L.layerGroup().addTo(map); +const layerTercakup = L.layerGroup().addTo(map); +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 = { - " Rumah Prasejahtera": layerPrasejahtera, + "⌂ Prasejahtera Tercakup": layerTercakup, + "⌂ Prasejahtera Tidak Tercakup": layerTidakTercakup, " Rumah Ibadah": layerIbadah, + "○ Radius Jangkauan": layerRadius, }; - -// 3. MUNCULKAN KONTROL DI POJOK KANAN ATAS PETA L.control.layers(null, overlays, { collapsed: false }).addTo(map); +let legend = L.control({ position: 'topright' }); +legend.onAdd = function() { + let div = L.DomUtil.create('div', 'map-legend'); + div.innerHTML = ` +

Legenda

+
+ Prasejahtera Tercakup +
+
+ Prasejahtera Tidak Tercakup +
+
+
Masjid
+
Gereja
+
Vihara
+
Pura
+
Klenteng
+
+
Radius Jangkauan
+ `; + return div; +}; +legend.addTo(map); let currentMode = 'none'; let tempLatLngs = [], tempPolyline = null; @@ -112,6 +137,14 @@ function perbaruiWarnaPrasejahtera() { // Ganti ikon sesuai status let ikonBaru = tercakup ? ikonPrasejahteraTercakup : ikonPrasejahtera; p.marker.setIcon(ikonBaru); + + layerTercakup.removeLayer(p.marker); + layerTidakTercakup.removeLayer(p.marker); + if (tercakup) { + p.marker.addTo(layerTercakup); + } else { + p.marker.addTo(layerTidakTercakup); + } } } @@ -181,7 +214,7 @@ function loadIbadah() { let lingkaran = L.circle([ib.lat, ib.lng], { radius: ib.radius_m, color: '#8e44ad', fillColor: '#8e44ad', fillOpacity: 0.1, weight: 1, dashArray: '5,5' - }).addTo(layerIbadah); + }).addTo(layerRadius); const totalPrasejahtera = Object.keys(dataPrasejahtera).length; const persen = totalPrasejahtera > 0 @@ -316,8 +349,17 @@ function loadDB() { let marker = L.marker([rumah.lat, rumah.lng], { icon: ikonPrasejahtera, draggable: ROLE === 'admin' || ROLE === 'operator' - }) - .addTo(layerPrasejahtera); + }); + marker.bindPopup(isiPopup); + marker.on('dragend', function(e) { + let pos = e.target.getLatLng(); + dataPrasejahtera[rumah.id].lat = pos.lat; + dataPrasejahtera[rumah.id].lng = pos.lng; + updateLokasiPrasejahtera(rumah.id, pos.lat, pos.lng); + perbaruiWarnaPrasejahtera(); + }); + dataPrasejahtera[rumah.id] = { lat: rumah.lat, lng: rumah.lng, marker }; + daftarMarker['p_' + rumah.id] = marker; marker.bindPopup(isiPopup); marker.on('dragend', function(e) { let pos = e.target.getLatLng(); @@ -338,8 +380,10 @@ loadDB(); // --- FUNGSI UNTUK ME-REFRESH PETA SECARA OTOMATIS (SOFT REFRESH) --- function refreshPeta() { - layerPrasejahtera.clearLayers(); + layerTercakup.clearLayers(); + layerTidakTercakup.clearLayers(); layerIbadah.clearLayers(); + layerRadius.clearLayers(); // 2. Bersihkan memori agar ID tidak menumpuk/ganda for (let id in dataIbadah) delete dataIbadah[id];