AleksanderWilliam/WebGIS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove fitur jalan, parsil, dan spbu

Browse Source
This commit is contained in:
Aleksander William
2026-06-09 17:46:57 +07:00
parent 25bdf082cc
commit f4065a84b6
10 changed files with 23 additions and 807 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGISPovertyMap/script.js
+11 -501
View File
@@ -6,18 +6,13 @@ var map = L.map('map', { zoomControl: false }).setView([-0.0227, 109.3425], 14);
// Zoom control di kanan bawah (lebih bersih)
L.control.zoom({ position: 'bottomright' }).addTo(map);
// Membuat panel khusus untuk Jalan
map.createPane('jalanPane');
map.getPane('jalanPane').style.zIndex = 450;
// Custom pane initialization removed
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Layer Group untuk masing-masing data
var markersLayer = L.layerGroup().addTo(map);
var jalanLayer = L.layerGroup().addTo(map);
var parsilLayer = L.layerGroup().addTo(map);
var drawnItems = new L.FeatureGroup().addTo(map);
//var batasKotaLayer = L.layerGroup().addTo(map);
//var sungaiLayer = L.layerGroup().addTo(map);
@@ -30,9 +25,6 @@ var povertyHeatLayer = L.heatLayer([], { radius: 22, blur: 18, maxZoom: 17 }).ad
// Inisialisasi Layers Control (di kanan atas)
var overlayMaps = {
"⛽ Stasiun SPBU": markersLayer,
"🛣️ Jaringan Jalan": jalanLayer,
"🏘️ Parsil Bangunan": parsilLayer,
"🕌 Rumah Ibadah": rumahIbadahLayer,
"🔥 Kepadatan Kemiskinan (Heatmap)": povertyHeatLayer,
"👥 Penduduk Terdekat (Analisis)": pendudukMiskinLayer
@@ -42,23 +34,7 @@ L.control.layers(null, overlayMaps, { collapsed: true, position: 'bottomleft' })
// ==========================================
// ICON DEFINITIONS
// ==========================================
var greenIcon = 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]
});
var redIcon = 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]
});
var blueIcon = L.icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.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]
});
// Unused marker icons removed
// Icon Rumah Ibadah Kustom — bangunan rumah ibadah bergaya universal
var rumahIbadahIcon = L.divIcon({
@@ -79,231 +55,12 @@ var rumahIbadahIcon = L.divIcon({
popupAnchor: [0, -38]
});
// ==========================================
// 2. TOOLBAR LEAFLET DRAW
// ==========================================
var drawControl = new L.Control.Draw({
draw: {
polyline: true, polygon: true, marker: true,
circle: false, rectangle: false, circlemarker: false
},
edit: false
});
//map.addControl(drawControl);
// Leaflet Draw toolbar removed
// ==========================================
// 3. FUNGSI LOAD DATA DARI DATABASE
// ==========================================
function loadSPBU() {
markersLayer.clearLayers();
spbuMarkers = {};
fetch('load.php?jenis=spbu').then(res => res.json()).then(data => {
data.forEach(item => {
var actionButtons = '';
if (IS_ADMIN) {
actionButtons = `
<div class="btn-group">
<button class="btn btn-edit" onclick="formEditSPBU('${item.id}', '${item.nama_spbu}', '${item.no_hp}', '${item.kategori}')">✏️ Edit</button>
<button class="btn btn-delete" onclick="deleteData('spbu_locations', '${item.id}')">🗑️ Hapus</button>
</div>
`;
}
var statusBuka = item.kategori === 'Ya' ? 'Buka 24 Jam' : 'Reguler';
var icon = item.kategori === 'Ya' ? greenIcon : redIcon;
var statusColor = item.kategori === 'Ya' ? '#10b981' : '#ef4444';
var viewHTML = `
<div class="popup-container" id="popup-spbu-${item.id}">
<div class="popup-header">
<h4>${item.nama_spbu}</h4>
<span class="popup-type-badge">⛽ Stasiun SPBU</span>
</div>
<div class="popup-body">
<div class="info-row">
<span class="info-label">Telepon</span>
<span class="info-value">${item.no_hp || '—'}</span>
</div>
<div class="info-row">
<span class="info-label">Status Operasional</span>
<span class="info-value" style="color:${statusColor}; font-weight:600;">● ${statusBuka}</span>
</div>
${actionButtons}
</div>
</div>`;
var marker = L.marker([item.latitude, item.longitude], { icon: icon, draggable: false })
.bindPopup(viewHTML).addTo(markersLayer);
spbuMarkers[String(item.id)] = marker;
marker.on('click', function () { map.flyTo(marker.getLatLng(), 17, { animate: true }); });
databasePencarian.push({
namaLower: item.nama_spbu.toLowerCase(),
namaAsli: item.nama_spbu,
kategori: 'SPBU',
ikon: '⛽',
tipe: 'titik',
layer: marker
});
marker.on('dragend', function (e) {
var position = marker.getLatLng();
if (document.getElementById('edit_lat')) {
document.getElementById('edit_lat').value = position.lat;
document.getElementById('edit_lng').value = position.lng;
}
marker.openPopup();
});
});
}).catch(e => console.log('Belum ada data SPBU'));
}
function openEditKonfirmasi(id, nama, hp, kategori, lat, lng) {
var marker = spbuMarkers[String(id)];
var editHTML = `
<div class="popup-container">
<div class="popup-header" style="background: linear-gradient(135deg, #92400e, #f59e0b);">
<h4>Konfirmasi Perubahan</h4>
<span class="popup-type-badge">📍 Posisi telah digeser</span>
</div>
<div class="popup-body">
<form onsubmit="updateData(event, 'spbu_locations', '${id}')">
<input type="text" id="edit_nama" value="${nama}" placeholder="Nama SPBU" required>
<input type="text" id="edit_hp" value="${hp}" placeholder="No HP">
<select id="edit_kategori">
<option value="Ya" ${kategori === 'Ya' ? 'selected' : ''}>Buka 24 Jam</option>
<option value="Tidak" ${kategori === 'Tidak' ? 'selected' : ''}>Reguler</option>
</select>
<input type="hidden" id="edit_lat" value="${lat}">
<input type="hidden" id="edit_lng" value="${lng}">
<div class="btn-group">
<button type="submit" class="btn btn-save">💾 Simpan</button>
<button type="button" class="btn btn-delete" onclick="map.closePopup();">Batal</button>
</div>
</form>
</div>
</div>`;
marker.setPopupContent(editHTML);
marker.openPopup();
}
function loadJalan() {
jalanLayer.clearLayers();
fetch('load.php?jenis=jalan').then(res => res.json()).then(data => {
data.forEach(item => {
try {
var actionButtons = '';
if (IS_ADMIN) {
actionButtons = `
<div class="btn-group">
<button class="btn btn-edit" onclick="formEditJalan('${item.id}', '${item.nama_jalan}', '${item.status}')">✏️ Edit</button>
<button class="btn btn-delete" onclick="deleteData('jalan', '${item.id}')">🗑️ Hapus</button>
</div>
`;
}
var geom = JSON.parse(item.koordinat);
var warna = item.status === 'Jalan Nasional' ? '#ef4444'
: item.status === 'Jalan Provinsi' ? '#eab308'
: '#10b981';
var viewHTML = `
<div class="popup-container" id="popup-jalan-${item.id}">
<div class="popup-header" style="background: linear-gradient(135deg, #134e4a, #0f766e);">
<h4>${item.nama_jalan}</h4>
<span class="popup-type-badge">🛣️ Jaringan Jalan</span>
</div>
<div class="popup-body">
<div class="info-row">
<span class="info-label">Status</span>
<span class="info-value">${item.status}</span>
</div>
<div class="info-row">
<span class="info-label">Panjang</span>
<span class="info-value">${item.panjang} m</span>
</div>
${actionButtons}
</div>
</div>`;
var layerJalan = L.geoJSON(geom, { style: { color: warna, weight: 5 } })
.bindPopup(viewHTML).addTo(jalanLayer);
layerJalan.on('click', function () { map.fitBounds(layerJalan.getBounds()); });
databasePencarian.push({
namaLower: item.nama_jalan.toLowerCase(),
namaAsli: item.nama_jalan,
kategori: 'Jalan',
ikon: '🛣️',
tipe: 'area',
layer: layerJalan
});
} catch (error) { console.error("Error parse koordinat jalan", error); }
});
}).catch(e => console.log('Belum ada data Jalan'));
}
function loadParsil() {
parsilLayer.clearLayers();
fetch('load.php?jenis=parsil').then(res => res.json()).then(data => {
data.forEach(item => {
var actionButtons = '';
if (IS_ADMIN) {
actionButtons = `
<div class="btn-group">
<button class="btn btn-edit" onclick="formEditParsil('${item.id}', '${item.nama_pemilik}', '${item.status}')">✏️ Edit</button>
<button class="btn btn-delete" onclick="deleteData('parsil', '${item.id}')">🗑️ Hapus</button>
</div>
`;
}
var geom = JSON.parse(item.koordinat);
var warna = item.status === 'SHM' ? 'green'
: item.status === 'HGB' ? 'blue'
: item.status === 'HGU' ? 'purple'
: 'orange';
var viewHTML = `
<div class="popup-container" id="popup-parsil-${item.id}">
<div class="popup-header" style="background: linear-gradient(135deg, #4a1d96, #7c3aed);">
<h4>${item.nama_pemilik}</h4>
<span class="popup-type-badge">🏘️ Parsil Bangunan</span>
</div>
<div class="popup-body">
<div class="info-row">
<span class="info-label">Status Tanah</span>
<span class="info-value">${item.status}</span>
</div>
<div class="info-row">
<span class="info-label">Luas</span>
<span class="info-value">${item.luas} m²</span>
</div>
${actionButtons}
</div>
</div>`;
var layerParsil = L.geoJSON(geom, { style: { fillColor: warna, color: warna, weight: 2, fillOpacity: 0.5 } })
.bindPopup(viewHTML).addTo(parsilLayer);
layerParsil.on('click', function () { map.fitBounds(layerParsil.getBounds()); });
databasePencarian.push({
namaLower: item.nama_pemilik.toLowerCase(),
namaAsli: item.nama_pemilik,
kategori: 'Parsil',
ikon: '🏘️',
tipe: 'area',
layer: layerParsil
});
});
}).catch(e => console.log('Belum ada data Parsil'));
}
/*
function loadBatasKota() {
batasKotaLayer.clearLayers();
@@ -539,12 +296,9 @@ map.on('click', function () {
pendudukMiskinLayer.clearLayers();
});
loadSPBU(); loadJalan(); loadParsil(); loadRumahIbadah();
loadRumahIbadah();
var koordinatSementara = "";
var tempLat = 0;
var tempLng = 0;
var spbuMarkers = {};
// SPBU & draw-related globals removed
// ==========================================
// 4. EVENT SAAT MENGGAMBAR SELESAI
@@ -725,7 +479,7 @@ function deleteData(tabel, id) {
.then(r => r.text()).then(res => {
alert(res);
map.closePopup();
loadSPBU(); loadJalan(); loadParsil(); loadRumahIbadah();
loadRumahIbadah();
});
}
}
@@ -733,89 +487,7 @@ function deleteData(tabel, id) {
// ==========================================
// 8. EDIT DATA
// ==========================================
function formEditSPBU(id, nama, hp, kategori) {
var markerId = String(id);
var currentMarker = spbuMarkers[markerId];
if (currentMarker) currentMarker.dragging.enable();
setTimeout(function () {
var lat = currentMarker.getLatLng().lat;
var lng = currentMarker.getLatLng().lng;
var formHTML = `
<div class="popup-container">
<div class="popup-header" style="background: linear-gradient(135deg, #92400e, #f59e0b);">
<h4>Edit SPBU</h4>
<span class="popup-type-badge">✏️ Mode Edit</span>
</div>
<div class="popup-body">
<form onsubmit="updateData(event, 'spbu_locations', '${id}')">
<input type="text" id="edit_nama" value="${nama}" placeholder="Nama SPBU" required>
<input type="text" id="edit_hp" value="${hp}" placeholder="No HP">
<select id="edit_kategori">
<option value="Ya" ${kategori === 'Ya' ? 'selected' : ''}>Buka 24 Jam</option>
<option value="Tidak" ${kategori === 'Tidak' ? 'selected' : ''}>Reguler</option>
</select>
<input type="hidden" id="edit_lat" value="${lat}">
<input type="hidden" id="edit_lng" value="${lng}">
<div class="btn-group">
<button type="submit" class="btn btn-save">💾 Update</button>
<button type="button" class="btn btn-delete" onclick="loadSPBU();">Batal</button>
</div>
</form>
</div>
</div>`;
currentMarker.setPopupContent(formHTML);
}, 50);
}
function formEditJalan(id, nama, status) {
setTimeout(function () {
document.getElementById(`popup-jalan-${id}`).innerHTML = `
<div class="popup-header" style="background: linear-gradient(135deg, #134e4a, #0f766e); padding:14px 16px 12px; border-radius: 0;">
<h4 style="margin:0; font-weight:700; font-size:15px; color:#fff;">Edit Jalan</h4>
</div>
<div class="popup-body" style="padding:14px 16px;">
<form onsubmit="updateData(event, 'jalan', '${id}')">
<input type="text" id="edit_nama" value="${nama}" required>
<select id="edit_status">
<option value="Jalan Nasional" ${status === 'Jalan Nasional' ? 'selected' : ''}>Jalan Nasional</option>
<option value="Jalan Provinsi" ${status === 'Jalan Provinsi' ? 'selected' : ''}>Jalan Provinsi</option>
<option value="Jalan Kabupaten" ${status === 'Jalan Kabupaten' ? 'selected' : ''}>Jalan Kabupaten</option>
</select>
<div class="btn-group">
<button type="submit" class="btn btn-save">💾 Update</button>
<button type="button" class="btn btn-delete" onclick="loadJalan();">Batal</button>
</div>
</form>
</div>`;
}, 50);
}
function formEditParsil(id, nama, status) {
setTimeout(function () {
document.getElementById(`popup-parsil-${id}`).innerHTML = `
<div class="popup-header" style="background: linear-gradient(135deg, #4a1d96, #7c3aed); padding:14px 16px 12px; border-radius: 0;">
<h4 style="margin:0; font-weight:700; font-size:15px; color:#fff;">Edit Parsil</h4>
</div>
<div class="popup-body" style="padding:14px 16px;">
<form onsubmit="updateData(event, 'parsil', '${id}')">
<input type="text" id="edit_nama" value="${nama}" required>
<select id="edit_status">
<option value="SHM" ${status === 'SHM' ? 'selected' : ''}>SHM (Hak Milik)</option>
<option value="HGB" ${status === 'HGB' ? 'selected' : ''}>HGB (Guna Bangunan)</option>
<option value="HGU" ${status === 'HGU' ? 'selected' : ''}>HGU (Guna Usaha)</option>
<option value="HP" ${status === 'HP' ? 'selected' : ''}>HP (Hak Pakai)</option>
</select>
<div class="btn-group">
<button type="submit" class="btn btn-save">💾 Update</button>
<button type="button" class="btn btn-delete" onclick="loadParsil();">Batal</button>
</div>
</form>
</div>`;
}, 50);
}
function formEditRumahIbadah(id, nama, lat, lng) {
setTimeout(function () {
@@ -870,20 +542,7 @@ function updateData(e, tabel, id) {
formData.append('tabel', tabel);
formData.append('id', id);
if (tabel === 'spbu_locations') {
formData.append('nama_spbu', document.getElementById('edit_nama').value);
formData.append('no_hp', document.getElementById('edit_hp').value);
formData.append('kategori', document.getElementById('edit_kategori').value);
var markerPosisi = spbuMarkers[String(id)].getLatLng();
formData.append('latitude', markerPosisi.lat);
formData.append('longitude', markerPosisi.lng);
} else if (tabel === 'jalan') {
formData.append('nama_jalan', document.getElementById('edit_nama').value);
formData.append('status', document.getElementById('edit_status').value);
} else if (tabel === 'parsil') {
formData.append('nama_pemilik', document.getElementById('edit_nama').value);
formData.append('status', document.getElementById('edit_status').value);
} else if (tabel === 'rumah_ibadah') {
if (tabel === 'rumah_ibadah') {
formData.append('nama', document.getElementById('edit_nama_ibadah').value);
formData.append('latitude', document.getElementById('edit_lat_ibadah').value);
formData.append('longitude', document.getElementById('edit_lng_ibadah').value);
@@ -898,9 +557,6 @@ function updateData(e, tabel, id) {
.then(r => r.text()).then(res => {
alert(res);
map.closePopup();
if (tabel === 'spbu_locations') loadSPBU();
if (tabel === 'jalan') loadJalan();
if (tabel === 'parsil') loadParsil();
if (tabel === 'rumah_ibadah' || tabel === 'penduduk_miskin') {
loadRumahIbadah();
}
@@ -923,24 +579,6 @@ legend.onAdd = function (map) {
<div class="legend-content">
<h4>Legenda Peta</h4>
<span class="legend-group">SPBU</span>
<div class="legend-item"><img src="https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png" class="legend-marker"> Buka 24 Jam</div>
<div class="legend-item"><img src="https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png" class="legend-marker"> Reguler</div>
<span class="legend-group">Jaringan Jalan</span>
<div class="legend-item"><span class="legend-line" style="background:#ef4444;"></span> Jalan Nasional</div>
<div class="legend-item"><span class="legend-line" style="background:#eab308;"></span> Jalan Provinsi</div>
<div class="legend-item"><span class="legend-line" style="background:#10b981;"></span> Jalan Kabupaten</div>
<span class="legend-group">Parsil Bangunan</span>
<div class="legend-item"><span class="legend-color" style="background:rgba(0,128,0,0.5); border-color:green;"></span> SHM</div>
<div class="legend-item"><span class="legend-color" style="background:rgba(0,0,255,0.5); border-color:blue;"></span> HGB</div>
<div class="legend-item"><span class="legend-color" style="background:rgba(128,0,128,0.5); border-color:purple;"></span> HGU</div>
<div class="legend-item"><span class="legend-color" style="background:rgba(255,165,0,0.5); border-color:orange;"></span> HP</div>
<span class="legend-group">Sosial & Keagamaan</span>
<div class="legend-item">
<div style="width:14px; height:14px; background: linear-gradient(135deg, #1e40af, #3b82f6); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display:flex; align-items:center; justify-content:center; margin-right:10px; margin-left:3px; box-shadow: 0 1px 3px rgba(59,130,246,0.5);">
@@ -960,16 +598,10 @@ legend.addTo(map);
var databasePencarian = [];
var ikonKategori = {
'SPBU': '⛽',
'Jalan': '🛣️',
'Parsil': '🏘️',
'Rumah Ibadah': '🕌',
};
var warnaBadge = {
'SPBU': 'badge-SPBU',
'Jalan': 'badge-Jalan',
'Parsil': 'badge-Parsil',
'Rumah Ibadah': 'badge-Rumah-Ibadah',
};
@@ -999,9 +631,6 @@ function jalankanPencarian() {
var badgeClass = warnaBadge[item.kategori] || 'badge-default';
var ikon = ikonKategori[item.kategori] || '📍';
var bgColors = {
'SPBU': 'rgba(16,185,129,0.12)',
'Jalan': 'rgba(245,158,11,0.12)',
'Parsil': 'rgba(139,92,246,0.12)',
'Rumah Ibadah': 'rgba(59,130,246,0.12)'
};
@@ -1078,11 +707,8 @@ document.addEventListener('keydown', function (e) {
// 12. LOGIKA SIDEBAR INPUT TERPUSAT
// ==========================================
var sidebarPickMode = null; // 'spbu' | 'ibadah' | 'penduduk'
var sidebarDrawMode = null; // 'polyline' | 'polygon'
var sidebarPickMode = null; // 'ibadah' | 'penduduk'
var sidebarTempLat = 0, sidebarTempLng = 0;
var sidebarKoordinat = "";
var sidebarDrawHandler = null;
// Buka/Tutup Sidebar
document.getElementById('sidebar-toggle').addEventListener('click', function () {
@@ -1109,41 +735,19 @@ function switchSidebarTab(tabName) {
function activatePickMode(jenis) {
sidebarPickMode = jenis;
document.getElementById('pick-overlay').classList.add('active');
var teks = { spbu: 'Klik di peta untuk posisi SPBU', ibadah: 'Klik di peta untuk posisi Rumah Ibadah', penduduk: 'Klik di peta untuk posisi Penduduk Miskin' };
var teks = { ibadah: 'Klik di peta untuk posisi Rumah Ibadah', penduduk: 'Klik di peta untuk posisi Penduduk Miskin' };
document.getElementById('pick-overlay-text').textContent = teks[jenis] || 'Klik lokasi di peta...';
var btnMap = { spbu: 'btn-pick-spbu', ibadah: 'btn-pick-ibadah', penduduk: 'btn-pick-penduduk' };
var btnMap = { ibadah: 'btn-pick-ibadah', penduduk: 'btn-pick-penduduk' };
if (btnMap[jenis]) document.getElementById(btnMap[jenis]).classList.add('active-pick');
map.getContainer().style.cursor = 'crosshair';
}
// Aktifkan mode gambar garis/poligon
function activateDrawMode(type) {
deactivatePickMode();
sidebarDrawMode = type;
if (type === 'polyline') {
sidebarDrawHandler = new L.Draw.Polyline(map);
document.getElementById('coords-jalan-val').textContent = 'Sedang menggambar...';
document.getElementById('btn-draw-jalan').classList.add('active-pick');
} else if (type === 'polygon') {
sidebarDrawHandler = new L.Draw.Polygon(map);
document.getElementById('coords-parsil-val').textContent = 'Sedang menggambar...';
document.getElementById('btn-draw-parsil').classList.add('active-pick');
}
if (sidebarDrawHandler) sidebarDrawHandler.enable();
document.getElementById('pick-overlay').classList.add('active');
var teks = { polyline: 'Klik titik-titik jalur jalan. Klik dua kali selesai.', polygon: 'Klik titik-titik batas lahan. Klik dua kali selesai.' };
document.getElementById('pick-overlay-text').textContent = teks[type];
map.getContainer().style.cursor = 'crosshair';
}
// Batalkan semua mode
function deactivatePickMode() {
sidebarPickMode = null;
sidebarDrawMode = null;
document.getElementById('pick-overlay').classList.remove('active');
document.querySelectorAll('.btn-pick-location').forEach(function (b) { b.classList.remove('active-pick'); });
map.getContainer().style.cursor = '';
if (sidebarDrawHandler) { try { sidebarDrawHandler.disable(); } catch (e) { } sidebarDrawHandler = null; }
}
// Tangkap klik peta untuk mode pick titik
@@ -1156,11 +760,7 @@ map.on('click', function (e) {
radiusLayer.clearLayers();
pendudukMiskinLayer.clearLayers();
if (sidebarPickMode === 'spbu') {
var el = document.getElementById('coords-spbu-val');
el.textContent = lat + ', ' + lng;
el.classList.add('has-coords');
} else if (sidebarPickMode === 'ibadah') {
if (sidebarPickMode === 'ibadah') {
var el = document.getElementById('coords-ibadah-val');
el.textContent = lat + ', ' + lng;
el.classList.add('has-coords');
@@ -1190,98 +790,8 @@ map.on('click', function (e) {
deactivatePickMode();
});
// Tangkap hasil gambar polyline/polygon dari sidebar
map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType, layer = e.layer;
var geojson = layer.toGeoJSON();
drawnItems.clearLayers();
drawnItems.addLayer(layer);
// Jika berasal dari sidebar draw mode (Tidak ada lagi fallback popup lama)
if (sidebarDrawMode === 'polyline' && type === 'polyline') {
var panjangMeter = turf.length(geojson, { units: 'meters' }).toFixed(2);
sidebarKoordinat = JSON.stringify(geojson.geometry);
var el = document.getElementById('coords-jalan-val');
el.textContent = 'Panjang: ' + panjangMeter + ' m';
el.classList.add('has-coords');
document.getElementById('sb_panjang_jalan').value = panjangMeter + ' m';
deactivatePickMode();
} else if (sidebarDrawMode === 'polygon' && type === 'polygon') {
var luasMeter = turf.area(geojson).toFixed(2);
sidebarKoordinat = JSON.stringify(geojson.geometry);
var el = document.getElementById('coords-parsil-val');
el.textContent = 'Luas: ' + luasMeter + ' m²';
el.classList.add('has-coords');
document.getElementById('sb_luas_parsil').value = luasMeter + ' m²';
deactivatePickMode();
}
});
// ===== FUNGSI SIMPAN DARI SIDEBAR =====
function saveSPBUSidebar() {
if (!sidebarTempLat && sidebarTempLat !== 0) { alert('Pilih lokasi di peta terlebih dahulu!'); return; }
var nama = document.getElementById('sb_nama_spbu').value.trim();
if (!nama) { alert('Nama SPBU wajib diisi!'); return; }
var coords = document.getElementById('coords-spbu-val').textContent;
if (coords === 'Belum dipilih') { alert('Pilih lokasi di peta terlebih dahulu!'); return; }
var formData = new FormData();
formData.append('nama_spbu', nama);
formData.append('no_hp', document.getElementById('sb_nohp_spbu').value);
formData.append('kategori', document.getElementById('sb_kategori_spbu').value);
formData.append('latitude', sidebarTempLat);
formData.append('longitude', sidebarTempLng);
fetch('save.php', { method: 'POST', body: formData })
.then(r => r.text()).then(res => {
alert(res);
document.getElementById('sb_nama_spbu').value = '';
document.getElementById('sb_nohp_spbu').value = '';
document.getElementById('coords-spbu-val').textContent = 'Belum dipilih';
document.getElementById('coords-spbu-val').classList.remove('has-coords');
sidebarTempLat = 0; sidebarTempLng = 0;
loadSPBU();
}).catch(e => console.error(e));
}
function saveJalanSidebar() {
if (!sidebarKoordinat) { alert('Gambar jalur jalan di peta terlebih dahulu!'); return; }
var nama = document.getElementById('sb_nama_jalan').value.trim();
if (!nama) { alert('Nama jalan wajib diisi!'); return; }
var formData = new FormData();
formData.append('nama_jalan', nama);
formData.append('status', document.getElementById('sb_status_jalan').value);
formData.append('panjang', document.getElementById('sb_panjang_jalan').value);
formData.append('koordinat', sidebarKoordinat);
fetch('save_jalan.php', { method: 'POST', body: formData })
.then(r => r.text()).then(res => {
alert(res);
document.getElementById('sb_nama_jalan').value = '';
document.getElementById('sb_panjang_jalan').value = '';
document.getElementById('coords-jalan-val').textContent = 'Belum digambar';
document.getElementById('coords-jalan-val').classList.remove('has-coords');
sidebarKoordinat = ''; drawnItems.clearLayers(); loadJalan();
}).catch(e => console.error(e));
}
function saveParsil_Sidebar() {
if (!sidebarKoordinat) { alert('Gambar area parsil di peta terlebih dahulu!'); return; }
var nama = document.getElementById('sb_nama_parsil').value.trim();
if (!nama) { alert('Nama pemilik wajib diisi!'); return; }
var formData = new FormData();
formData.append('nama_pemilik', nama);
formData.append('status', document.getElementById('sb_status_parsil').value);
formData.append('luas', document.getElementById('sb_luas_parsil').value);
formData.append('koordinat', sidebarKoordinat);
fetch('save_parsil.php', { method: 'POST', body: formData })
.then(r => r.text()).then(res => {
alert(res);
document.getElementById('sb_nama_parsil').value = '';
document.getElementById('sb_luas_parsil').value = '';
document.getElementById('coords-parsil-val').textContent = 'Belum digambar';
document.getElementById('coords-parsil-val').classList.remove('has-coords');
sidebarKoordinat = ''; drawnItems.clearLayers(); loadParsil();
}).catch(e => console.error(e));
}
function saveRumahIbadahSidebar() {
var coords = document.getElementById('coords-ibadah-val').textContent;