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

menambahkan legenda peta

Browse Source
This commit is contained in:
powji17
2026-06-12 08:57:39 +07:00
parent 3cc437bdf8
commit 34cdf384c8
2 changed files with 91 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGISPovertyMapping/assets/css/style.css
+38
View File
@@ -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;
}
WebGISPovertyMapping/assets/js/script.js
+53 -9
View File
@@ -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 = {
"<i class='fa-solid fa-house-chimney-crack' style='color:red'></i> Rumah Prasejahtera": layerPrasejahtera,
"<span style='color:#27ae60'>⌂</span> Prasejahtera Tercakup": layerTercakup,
"<span style='color:#e74c3c'>⌂</span> Prasejahtera Tidak Tercakup": layerTidakTercakup,
"<i class='fa-solid fa-place-of-worship' style='color:purple'></i> 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 = `
<h4><i class="fa-solid fa-circle-info"></i> Legenda</h4>
<div class="legend-item">
<span class="legend-dot" style="background:#27ae60;"></span> Prasejahtera Tercakup
</div>
<div class="legend-item">
<span class="legend-dot" style="background:#e74c3c;"></span> Prasejahtera Tidak Tercakup
</div>
<hr style="margin:6px 0; border-color:#eee;">
<div class="legend-item"><span class="legend-dot" style="background:#1abc9c;"></span> Masjid</div>
<div class="legend-item"><span class="legend-dot" style="background:#3498db;"></span> Gereja</div>
<div class="legend-item"><span class="legend-dot" style="background:#e67e22;"></span> Vihara</div>
<div class="legend-item"><span class="legend-dot" style="background:#9b59b6;"></span> Pura</div>
<div class="legend-item"><span class="legend-dot" style="background:#e74c3c;"></span> Klenteng</div>
<hr style="margin:6px 0; border-color:#eee;">
<div class="legend-item"><span class="legend-radius"></span> Radius Jangkauan</div>
`;
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];