powji17
405 lines
20 KiB
JavaScript
405 lines
20 KiB
JavaScript
// --- INISIALISASI PETA (Koordinat Pontianak) ---
|
|
const map = L.map('map').setView([-0.055348, 109.349512], 13);
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);
|
|
|
|
const popup = L.popup();
|
|
const daftarMarker = {}, daftarPolyline = {}, daftarPolygon = {};
|
|
|
|
let currentMode = 'point';
|
|
let tempLatLngs = [], tempPolyline = null;
|
|
let tempPolygonLatLngs = [], tempPolygon = null;
|
|
let targetEditJalanId = null; // Menyimpan ID jalan yang sedang diedit
|
|
let targetEditKavlingId = null; // Menyimpan ID kavling yang sedang diedit
|
|
|
|
// Konfigurasi SweetAlert2 (Toast Pojok Kanan Atas)
|
|
const Toast = Swal.mixin({
|
|
toast: true, position: 'top-end', showConfirmButton: false, timer: 3000, timerProgressBar: true
|
|
});
|
|
|
|
// Definisi Ikon Kustom
|
|
const ikonHijau = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] });
|
|
const ikonMerah = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] });
|
|
|
|
// --- MANAJEMEN MODE UI ---
|
|
function ubahMode(mode) {
|
|
currentMode = mode;
|
|
|
|
// Matikan mode edit Geoman global jika sedang aktif
|
|
map.pm.disableGlobalEditMode();
|
|
|
|
// Reset state edit
|
|
if (targetEditJalanId) batalkanEditJalan();
|
|
if (targetEditKavlingId) batalkanEditKavling();
|
|
|
|
// Atur tampilan tombol aktif
|
|
document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
|
|
document.querySelector(`.mode-btn[data-mode="${mode}"]`).classList.add('active');
|
|
|
|
// Munculkan menu yang sesuai di sidebar
|
|
document.getElementById('polyline-actions').style.display = (mode === 'polyline') ? 'block' : 'none';
|
|
document.getElementById('polygon-actions').style.display = (mode === 'polygon') ? 'block' : 'none';
|
|
document.getElementById('edit-jalan-actions').style.display = (mode === 'edit_jalan') ? 'block' : 'none';
|
|
document.getElementById('edit-kavling-actions').style.display = (mode === 'edit_kavling') ? 'block' : 'none';
|
|
|
|
map.closePopup();
|
|
if (mode !== 'polyline') batalPolyline();
|
|
if (mode !== 'polygon') batalPolygon();
|
|
}
|
|
|
|
// --- FUNGSI BANTUAN ---
|
|
function hitungPanjangJalan(latlngs) { let t=0; for (let i=0; i<latlngs.length-1; i++) t += map.distance(latlngs[i], latlngs[i + 1]); return t; }
|
|
function warnaJalan(s) { return (s === 'Nasional') ? 'red' : (s === 'Provinsi') ? 'yellow' : (s === 'Kabupaten') ? 'green' : 'blue'; }
|
|
function hitungLuasArea(latlngs) {
|
|
let area = 0, p = Array.isArray(latlngs[0]) ? latlngs[0] : latlngs;
|
|
area = L.GeometryUtil ? L.GeometryUtil.geodesicArea(p) : 0;
|
|
if (area === 0) {
|
|
const R = 6378137, rad = Math.PI / 180;
|
|
for (let i = 0; i < p.length; i++) {
|
|
let p1 = p[i], p2 = p[(i + 1) % p.length];
|
|
area += (p2.lng - p1.lng) * rad * (2 + Math.sin(p1.lat * rad) + Math.sin(p2.lat * rad));
|
|
}
|
|
area = Math.abs(area * R * R / 2);
|
|
} return area;
|
|
}
|
|
function warnaPolygon(s) { return (s === 'SHM') ? 'red' : (s === 'HGB') ? 'blue' : (s === 'HGU') ? 'green' : (s === 'HP') ? 'yellow' : 'gray'; }
|
|
|
|
// --- LOAD DATA DARI DATABASE ---
|
|
function loadDB() {
|
|
fetch('load_spbu.php').then(res => res.json()).then(data => {
|
|
data.forEach(spbu => {
|
|
let marker = L.marker([spbu.lat, spbu.lng], { icon: (spbu.buka_24jam == '1') ? ikonHijau : ikonMerah, draggable: true }).addTo(map);
|
|
marker.bindPopup(`<b>${spbu.nama_spbu}</b><br>WA: ${spbu.no_wa}<br>24 Jam: ${spbu.buka_24jam == '1' ? 'Ya' : 'Tidak'}<hr><button onclick="hapusSPBU(${spbu.id})" style="color: red; width: 100%; cursor:pointer;"><i class="fa-solid fa-trash"></i> Hapus</button>`);
|
|
marker.on('dragend', function(e) { updateLokasiSPBU(spbu.id, e.target.getLatLng().lat, e.target.getLatLng().lng); });
|
|
daftarMarker[spbu.id] = marker;
|
|
});
|
|
});
|
|
|
|
fetch('load_jalan.php').then(res => res.json()).then(data => {
|
|
data.forEach(jalan => {
|
|
let geojsonGroup = L.geoJSON(jalan.geojson, { style: { color: warnaJalan(jalan.status), weight: 4 } }).addTo(map);
|
|
let polylineLayer = geojsonGroup.getLayers()[0]; // Ambil layer aslinya
|
|
|
|
polylineLayer.bindPopup(`<b>Jalan: ${jalan.nama_jalan}</b><br>Status: ${jalan.status}<br>Panjang: ${parseFloat(jalan.panjang_m).toFixed(2)} m<hr><button onclick="hapusPolyline(${jalan.id})" style="color: red; width: 100%; cursor:pointer;"><i class="fa-solid fa-trash"></i> Hapus</button>`);
|
|
|
|
// Tambahkan event click khusus untuk mode edit
|
|
polylineLayer.on('click', function(e) {
|
|
if (currentMode === 'edit_jalan') {
|
|
aktifkanEditJalan(jalan.id, jalan.nama_jalan);
|
|
}
|
|
});
|
|
|
|
daftarPolyline[jalan.id] = polylineLayer;
|
|
});
|
|
});
|
|
|
|
fetch('load_area.php').then(res => res.json()).then(data => {
|
|
data.forEach(area => {
|
|
let geojsonGroup = L.geoJSON(area.geojson, { style: { color: warnaPolygon(area.status_kepemilikan), fillOpacity: 0.4 } }).addTo(map);
|
|
let polygonLayer = geojsonGroup.getLayers()[0]; // Ambil layer aslinya
|
|
|
|
polygonLayer.bindPopup(`<b>Kavling: ${area.nama_kavling}</b><br>Status: ${area.status_kepemilikan}<br>Luas: ${parseFloat(area.luas_m2).toFixed(2)} m²<hr><button onclick="hapusPolygon(${area.id})" style="color: red; width: 100%; cursor:pointer;"><i class="fa-solid fa-trash"></i> Hapus</button>`);
|
|
|
|
// Tambahkan event click khusus untuk mode edit
|
|
polygonLayer.on('click', function(e) {
|
|
if (currentMode === 'edit_kavling') {
|
|
aktifkanEditKavling(area.id, area.nama_kavling);
|
|
}
|
|
});
|
|
|
|
daftarPolygon[area.id] = polygonLayer;
|
|
});
|
|
});
|
|
}
|
|
loadDB();
|
|
|
|
// --- EVENT KLIK PETA ---
|
|
function onMapClick(e) {
|
|
if (currentMode === 'point') {
|
|
let formHtml = `
|
|
<div style="width: 200px;">
|
|
<h4 style="margin-top:0; border-bottom:1px solid #ddd; padding-bottom:5px;"><i class="fa-solid fa-gas-pump"></i> SPBU Baru</h4>
|
|
<form onsubmit="simpanSPBU(event, ${e.latlng.lat}, ${e.latlng.lng})">
|
|
<input type="text" id="nama_spbu" placeholder="Nama SPBU" required style="width: 100%; margin-bottom: 8px; padding:6px; box-sizing:border-box;">
|
|
<input type="tel" id="no_wa" placeholder="No WhatsApp" required style="width: 100%; margin-bottom: 8px; padding:6px; box-sizing:border-box;">
|
|
<label style="font-size:12px; font-weight:bold;">Buka 24 Jam?</label><br>
|
|
<label><input type="radio" name="buka_24jam" value="1" required> Ya</label>
|
|
<label><input type="radio" name="buka_24jam" value="0"> Tidak</label><br><br>
|
|
<button type="submit" style="width: 100%; padding: 8px; background:#2ecc71; color:#fff; border:none; border-radius:4px; font-weight:bold; cursor:pointer;"><i class="fa-solid fa-save"></i> Simpan Data</button>
|
|
</form>
|
|
</div>`;
|
|
popup.setLatLng(e.latlng).setContent(formHtml).openOn(map);
|
|
} else if (currentMode === 'polyline') {
|
|
tempLatLngs.push(e.latlng);
|
|
if (!tempPolyline) tempPolyline = L.polyline(tempLatLngs, {color: '#3498db', weight: 4}).addTo(map);
|
|
else tempPolyline.setLatLngs(tempLatLngs);
|
|
} else if (currentMode === 'polygon') {
|
|
tempPolygonLatLngs.push(e.latlng);
|
|
if (!tempPolygon) tempPolygon = L.polygon(tempPolygonLatLngs, {color: '#2ecc71', fillColor: '#2ecc71', fillOpacity: 0.4}).addTo(map);
|
|
else tempPolygon.setLatLngs(tempPolygonLatLngs);
|
|
}
|
|
}
|
|
map.on('click', onMapClick);
|
|
|
|
// --- LOGIKA SPBU ---
|
|
function simpanSPBU(event, lat, lng) {
|
|
event.preventDefault();
|
|
let dataKirim = { lat: lat, lng: lng, nama_spbu: document.getElementById('nama_spbu').value, no_wa: document.getElementById('no_wa').value, buka_24jam: document.querySelector('input[name="buka_24jam"]:checked').value };
|
|
|
|
fetch('simpan_spbu.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(dataKirim) })
|
|
.then(res => res.json()).then(data => {
|
|
if (data.status === 'success') {
|
|
Toast.fire({ icon: 'success', title: 'SPBU Berhasil Disimpan!' });
|
|
map.closePopup();
|
|
let markerBaru = L.marker([lat, lng], { icon: (dataKirim.buka_24jam === '1') ? ikonHijau : ikonMerah, draggable: true }).addTo(map);
|
|
markerBaru.bindPopup(`<b>${dataKirim.nama_spbu}</b><br>WA: ${dataKirim.no_wa}<br>24 Jam: ${dataKirim.buka_24jam == '1' ? 'Ya' : 'Tidak'}<hr><button onclick="hapusSPBU(${data.id})" style="color: red; width: 100%; cursor:pointer;"><i class="fa-solid fa-trash"></i> Hapus</button>`);
|
|
markerBaru.on('dragend', function(e) { updateLokasiSPBU(data.id, e.target.getLatLng().lat, e.target.getLatLng().lng); });
|
|
daftarMarker[data.id] = markerBaru;
|
|
} else Toast.fire({ icon: 'error', title: 'Gagal Menyimpan SPBU!' });
|
|
});
|
|
}
|
|
function updateLokasiSPBU(id, latBaru, lngBaru) {
|
|
fetch('update_spbu.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: id, lat: latBaru, lng: lngBaru }) })
|
|
.then(res => res.json()).then(data => { if (data.status === 'success') Toast.fire({ icon: 'info', title: 'Posisi Diperbarui' }); });
|
|
}
|
|
function hapusSPBU(id) {
|
|
Swal.fire({ title: 'Hapus Titik SPBU?', text: "Data tidak dapat dikembalikan!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#3085d6', confirmButtonText: 'Ya, Hapus!', cancelButtonText: 'Batal'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
fetch('hapus_spbu.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: id }) })
|
|
.then(res => res.json()).then(data => {
|
|
if (data.status === 'success') { Toast.fire({ icon: 'success', title: 'Titik SPBU Dihapus!' }); if (daftarMarker[id]) { map.removeLayer(daftarMarker[id]); delete daftarMarker[id]; } }
|
|
else Toast.fire({ icon: 'error', title: 'Gagal Menghapus!' });
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- LOGIKA JALAN ---
|
|
function batalPolyline() { if (tempPolyline) { map.removeLayer(tempPolyline); tempPolyline = null; } tempLatLngs = []; }
|
|
function simpanPolyline() {
|
|
if (tempLatLngs.length < 2) return Toast.fire({ icon: 'warning', title: 'Klik minimal 2 titik di peta!' });
|
|
let nama = document.getElementById('input_nama_jalan').value, status = document.getElementById('input_status_jalan').value;
|
|
if (!nama) return Toast.fire({ icon: 'warning', title: 'Nama Jalan harus diisi!' });
|
|
|
|
let panjang = hitungPanjangJalan(tempLatLngs);
|
|
let dataKirim = { nama_jalan: nama, status: status, panjang_m: panjang, geojson: tempPolyline.toGeoJSON() };
|
|
|
|
fetch('simpan_jalan.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(dataKirim) })
|
|
.then(res => res.json()).then(data => {
|
|
if (data.status === 'success') {
|
|
Toast.fire({ icon: 'success', title: `Jalan Disimpan (${panjang.toFixed(0)}m)` });
|
|
tempPolyline.setStyle({color: warnaJalan(status)});
|
|
tempPolyline.bindPopup(`<b>Jalan: ${nama}</b><br>Status: ${status}<br>Panjang: ${panjang.toFixed(2)} m<hr><button onclick="hapusPolyline(${data.id})" style="color: red; width: 100%; cursor:pointer;"><i class="fa-solid fa-trash"></i> Hapus</button>`).openPopup();
|
|
|
|
daftarPolyline[data.id] = tempPolyline;
|
|
document.getElementById('input_nama_jalan').value = '';
|
|
|
|
// PERBAIKAN BUG: Hanya kosongkan variabel penampung sementara, jangan removeLayer dari map.
|
|
tempPolyline = null;
|
|
tempLatLngs = [];
|
|
} else Toast.fire({ icon: 'error', title: 'Gagal Menyimpan!' });
|
|
});
|
|
}
|
|
function hapusPolyline(id) {
|
|
Swal.fire({ title: 'Hapus Jalan?', text: "Data permanen dihapus!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#3085d6', confirmButtonText: 'Ya, Hapus!'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
fetch('hapus_jalan.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: id }) })
|
|
.then(res => res.json()).then(data => {
|
|
if (data.status === 'success') { Toast.fire({ icon: 'success', title: 'Jalan Dihapus!' }); if (daftarPolyline[id]) { map.removeLayer(daftarPolyline[id]); delete daftarPolyline[id]; } }
|
|
else Toast.fire({ icon: 'error', title: 'Gagal Menghapus!' });
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// --- LOGIKA KAVLING ---
|
|
function batalPolygon() { if (tempPolygon) { map.removeLayer(tempPolygon); tempPolygon = null; } tempPolygonLatLngs = []; }
|
|
function simpanPolygon() {
|
|
if (tempPolygonLatLngs.length < 3) return Toast.fire({ icon: 'warning', title: 'Minimal 3 titik untuk area!' });
|
|
let nama = document.getElementById('input_nama_kavling').value, status = document.getElementById('input_status_tanah').value;
|
|
if (!nama) return Toast.fire({ icon: 'warning', title: 'Nama kavling harus diisi!' });
|
|
|
|
let luas = hitungLuasArea(tempPolygonLatLngs);
|
|
let dataKirim = { nama_kavling: nama, status: status, luas_m2: luas, geojson: tempPolygon.toGeoJSON() };
|
|
|
|
fetch('simpan_area.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(dataKirim) })
|
|
.then(res => res.json()).then(data => {
|
|
if (data.status === 'success') {
|
|
Toast.fire({ icon: 'success', title: `Area Disimpan (${luas.toFixed(0)}m²)` });
|
|
tempPolygon.setStyle({color: warnaPolygon(status), fillOpacity: 0.5});
|
|
tempPolygon.bindPopup(`<b>Kavling: ${nama}</b><br>Status: ${status}<br>Luas: ${luas.toFixed(2)} m²<hr><button onclick="hapusPolygon(${data.id})" style="color:red; width: 100%; cursor:pointer;"><i class="fa-solid fa-trash"></i> Hapus</button>`).openPopup();
|
|
|
|
daftarPolygon[data.id] = tempPolygon;
|
|
document.getElementById('input_nama_kavling').value = '';
|
|
|
|
// PERBAIKAN BUG: Sama seperti Polyline
|
|
tempPolygon = null;
|
|
tempPolygonLatLngs = [];
|
|
} else Toast.fire({ icon: 'error', title: 'Gagal Menyimpan!' });
|
|
});
|
|
}
|
|
function hapusPolygon(id) {
|
|
Swal.fire({ title: 'Hapus Kavling?', text: "Area ini akan dihapus permanen!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#3085d6', confirmButtonText: 'Ya, Hapus!'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
fetch('hapus_area.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: id }) })
|
|
.then(res => res.json()).then(data => {
|
|
if (data.status === 'success') { Toast.fire({ icon: 'success', title: 'Kavling Dihapus!' }); if (daftarPolygon[id]) { map.removeLayer(daftarPolygon[id]); delete daftarPolygon[id]; } }
|
|
else Toast.fire({ icon: 'error', title: 'Gagal Menghapus!' });
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// ==========================================
|
|
// --- LOGIKA MODE EDIT POLYLINE (JALAN) ---
|
|
// ==========================================
|
|
|
|
function aktifkanEditJalan(id, namaJalan) {
|
|
let layer = daftarPolyline[id];
|
|
if (!layer) return;
|
|
|
|
// Jika sedang edit jalan lain, batalkan dulu
|
|
if (targetEditJalanId && targetEditJalanId !== id) {
|
|
batalkanEditJalan();
|
|
}
|
|
|
|
targetEditJalanId = id;
|
|
map.closePopup(); // Tutup popup info
|
|
|
|
// Tampilkan panel info dan tombol simpan di sidebar
|
|
document.getElementById('info-edit-jalan').style.display = 'block';
|
|
document.getElementById('nama-jalan-edit').innerText = "Edit: " + namaJalan;
|
|
document.getElementById('btn-simpan-edit-jalan').style.display = 'block';
|
|
|
|
// Aktifkan Leaflet.Geoman khusus pada layer ini
|
|
layer.pm.enable({
|
|
allowSelfIntersection: false,
|
|
});
|
|
}
|
|
|
|
function batalkanEditJalan() {
|
|
if (targetEditJalanId && daftarPolyline[targetEditJalanId]) {
|
|
daftarPolyline[targetEditJalanId].pm.disable();
|
|
}
|
|
targetEditJalanId = null;
|
|
document.getElementById('info-edit-jalan').style.display = 'none';
|
|
document.getElementById('btn-simpan-edit-jalan').style.display = 'none';
|
|
}
|
|
|
|
function simpanEditPolyline() {
|
|
if (!targetEditJalanId) return;
|
|
|
|
let layer = daftarPolyline[targetEditJalanId];
|
|
if (!layer) return;
|
|
|
|
// 1. Matikan mode edit
|
|
layer.pm.disable();
|
|
|
|
// 2. Kalkulasi ulang panjang
|
|
let latlngsBaru = layer.getLatLngs();
|
|
let panjangBaru = hitungPanjangJalan(latlngsBaru);
|
|
|
|
// 3. Konversi ke GeoJSON
|
|
let geojsonBaru = layer.toGeoJSON();
|
|
|
|
let dataKirim = {
|
|
id: targetEditJalanId,
|
|
panjang_m: panjangBaru,
|
|
geojson: geojsonBaru
|
|
};
|
|
|
|
fetch('update_jalan.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(dataKirim)
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
Toast.fire({ icon: 'success', title: `Bentuk Jalan Diperbarui!\nPanjang: ${panjangBaru.toFixed(0)}m` });
|
|
batalkanEditJalan();
|
|
|
|
// Reload halaman secara otomatis setelah 1.5 detik agar data popup ikut ter-refresh
|
|
setTimeout(() => { window.location.reload(); }, 1500);
|
|
} else {
|
|
Toast.fire({ icon: 'error', title: 'Gagal memperbarui jalan: ' + data.message });
|
|
batalkanEditJalan();
|
|
}
|
|
}).catch(error => console.error('Error:', error));
|
|
}
|
|
|
|
|
|
// ===========================================
|
|
// --- LOGIKA MODE EDIT POLYGON (KAVLING) ---
|
|
// ===========================================
|
|
|
|
function aktifkanEditKavling(id, namaKavling) {
|
|
let layer = daftarPolygon[id];
|
|
if (!layer) return;
|
|
|
|
// Jika sedang edit kavling lain, batalkan dulu
|
|
if (targetEditKavlingId && targetEditKavlingId !== id) {
|
|
batalkanEditKavling();
|
|
}
|
|
|
|
targetEditKavlingId = id;
|
|
map.closePopup();
|
|
|
|
// Tampilkan panel info dan tombol simpan di sidebar
|
|
document.getElementById('info-edit-kavling').style.display = 'block';
|
|
document.getElementById('nama-kavling-edit').innerText = "Edit: " + namaKavling;
|
|
document.getElementById('btn-simpan-edit-kavling').style.display = 'block';
|
|
|
|
// Aktifkan Leaflet.Geoman khusus pada layer ini
|
|
layer.pm.enable({
|
|
allowSelfIntersection: false,
|
|
});
|
|
}
|
|
|
|
function batalkanEditKavling() {
|
|
if (targetEditKavlingId && daftarPolygon[targetEditKavlingId]) {
|
|
daftarPolygon[targetEditKavlingId].pm.disable();
|
|
}
|
|
targetEditKavlingId = null;
|
|
document.getElementById('info-edit-kavling').style.display = 'none';
|
|
document.getElementById('btn-simpan-edit-kavling').style.display = 'none';
|
|
}
|
|
|
|
function simpanEditPolygon() {
|
|
if (!targetEditKavlingId) return;
|
|
|
|
let layer = daftarPolygon[targetEditKavlingId];
|
|
if (!layer) return;
|
|
|
|
layer.pm.disable();
|
|
|
|
let latlngsBaru = layer.getLatLngs();
|
|
let luasBaru = hitungLuasArea(latlngsBaru);
|
|
let geojsonBaru = layer.toGeoJSON();
|
|
|
|
let dataKirim = {
|
|
id: targetEditKavlingId,
|
|
luas_m2: luasBaru,
|
|
geojson: geojsonBaru
|
|
};
|
|
|
|
fetch('update_area.php', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(dataKirim)
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
Toast.fire({ icon: 'success', title: `Bentuk Kavling Diperbarui!\nLuas: ${luasBaru.toFixed(0)}m²` });
|
|
batalkanEditKavling();
|
|
|
|
setTimeout(() => { window.location.reload(); }, 1500);
|
|
} else {
|
|
Toast.fire({ icon: 'error', title: 'Gagal memperbarui kavling: ' + data.message });
|
|
batalkanEditKavling();
|
|
}
|
|
}).catch(error => console.error('Error:', error));
|
|
} |