init: publish to github

assets/js/features/draw_control.js

@@ -0,0 +1,141 @@
+// --- Setup Leaflet Draw ---
+
+// Layer terpisah untuk hasil gambar sementara sebelum disimpan
+const drawnItems = new L.FeatureGroup();
+map.addLayer(drawnItems);
+
+const drawControl = new L.Control.Draw({
+    draw: {
+        polygon: {
+            allowIntersection: false,
+            showArea: true
+        },
+        polyline: {
+            metric: true
+        },
+        circle: false,
+        circlemarker: false,
+        marker: false, // Marker default dimatikan, kita pakai klik peta untuk SPBU
+        rectangle: false
+    },
+    edit: {
+        featureGroup: drawnItems, // Kita tidak mengedit di drawnItems, karena data aslinya di jalanLayer/parsilLayer
+        edit: false,
+        remove: false
+    }
+});
+// Hapus map.addControl(drawControl); agar tidak tampil UI bawaan LeafletJS
+
+
+// Flag untuk menghindari munculnya form SPBU saat sedang menggambar
+map.on(L.Draw.Event.DRAWSTART, function (e) {
+    isDrawingMode = true;
+});
+
+map.on(L.Draw.Event.DRAWSTOP, function (e) {
+    setTimeout(() => { 
+        isDrawingMode = false; 
+        window.currentDrawMode = null;
+        window.activeDrawHandler = null;
+        deactivateAddMode(); 
+    }, 200);
+});
+
+window.activateDraw = function(type) {
+    // Toggle: cek dari class button, lebih reliable daripada state variable
+    const btnJalan = document.getElementById('btnMenuJalan');
+    const btnParsil = document.getElementById('btnMenuParsil');
+    const isJalanActive = btnJalan.classList.contains('active');
+    const isParsilActive = btnParsil.classList.contains('active');
+    
+    if ((type === 'polyline' && isJalanActive) || (type === 'polygon' && isParsilActive)) {
+        window.deactivateAddMode();
+        return;
+    }
+    
+    deactivateAddMode();
+    window.currentDrawMode = type;
+    
+    if (type === 'polyline') {
+        const handler = new L.Draw.Polyline(map, drawControl.options.draw.polyline);
+        handler.enable();
+        window.activeDrawHandler = handler;
+        btnJalan.classList.add('active');
+        if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Jalan';
+    } else if (type === 'polygon') {
+        const handler = new L.Draw.Polygon(map, drawControl.options.draw.polygon);
+        handler.enable();
+        window.activeDrawHandler = handler;
+        btnParsil.classList.add('active');
+        if (window.cursorTooltip) window.cursorTooltip.textContent = 'Klik untuk menggambar Parsil';
+    }
+};
+
+map.on(L.Draw.Event.CREATED, function (e) {
+    const type = e.layerType;
+    const layer = e.layer;
+
+    // Convert layer to GeoJSON geometry
+    const geoJson = layer.toGeoJSON().geometry;
+    const geoJsonStr = JSON.stringify(geoJson);
+
+    if (type === 'polyline') {
+        let length = 0;
+        const latlngs = layer.getLatLngs();
+        for (let i = 0; i < latlngs.length - 1; i++) {
+            length += latlngs[i].distanceTo(latlngs[i + 1]);
+        }
+        
+        // Gunakan Modal alih-alih prompt
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Nama Jalan</label>
+                <input type="text" id="modalJalanNama" placeholder="Nama Jalan">
+            </div>
+            <div class="form-group">
+                <label>Status</label>
+                <select id="modalJalanStatus">
+                    <option value="Nasional">Nasional</option>
+                    <option value="Provinsi">Provinsi</option>
+                    <option value="Kabupaten" selected>Kabupaten</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Panjang: ${length.toFixed(2)} m</label>
+            </div>
+        `;
+        openModal("Tambah Jalan Baru", bodyHTML, function() {
+            window.saveNewJalan(geoJsonStr, length, 'modalJalanNama', 'modalJalanStatus');
+        });
+        
+    } 
+    else if (type === 'polygon') {
+        const latlngs = layer.getLatLngs()[0];
+        let area = 0;
+        if (L.GeometryUtil && L.GeometryUtil.geodesicArea) {
+            area = L.GeometryUtil.geodesicArea(latlngs);
+        }
+
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Nama Pemilik/Area</label>
+                <input type="text" id="modalParsilNama" placeholder="Contoh: Budi atau Sawah A">
+            </div>
+            <div class="form-group">
+                <label>Status Tanah</label>
+                <select id="modalParsilStatus">
+                    <option value="SHM" selected>SHM</option>
+                    <option value="HGB">HGB</option>
+                    <option value="HGU">HGU</option>
+                    <option value="HP">HP</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label>Luas: ${area.toFixed(2)} m²</label>
+            </div>
+        `;
+        openModal("Tambah Parsil Tanah", bodyHTML, function() {
+            window.saveNewParsil(geoJsonStr, area, 'modalParsilNama', 'modalParsilStatus');
+        });
+    }
+});

assets/js/features/geojson.js

@@ -0,0 +1,84 @@
+// --- Fitur Import GeoJSON ---
+
+const fileGeoJson = document.getElementById('fileGeoJson');
+let geoJsonLayers = {};
+let geoJsonCounter = 0;
+
+window.toggleGeoJsonMenu = function() {
+    const list = document.getElementById('geoJsonFileList');
+    const icon = document.getElementById('geoJsonToggleIcon');
+    if (list.style.display === 'none') {
+        list.style.display = 'block';
+        icon.className = 'fas fa-minus';
+    } else {
+        list.style.display = 'none';
+        icon.className = 'fas fa-plus';
+    }
+};
+
+fileGeoJson.addEventListener('change', function(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = function(event) {
+        try {
+            const geoJsonData = JSON.parse(event.target.result);
+            const fileName = file.name;
+            const layerId = 'gj_' + (++geoJsonCounter);
+            
+            // Buat FeatureGroup khusus untuk file ini
+            const individualLayer = L.featureGroup();
+            
+            // Tambahkan ke map
+            L.geoJSON(geoJsonData, {
+                onEachFeature: function (feature, layer) {
+                    if (feature.properties) {
+                        let popupContent = '<h4>Informasi Feature</h4><ul style="list-style:none; padding:0;">';
+                        for (let key in feature.properties) {
+                            popupContent += `<li><strong>${key}:</strong> ${feature.properties[key]}</li>`;
+                        }
+                        popupContent += '</ul>';
+                        layer.bindPopup(popupContent);
+                    }
+                },
+                style: function(feature) {
+                    return {
+                        color: feature.properties.color || '#3388ff',
+                        weight: 2,
+                        fillOpacity: 0.4
+                    };
+                }
+            }).addTo(individualLayer);
+            
+            individualLayer.addTo(map);
+            geoJsonLayers[layerId] = individualLayer;
+            
+            // Tambahkan checkbox ke UI
+            const container = document.getElementById('geoJsonLayersContainer');
+            const label = document.createElement('label');
+            label.className = 'layer-option';
+            label.innerHTML = `<input type="checkbox" id="chk_${layerId}" checked> ${fileName}`;
+            
+            label.querySelector('input').addEventListener('change', function(e) {
+                if (e.target.checked) {
+                    map.addLayer(geoJsonLayers[layerId]);
+                } else {
+                    map.removeLayer(geoJsonLayers[layerId]);
+                }
+            });
+            
+            container.appendChild(label);
+            
+            // Reset input file agar bisa import file yang sama jika dihapus
+            fileGeoJson.value = '';
+            
+            alert('File GeoJSON berhasil dimuat!');
+
+        } catch (error) {
+            alert('Gagal memproses file GeoJSON. Pastikan format valid.');
+            console.error(error);
+        }
+    };
+    reader.readAsText(file);
+});

assets/js/features/geolocation.js

@@ -0,0 +1,30 @@
+// --- Fitur Geolocation ---
+
+// Tambahkan tombol di dalam wadah zoom control
+const geoBtn = document.createElement('button');
+geoBtn.className = 'custom-layer-btn';
+geoBtn.style.position = 'relative';
+geoBtn.style.top = '0';
+geoBtn.style.left = '0';
+geoBtn.style.right = 'auto';
+geoBtn.innerHTML = '<i class="fas fa-crosshairs fa-lg"></i>';
+geoBtn.title = 'Lokasi Saya';
+document.querySelector('.custom-zoom-control').appendChild(geoBtn);
+
+let userMarker = null;
+
+geoBtn.addEventListener('click', function() {
+    map.locate({setView: true, maxZoom: 16});
+});
+
+map.on('locationfound', function(e) {
+    if (userMarker) {
+        map.removeLayer(userMarker);
+    }
+    userMarker = L.marker(e.latlng).addTo(map)
+        .bindPopup("Anda berada di sini!").openPopup();
+});
+
+map.on('locationerror', function(e) {
+    alert("Gagal mendapatkan lokasi Anda.");
+});

assets/js/features/jalan.js

@@ -0,0 +1,162 @@
+// --- Fitur Jalan ---
+
+const jalanColors = {
+    'Nasional': '#ff0000',  // Merah
+    'Provinsi': '#0000ff',  // Biru
+    'Kabupaten': '#00ff00'  // Hijau
+};
+
+function loadJalan() {
+    jalanLayer.clearLayers();
+    fetch('api/jalan/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addJalanToMap(item);
+                });
+            }
+        });
+}
+
+function addJalanToMap(item) {
+    // geom adalah GeoJSON {type: "LineString", coordinates: [[lng, lat], ...]}
+    const latlngs = item.geom.coordinates.map(coord => [coord[1], coord[0]]);
+    
+    const polyline = L.polyline(latlngs, {
+        color: jalanColors[item.status] || '#3388ff',
+        weight: 5
+    });
+
+    polyline.jalanData = item;
+
+    // Tampilkan label nama jalan sejajar dengan garis (diagonal)
+    polyline.setText(item.nama, {
+        center: true,
+        offset: 0,
+        attributes: {
+            fill: '#000000',
+            'font-weight': 'bold',
+            'font-size': '14px',
+            'dy': '7'
+        }
+    });
+
+    // Hitung popupContent sekali saat jalan dibuat
+    const d = item;
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">Jalan ${d.nama}</h4>
+            <p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
+            <p style="margin: 0 0 10px 0;"><b>Panjang:</b> ${d.panjang.toFixed(2)} m</p>
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditJalanModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteJalan(${d.id})">Hapus</button>
+            </div>
+        </div>
+    `;
+    
+    polyline.bindPopup(popupContent);
+
+    jalanLayer.addLayer(polyline);
+}
+
+window.openEditJalanModal = function(id) {
+    let d = null;
+    jalanLayer.eachLayer(function(layer) {
+        if (layer.jalanData && layer.jalanData.id == id) d = layer.jalanData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama Jalan</label>
+            <input type="text" id="editJalanNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>Status</label>
+            <select id="editJalanStatus">
+                <option value="Nasional" ${d.status === 'Nasional' ? 'selected' : ''}>Nasional</option>
+                <option value="Provinsi" ${d.status === 'Provinsi' ? 'selected' : ''}>Provinsi</option>
+                <option value="Kabupaten" ${d.status === 'Kabupaten' ? 'selected' : ''}>Kabupaten</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label>Panjang: ${d.panjang.toFixed(2)} m</label>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit Jalan", bodyHTML, function() {
+        window.saveEditJalan(d.id, 'editJalanNama', 'editJalanStatus');
+    });
+};
+
+window.saveEditJalan = function(id, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    fetch('api/jalan/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, status })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            loadJalan();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.deleteJalan = function(id) {
+    openConfirmModal("Yakin hapus jalan ini?", function() {
+        fetch('api/jalan/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadJalan();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+window.saveNewJalan = function(geoJsonStr, panjang, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    if (!nama) {
+        alert("Nama jalan harus diisi!");
+        return false;
+    }
+    
+    const status = document.getElementById(statusId).value;
+
+    const geom = JSON.parse(geoJsonStr);
+
+    fetch('api/jalan/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, status, panjang, geom })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadJalan();
+        } else {
+            alert(data.message);
+        }
+    });
+    return true;
+};
+
+// Initial Load
+loadJalan();

assets/js/features/kemiskinan.js

@@ -0,0 +1,487 @@
+// --- Fitur Pemetaan Kemiskinan ---
+
+// Emoji Bubble Icon builder
+function makeIbadahIcon() {
+    return L.divIcon({
+        className: '',
+        html: `<div class="emoji-marker"><div class="bubble ibadah"><span>🕌</span></div></div>`,
+        iconSize: [38, 38],
+        iconAnchor: [19, 38],
+        popupAnchor: [0, -40]
+    });
+}
+
+function makeMiskinIcon(inRadius) {
+    const cls = inRadius ? 'miskin-in' : 'miskin-out';
+    return L.divIcon({
+        className: '',
+        html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>🏠</span></div></div>`,
+        iconSize: [38, 38],
+        iconAnchor: [19, 38],
+        popupAnchor: [0, -40]
+    });
+}
+
+const ibadahIcon     = makeIbadahIcon();
+const miskinMerahIcon = makeMiskinIcon(true);
+const miskinHijauIcon = makeMiskinIcon(false);
+
+
+let ibadahDataList = [];
+let miskinMarkerList = []; // Simpan referensi marker untuk update warna
+
+let isResizing = false;
+let resizingCircle = null;
+let resizingIbadah = null;
+
+map.on('mousemove', function(e) {
+    if (isResizing && resizingCircle && resizingIbadah) {
+        const center = resizingCircle.getLatLng();
+        const newRadius = center.distanceTo(e.latlng);
+        resizingCircle.setRadius(newRadius);
+        resizingIbadah.radius = newRadius;
+        
+        // Update data radius di marker juga
+        rumahIbadahLayer.eachLayer(function(layer) {
+            if (layer.ibadahData && layer.ibadahData.id === resizingIbadah.id && layer instanceof L.Marker) {
+                layer.ibadahData.radius = newRadius;
+            }
+        });
+        
+        updateSemuaWarnaMiskin();
+    }
+});
+
+map.on('mouseup', function(e) {
+    if (isResizing) {
+        isResizing = false;
+        map.dragging.enable();
+        if (resizingIbadah) {
+            updateIbadah(resizingIbadah.id, resizingIbadah.nama, resizingIbadah.alamat, resizingIbadah.radius, resizingIbadah.lat, resizingIbadah.lng);
+        }
+        resizingCircle = null;
+        resizingIbadah = null;
+    }
+});
+
+// --- Rumah Ibadah ---
+function loadRumahIbadah() {
+    rumahIbadahLayer.clearLayers();
+    ibadahDataList = [];
+    fetch('api/rumah_ibadah/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                ibadahDataList = data.data;
+                data.data.forEach(item => {
+                    addIbadahMarker(item);
+                });
+                updateSemuaWarnaMiskin(); // Update warna setelah memuat rumah ibadah
+            }
+        });
+}
+
+function addIbadahMarker(item) {
+    const marker = L.marker([item.lat, item.lng], { icon: ibadahIcon, draggable: true });
+    
+    // Lingkaran radius
+    const circle = L.circle([item.lat, item.lng], {
+        radius: item.radius,
+        color: '#ff7800',
+        weight: 2,
+        fillColor: '#ff7800',
+        fillOpacity: 0.2
+    });
+
+    circle.on('mousemove', function(e) {
+        if (isResizing) return;
+        const center = circle.getLatLng();
+        const radius = circle.getRadius();
+        const dist = center.distanceTo(e.latlng);
+        
+        const metersPerPixel = map.distance(map.containerPointToLatLng([0,0]), map.containerPointToLatLng([0,1]));
+        const tolerance = Math.max(radius * 0.1, metersPerPixel * 15); // toleransi 15px atau 10%
+        
+        if (Math.abs(dist - radius) <= tolerance) {
+            if (circle._path) circle._path.style.cursor = 'ew-resize';
+            circle.nearEdge = true;
+        } else {
+            if (circle._path) circle._path.style.cursor = 'pointer';
+            circle.nearEdge = false;
+        }
+    });
+
+    circle.on('mousedown', function(e) {
+        if (circle.nearEdge) {
+            map.dragging.disable();
+            isResizing = true;
+            resizingCircle = circle;
+            resizingIbadah = item;
+            L.DomEvent.stopPropagation(e);
+        }
+    });
+
+    marker.ibadahData = item;
+    marker.circleLayer = circle;
+
+    const d = item;
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">Rumah Ibadah ${d.nama}</h4>
+            <p style="margin: 0 0 5px 0;"><b>Alamat:</b> ${d.alamat}</p>
+            <p style="margin: 0 0 10px 0;"><b>Radius:</b> ${d.radius} m</p>
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditIbadahModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteIbadah(${d.id})">Hapus</button>
+            </div>
+        </div>
+    `;
+    marker.bindPopup(popupContent);
+
+    marker.on('dragend', function(e) {
+        const newPos = marker.getLatLng();
+        circle.setLatLng(newPos);
+        item.lat = newPos.lat;
+        item.lng = newPos.lng;
+        // Update ke DB
+        updateIbadah(item.id, item.nama, item.alamat, item.radius, newPos.lat, newPos.lng);
+    });
+
+    rumahIbadahLayer.addLayer(circle);
+    rumahIbadahLayer.addLayer(marker);
+}
+
+// Konteks Menu untuk Tambah Penduduk Miskin (klik kanan peta)
+map.on('contextmenu', function(e) {
+    if (isDrawingMode) return;
+
+    const popupContent = `
+        <div class="popup-form">
+            <h4>Tambah Titik</h4>
+            <button class="btn-danger" style="margin-top:5px;" onclick="formAddMiskin(${e.latlng.lat}, ${e.latlng.lng})">Tambah Penduduk Miskin</button>
+        </div>
+    `;
+    L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(map);
+});
+
+// Map Click -> Form Add Rumah Ibadah
+map.on('click', function(e) {
+    if (isDrawingMode) return;
+    
+    if (window.currentAddMode === 'rumah_ibadah') {
+        const lat = e.latlng.lat;
+        const lng = e.latlng.lng;
+        
+        // Reverse Geocoding
+        fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}`)
+            .then(res => res.json())
+            .then(geoData => {
+                const alamat = geoData.display_name || 'Alamat tidak ditemukan';
+                const bodyHTML = `
+                    <div class="form-group">
+                        <label>Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}</label>
+                    </div>
+                    <div class="form-group">
+                        <label>Nama Rumah Ibadah</label>
+                        <input type="text" id="modalIbadahNama" placeholder="Nama Rumah Ibadah">
+                    </div>
+                    <div class="form-group">
+                        <label>Alamat (Auto)</label>
+                        <textarea id="modalIbadahAlamat" rows="3">${alamat}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Radius (m)</label>
+                        <input type="number" id="modalIbadahRadius" value="500">
+                    </div>
+                `;
+                
+                openModal("Tambah Rumah Ibadah", bodyHTML, function() {
+                    window.saveNewIbadah(lat, lng, 'modalIbadahNama', 'modalIbadahAlamat', 'modalIbadahRadius');
+                });
+                
+                window.deactivateAddMode();
+            })
+            .catch(err => {
+                // Tetap buka modal meskipun gagal mendapatkan alamat
+                const alamat = '';
+                const bodyHTML = `
+                    <div class="form-group">
+                        <label>Lat: ${lat.toFixed(6)}, Lng: ${lng.toFixed(6)}</label>
+                    </div>
+                    <div class="form-group">
+                        <label>Nama Rumah Ibadah</label>
+                        <input type="text" id="modalIbadahNama" placeholder="Nama Rumah Ibadah">
+                    </div>
+                    <div class="form-group">
+                        <label>Alamat (Manual)</label>
+                        <textarea id="modalIbadahAlamat" rows="3" placeholder="Masukkan alamat manual">${alamat}</textarea>
+                    </div>
+                    <div class="form-group">
+                        <label>Radius (m)</label>
+                        <input type="number" id="modalIbadahRadius" value="500">
+                    </div>
+                `;
+                
+                openModal("Tambah Rumah Ibadah", bodyHTML, function() {
+                    window.saveNewIbadah(lat, lng, 'modalIbadahNama', 'modalIbadahAlamat', 'modalIbadahRadius');
+                });
+                
+                window.deactivateAddMode();
+            });
+    }
+});
+
+window.saveNewIbadah = function(lat, lng, namaId, alamatId, radiusId) {
+    const nama = document.getElementById(namaId).value;
+    const alamat = document.getElementById(alamatId).value;
+    const radius = document.getElementById(radiusId).value;
+
+    if (!nama) {
+        alert("Nama Rumah Ibadah harus diisi!");
+        return;
+    }
+
+    fetch('api/rumah_ibadah/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, alamat, radius, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadRumahIbadah();
+        } else { alert(data.message); }
+    });
+};
+
+window.openEditIbadahModal = function(id) {
+    let d = null;
+    rumahIbadahLayer.eachLayer(function(layer) {
+        if (layer.ibadahData && layer.ibadahData.id == id) d = layer.ibadahData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama Rumah Ibadah</label>
+            <input type="text" id="editIbadahNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>Alamat</label>
+            <textarea id="editIbadahAlamat" rows="2">${d.alamat}</textarea>
+        </div>
+        <div class="form-group">
+            <label>Radius (m)</label>
+            <input type="number" id="editIbadahRadius" value="${d.radius}" oninput="previewRadius(${d.id}, this.value)">
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit Rumah Ibadah", bodyHTML, function() {
+        window.saveEditIbadah(d.id, d.lat, d.lng, 'editIbadahNama', 'editIbadahAlamat', 'editIbadahRadius');
+    });
+};
+
+window.previewRadius = function(id, newRadius) {
+    rumahIbadahLayer.eachLayer(function(layer) {
+        // layer ini bisa marker atau circle, kita cek yang punya circleLayer (marker)
+        if (layer.ibadahData && layer.ibadahData.id === id && layer.circleLayer) {
+            layer.circleLayer.setRadius(parseFloat(newRadius));
+            layer.ibadahData.radius = parseFloat(newRadius);
+            updateSemuaWarnaMiskin(); // Update warna miskin real-time
+        }
+    });
+};
+
+window.saveEditIbadah = function(id, lat, lng, namaId, alamatId, radiusId) {
+    const nama = document.getElementById(namaId).value;
+    const alamat = document.getElementById(alamatId).value;
+    const radius = document.getElementById(radiusId).value;
+    updateIbadah(id, nama, alamat, radius, lat, lng);
+};
+
+function updateIbadah(id, nama, alamat, radius, lat, lng) {
+    fetch('api/rumah_ibadah/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, alamat, radius, lat, lng })
+    }).then(res => res.json()).then(data => {
+        if(data.status === 'success') { map.closePopup(); loadRumahIbadah(); }
+    });
+}
+
+window.deleteIbadah = function(id) {
+    openConfirmModal("Yakin hapus rumah ibadah ini?", function() {
+        fetch('api/rumah_ibadah/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        }).then(res => res.json()).then(data => {
+            if(data.status === 'success') { map.closePopup(); loadRumahIbadah(); }
+        });
+    });
+};
+
+
+// --- Penduduk Miskin ---
+function loadPendudukMiskin() {
+    pendudukMiskinLayer.clearLayers();
+    miskinMarkerList = [];
+    fetch('api/penduduk_miskin/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addMiskinMarker(item);
+                });
+                updateSemuaWarnaMiskin();
+            }
+        });
+}
+
+function addMiskinMarker(item) {
+    const marker = L.marker([item.lat, item.lng], { icon: miskinHijauIcon, draggable: true });
+    marker.miskinData = item;
+    
+    const d = item;
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">Penduduk Miskin ${d.nama}</h4>
+            <p style="margin: 0 0 10px 0;"><b>Bantuan:</b> ${d.kategori_bantuan}</p>
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditMiskinModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteMiskin(${d.id})">Hapus</button>
+            </div>
+        </div>
+    `;
+    marker.bindPopup(popupContent);
+
+    marker.on('dragend', function(e) {
+        const newPos = marker.getLatLng();
+        item.lat = newPos.lat;
+        item.lng = newPos.lng;
+        updateSemuaWarnaMiskin(); // Update warna segera
+        // Simpan ke DB
+        fetch('api/penduduk_miskin/update.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(item)
+        });
+    });
+
+    miskinMarkerList.push(marker);
+    pendudukMiskinLayer.addLayer(marker);
+}
+
+window.formAddMiskin = function(lat, lng) {
+    const popupContent = `
+        <div class="popup-form">
+            <h4>Penduduk Miskin Baru</h4>
+            <input type="text" id="miskinNama" placeholder="Nama Penduduk">
+            <select id="miskinKategori">
+                <option value="Makan">Bantuan Makan</option>
+                <option value="Pemberdayaan">Pemberdayaan</option>
+            </select>
+            <button onclick="saveNewMiskin(${lat}, ${lng})">Simpan</button>
+        </div>
+    `;
+    map.closePopup();
+    L.popup().setLatLng([lat, lng]).setContent(popupContent).openOn(map);
+};
+
+window.saveNewMiskin = function(lat, lng) {
+    const nama = document.getElementById('miskinNama').value;
+    const kategori_bantuan = document.getElementById('miskinKategori').value;
+
+    fetch('api/penduduk_miskin/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, kategori_bantuan, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            loadPendudukMiskin();
+        } else { alert(data.message); }
+    });
+};
+
+window.openEditMiskinModal = function(id) {
+    let d = null;
+    pendudukMiskinLayer.eachLayer(function(layer) {
+        if (layer.miskinData && layer.miskinData.id == id) d = layer.miskinData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama Penduduk</label>
+            <input type="text" id="editMiskinNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>Bantuan</label>
+            <select id="editMiskinKategori">
+                <option value="Makan" ${d.kategori_bantuan === 'Makan' ? 'selected' : ''}>Bantuan Makan</option>
+                <option value="Pemberdayaan" ${d.kategori_bantuan === 'Pemberdayaan' ? 'selected' : ''}>Pemberdayaan</option>
+            </select>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit Penduduk Miskin", bodyHTML, function() {
+        window.saveEditMiskin(d.id, d.lat, d.lng, 'editMiskinNama', 'editMiskinKategori');
+    });
+};
+
+window.saveEditMiskin = function(id, lat, lng, namaId, kategoriId) {
+    const nama = document.getElementById(namaId).value;
+    const kategori_bantuan = document.getElementById(kategoriId).value;
+    fetch('api/penduduk_miskin/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, kategori_bantuan, lat, lng })
+    }).then(res => res.json()).then(data => {
+        if(data.status === 'success') { closeModal(); loadPendudukMiskin(); }
+    });
+};
+
+window.deleteMiskin = function(id) {
+    openConfirmModal("Yakin hapus penduduk miskin ini?", function() {
+        fetch('api/penduduk_miskin/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        }).then(res => res.json()).then(data => {
+            if(data.status === 'success') { map.closePopup(); loadPendudukMiskin(); }
+        });
+    });
+};
+
+// Logika dinamis warna: Merah jika di dalam salah satu radius Rumah Ibadah, Hijau jika di luar
+function updateSemuaWarnaMiskin() {
+    miskinMarkerList.forEach(marker => {
+        let inRadius = false;
+        const pLatlng = L.latLng(marker.miskinData.lat, marker.miskinData.lng);
+        
+        for (let i = 0; i < ibadahDataList.length; i++) {
+            const ibadah = ibadahDataList[i];
+            const iLatlng = L.latLng(ibadah.lat, ibadah.lng);
+            const dist = pLatlng.distanceTo(iLatlng); // meter
+            
+            if (dist <= ibadah.radius) {
+                inRadius = true;
+                break; // Jika sudah masuk satu radius, langsung merah
+            }
+        }
+        
+        if (inRadius) {
+            marker.setIcon(makeMiskinIcon(true));
+        } else {
+            marker.setIcon(makeMiskinIcon(false));
+        }
+    });
+}
+
+// Initial Load
+loadRumahIbadah();
+loadPendudukMiskin();

assets/js/features/parsil.js

@@ -0,0 +1,149 @@
+// --- Fitur Parsil ---
+
+const parsilColors = {
+    'SHM': '#28a745', // Hijau
+    'HGB': '#17a2b8', // Biru Muda
+    'HGU': '#ffc107', // Kuning
+    'HP':  '#fd7e14'  // Oranye
+};
+
+function loadParsil() {
+    parsilLayer.clearLayers();
+    fetch('api/parsil/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addParsilToMap(item);
+                });
+            }
+        });
+}
+
+function addParsilToMap(item) {
+    // geom adalah GeoJSON Polygon
+    // coordinates pada Polygon formatnya: [[[lng, lat], [lng, lat], ...]]
+    // Leaflet Polygon butuh array of [lat, lng]
+    const latlngs = item.geom.coordinates[0].map(coord => [coord[1], coord[0]]);
+    
+    const polygon = L.polygon(latlngs, {
+        color: parsilColors[item.status] || '#3388ff',
+        fillColor: parsilColors[item.status] || '#3388ff',
+        fillOpacity: 0.5,
+        weight: 2
+    });
+
+    polygon.parsilData = item;
+
+    const d = item;
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">Parsil ${d.nama || ''}</h4>
+            <p style="margin: 0 0 5px 0;"><b>Status:</b> ${d.status}</p>
+            <p style="margin: 0 0 10px 0;"><b>Luas:</b> ${d.luas.toFixed(2)} m²</p>
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditParsilModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteParsil(${d.id})">Hapus</button>
+            </div>
+        </div>
+    `;
+    polygon.bindPopup(popupContent);
+
+    parsilLayer.addLayer(polygon);
+}
+
+window.openEditParsilModal = function(id) {
+    let d = null;
+    parsilLayer.eachLayer(function(layer) {
+        if (layer.parsilData && layer.parsilData.id == id) d = layer.parsilData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama Pemilik/Area</label>
+            <input type="text" id="editParsilNama" value="${d.nama || ''}">
+        </div>
+        <div class="form-group">
+            <label>Status</label>
+            <select id="editParsilStatus">
+                <option value="SHM" ${d.status === 'SHM' ? 'selected' : ''}>SHM</option>
+                <option value="HGB" ${d.status === 'HGB' ? 'selected' : ''}>HGB</option>
+                <option value="HGU" ${d.status === 'HGU' ? 'selected' : ''}>HGU</option>
+                <option value="HP" ${d.status === 'HP' ? 'selected' : ''}>HP</option>
+            </select>
+        </div>
+        <div class="form-group">
+            <label>Luas: ${d.luas.toFixed(2)} m²</label>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit Parsil Tanah", bodyHTML, function() {
+        window.saveEditParsil(d.id, 'editParsilNama', 'editParsilStatus');
+    });
+};
+
+window.saveEditParsil = function(id, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    fetch('api/parsil/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, status })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            loadParsil();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.deleteParsil = function(id) {
+    openConfirmModal("Yakin hapus parsil ini?", function() {
+        fetch('api/parsil/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadParsil();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+window.saveNewParsil = function(geoJsonStr, luas, namaId, statusId) {
+    const nama = document.getElementById(namaId).value;
+    const status = document.getElementById(statusId).value;
+
+    const geom = JSON.parse(geoJsonStr);
+
+    fetch('api/parsil/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, status, luas, geom })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadParsil();
+        } else {
+            alert(data.message);
+        }
+    });
+    return true;
+};
+
+// Initial Load
+loadParsil();

assets/js/features/spbu.js

@@ -0,0 +1,204 @@
+// --- Fitur SPBU ---
+
+// Emoji Bubble Icon builder
+function makeSpbuIcon(is24) {
+    const cls = is24 ? 'spbu-24' : 'spbu-not24';
+    return L.divIcon({
+        className: '',
+        html: `<div class="emoji-marker"><div class="bubble ${cls}"><span>⛽</span></div></div>`,
+        iconSize: [38, 38],
+        iconAnchor: [19, 38],
+        popupAnchor: [0, -40]
+    });
+}
+
+const spbuGreenIcon = makeSpbuIcon(true);
+const spbuRedIcon   = makeSpbuIcon(false);
+
+let isDrawingMode = false; // Akan diset true saat draw mode aktif (jalan/parsil)
+
+
+// Fetch SPBU
+function loadSpbu() {
+    spbuLayer.clearLayers();
+    fetch('api/spbu/read.php')
+        .then(res => res.json())
+        .then(data => {
+            if (data.status === 'success' && data.data) {
+                data.data.forEach(item => {
+                    addSpbuMarker(item);
+                });
+            }
+        });
+}
+
+function addSpbuMarker(item) {
+    const icon = makeSpbuIcon(item.is_24_jam);
+    const marker = L.marker([item.lat, item.lng], {
+        icon: icon,
+        draggable: true
+    });
+
+    marker.spbuData = item; // Simpan data di objek marker
+
+    // Hitung popupContent sekali saat marker dibuat
+    const d = item;
+    const popupContent = `
+        <div style="font-family: Arial, sans-serif; min-width: 150px;">
+            <h4 style="margin:0 0 5px 0;">SPBU ${d.nama}</h4>
+            <p style="margin: 0 0 5px 0;"><b>No. WA:</b> ${d.no_wa}</p>
+            <p style="margin: 0 0 10px 0;"><b>Buka 24 Jam:</b> ${d.is_24_jam ? 'Ya' : 'Tidak'}</p>
+            <div style="display:flex; gap:5px;">
+                <button style="padding:4px 8px; background:#007bff; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="openEditSpbuModal(${d.id})">Edit</button>
+                <button style="padding:4px 8px; background:#dc3545; color:white; border:none; border-radius:3px; cursor:pointer;" onclick="deleteSpbu(${d.id})">Hapus</button>
+            </div>
+        </div>
+    `;
+    marker.bindPopup(popupContent);
+
+    // Event drag untuk update koordinat
+    marker.on('dragend', function(e) {
+        const newPos = marker.getLatLng();
+        updateSpbu(item.id, item.nama, item.no_wa, item.is_24_jam, newPos.lat, newPos.lng);
+    });
+
+    spbuLayer.addLayer(marker);
+}
+
+// Map Click -> Form Add
+map.on('click', function(e) {
+    if (isDrawingMode) return; // Jangan muncul form jika sedang gambar garis/polygon
+    
+    // Hanya proses jika mode tambah SPBU aktif
+    if (window.currentAddMode === 'spbu') {
+        const bodyHTML = `
+            <div class="form-group">
+                <label>Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}</label>
+            </div>
+            <div class="form-group">
+                <label>Nama SPBU</label>
+                <input type="text" id="modalSpbuNama" placeholder="Nama SPBU">
+            </div>
+            <div class="form-group">
+                <label>No. WA</label>
+                <input type="text" id="modalSpbuWa" placeholder="No. WA">
+            </div>
+            <div class="form-group">
+                <label>Buka 24 Jam?</label>
+                <div class="radio-group" style="margin-top:5px;">
+                    <label><input type="radio" name="modalSpbu24" value="1"> Ya</label>
+                    <label><input type="radio" name="modalSpbu24" value="0" checked> Tidak</label>
+                </div>
+            </div>
+        `;
+
+        openModal("Tambah SPBU Baru", bodyHTML, function() {
+            window.saveNewSpbu(e.latlng.lat, e.latlng.lng, 'modalSpbuNama', 'modalSpbuWa', 'modalSpbu24');
+        });
+
+        // Nonaktifkan mode tambah setelah modal muncul
+        window.deactivateAddMode();
+    }
+});
+
+window.saveNewSpbu = function(lat, lng, namaId, waId, radioName) {
+    const nama = document.getElementById(namaId).value;
+    if (!nama) {
+        alert("Nama SPBU harus diisi!");
+        return;
+    }
+    const no_wa = document.getElementById(waId).value;
+    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
+
+    fetch('api/spbu/create.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ nama, no_wa, is_24_jam, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            closeModal();
+            loadSpbu();
+        } else {
+            alert(data.message);
+        }
+    });
+};
+
+window.openEditSpbuModal = function(id) {
+    let d = null;
+    spbuLayer.eachLayer(function(layer) {
+        if (layer.spbuData && layer.spbuData.id == id) d = layer.spbuData;
+    });
+    if (!d) return;
+
+    const bodyHTML = `
+        <div class="form-group">
+            <label>Nama SPBU</label>
+            <input type="text" id="editSpbuNama" value="${d.nama}">
+        </div>
+        <div class="form-group">
+            <label>No. WA</label>
+            <input type="text" id="editSpbuWa" value="${d.no_wa}">
+        </div>
+        <div class="form-group">
+            <label>Buka 24 Jam?</label>
+            <div class="radio-group" style="margin-top:5px;">
+                <label><input type="radio" name="editSpbu24" value="1" ${d.is_24_jam ? 'checked' : ''}> Ya</label>
+                <label><input type="radio" name="editSpbu24" value="0" ${!d.is_24_jam ? 'checked' : ''}> Tidak</label>
+            </div>
+        </div>
+    `;
+    map.closePopup();
+    openModal("Edit SPBU", bodyHTML, function() {
+        window.saveEditSpbu(d.id, d.lat, d.lng, 'editSpbuNama', 'editSpbuWa', 'editSpbu24');
+    });
+};
+
+window.saveEditSpbu = function(id, lat, lng, namaId, waId, radioName) {
+    const nama = document.getElementById(namaId).value;
+    const no_wa = document.getElementById(waId).value;
+    const is_24_jam = document.querySelector(`input[name="${radioName}"]:checked`).value;
+
+    updateSpbu(id, nama, no_wa, is_24_jam, lat, lng);
+};
+
+function updateSpbu(id, nama, no_wa, is_24_jam, lat, lng) {
+    fetch('api/spbu/update.php', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, nama, no_wa, is_24_jam, lat, lng })
+    })
+    .then(res => res.json())
+    .then(data => {
+        if(data.status === 'success') {
+            map.closePopup();
+            loadSpbu();
+        } else {
+            alert(data.message);
+        }
+    });
+}
+
+window.deleteSpbu = function(id) {
+    openConfirmModal("Yakin hapus SPBU ini?", function() {
+        fetch('api/spbu/delete.php', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ id })
+        })
+        .then(res => res.json())
+        .then(data => {
+            if(data.status === 'success') {
+                map.closePopup();
+                loadSpbu();
+            } else {
+                alert(data.message);
+            }
+        });
+    });
+};
+
+// Initial Load
+loadSpbu();