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
api/api.php
+26 -6
View File
@@ -133,14 +133,34 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$tipe = $_POST['tipe'] ?? '';
$koordinat = $conn->real_escape_string($_POST['koordinat'] ?? '');
if ($id > 0 && $koordinat != '') {
if ($id > 0) {
if ($tipe == 'jalan') {
$panjang = (float)($_POST['panjang_m'] ?? 0);
$sql = "UPDATE jalan SET koordinat='$koordinat', panjang_m=$panjang WHERE id=$id";
executeQuery($conn, $sql);
if ($koordinat != '') {
$panjang = (float)($_POST['panjang_m'] ?? 0);
$sql = "UPDATE jalan SET koordinat='$koordinat', panjang_m=$panjang WHERE id=$id";
executeQuery($conn, $sql);
}
} elseif ($tipe == 'parsil') {
$sql = "UPDATE parsil SET koordinat='$koordinat' WHERE id=$id";
executeQuery($conn, $sql);
if ($koordinat != '') {
$sql = "UPDATE parsil SET koordinat='$koordinat' WHERE id=$id";
executeQuery($conn, $sql);
}
} else {
$lat = $conn->real_escape_string($_POST['lat'] ?? '');
$lng = $conn->real_escape_string($_POST['lng'] ?? '');
if ($lat != '' && $lng != '') {
$tabelMap = [
'warga' => 'warga',
'masjid' => 'rumah_ibadah',
'pelaporan' => 'pelaporan',
'spbu' => 'spbu'
];
$tabel = $tabelMap[$tipe] ?? '';
if ($tabel) {
$sql = "UPDATE $tabel SET latitude='$lat', longitude='$lng' WHERE id=$id";
executeQuery($conn, $sql);
}
}
}
}
}
infra/script.js
+32 -7
View File
@@ -407,7 +407,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);
@@ -451,8 +452,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()); });
});
}
@@ -469,8 +471,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()); });
});
}
@@ -542,8 +545,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()); });
});
}
@@ -747,3 +751,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'
});
});
}
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'
});
});
}
warga/script.js
+32 -7
View File
@@ -407,7 +407,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);
@@ -451,8 +452,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()); });
});
}
@@ -469,8 +471,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()); });
});
}
@@ -542,8 +545,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()); });
});
}
@@ -747,3 +751,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'
});
});
}