Radit_Arahman_Putra23/UasSIGWebgis
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Menambahkan fitur drag and drop marker ke database

Browse Source
This commit is contained in:
raditarahman5-cloud
2026-06-10 20:29:19 +07:00
parent 8f460c3dc1
commit ed894bfaf0
4 changed files with 122 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sosial/script.js
+32 -7
View File
@@ -418,7 +418,8 @@ function renderMap(data) {
popupAnchor: [0, -40]
});
L.marker([m.latitude, m.longitude], { icon: masjidIcon }).addTo(layerMasjid).bindPopup(popup);
L.marker([m.latitude, m.longitude], { icon: masjidIcon, draggable: true }).addTo(layerMasjid).bindPopup(popup)
.on('dragend', function(e){ updateMarkerCoord(m.id, 'masjid', e.target.getLatLng()); });
L.circle([m.latitude, m.longitude], {
radius: currentRadius, color: '#2563eb', fillOpacity: 0.1, weight: 1
}).addTo(layerMasjidRadius);
@@ -462,8 +463,9 @@ function renderMap(data) {
});
L.marker([p.latitude, p.longitude], {
icon: pelaporanIcon
}).addTo(layerPelaporan).bindPopup(popup);
icon: pelaporanIcon, draggable: true
}).addTo(layerPelaporan).bindPopup(popup)
.on('dragend', function(e){ updateMarkerCoord(p.id, 'pelaporan', e.target.getLatLng()); });
});
}
@@ -480,8 +482,9 @@ function renderMap(data) {
<button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${s.id}, 'spbu')">Hapus</button>
</div>`;
L.marker([s.latitude, s.longitude], {
icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] })
}).addTo(targetLayer).bindPopup(popup);
icon: L.icon({ iconUrl: iconUrl, iconSize: [25, 41], iconAnchor: [12, 41] }), draggable: true
}).addTo(targetLayer).bindPopup(popup)
.on('dragend', function(e){ updateMarkerCoord(s.id, 'spbu', e.target.getLatLng()); });
});
}
@@ -559,8 +562,9 @@ function renderMap(data) {
<button class="btn-del" style="padding:4px 8px; font-size:0.75rem; width:auto;" onclick="hapusData(${w.id}, 'warga')">Hapus</button>
</div>
</div>`;
L.marker(pos, { icon: houseIcon })
.addTo(layerWarga).bindPopup(popup);
L.marker(pos, { icon: houseIcon, draggable: true })
.addTo(layerWarga).bindPopup(popup)
.on('dragend', function(e){ updateMarkerCoord(w.id, 'warga', e.target.getLatLng()); });
});
}
@@ -766,3 +770,24 @@ function editData(tipe, id) {
// INIT
loadData();
function updateMarkerCoord(id, tipe, latlng) {
var fd = new FormData();
fd.append('action', 'update_koordinat');
fd.append('id', id);
fd.append('tipe', tipe);
fd.append('lat', latlng.lat);
fd.append('lng', latlng.lng);
fetch('../api/api.php', { method: 'POST', body: fd })
.then(() => {
Swal.fire({
icon: 'success',
title: 'Tersimpan',
text: 'Posisi titik berhasil digeser!',
timer: 1500,
showConfirmButton: false,
toast: true,
position: 'top-end'
});
});
}