MIF_E31221322/public/assets/js/pages/customJs/master-data/lahan/update.js

190 lines
6.2 KiB
JavaScript

var mapEdit, drawnItems, drawControl, googleHybrid, iconMarker;
var currentMarkerEdit = null;
var formEdit = document.getElementById("edit-form");
var addressEditContainer = formEdit.querySelector("#address-edit-container");
var addressEditField = formEdit.querySelector("#address-edit-field");
var mapEditConatiner = formEdit.querySelector("#map-edit-container");
var polygonField = formEdit.querySelector("#polygon-edit");
let latDb = formEdit.querySelector("#lat-db").dataset.lat;
let lngDb = formEdit.querySelector("#lng-db").dataset.lng;
let polygonDb = formEdit.querySelector("#polygon-db");
let polygonData = polygonDb.getAttribute("data-polygon");
var loadingEdit = formEdit.querySelector("#loading-edit");
var btnEditContainer = formEdit.querySelector("#edit-footer");
document.addEventListener("DOMContentLoaded", function () {
initMapEdit();
setMapEdit();
});
function fetchWithTimeout(url, options = {}, timeout = 10000) {
return Promise.race([
fetch(url, options),
new Promise((_, reject) =>
setTimeout(
() =>
reject(new Error("Request timeout, periksa koneksi Anda")),
timeout
)
),
]);
}
async function reverseGeocode(lat, lng) {
try {
const response = await fetchWithTimeout(
`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&accept-language=id`
);
const data = await response.json();
return data.display_name;
} catch (error) {
return alert(`Error ` + error.message);
}
}
function initMapEdit() {
mapEdit = L.map("map-edit", {
attributionControl: false,
}).setView([-8.157416852745705, 113.72281580436439], 16);
googleHybrid = L.tileLayer(
"http://{s}.google.com/vt?lyrs=s,h&x={x}&y={y}&z={z}",
{
maxZoom: 20,
subdomains: ["mt0", "mt1", "mt2", "mt3"],
}
).addTo(mapEdit);
iconMarker = L.icon({
iconUrl: "/assets/images/marker.png",
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [0, -50],
});
currentMarkerEdit = L.marker([-8.157416852745705, 113.72281580436439], {
icon: iconMarker,
draggable: true,
})
.addTo(mapEdit)
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
);
drawnItems = new L.FeatureGroup();
mapEdit.addLayer(drawnItems);
drawControl = new L.Control.Draw({
draw: {
polygon: true, // Izinkan user menggambar polygon
polyline: false,
rectangle: false,
circle: false,
marker: false,
circlemarker: false,
},
edit: {
featureGroup: drawnItems, // Edit hanya objek yang sudah digambar
remove: true, // Izinkan menghapus objek
},
});
mapEdit.addControl(drawControl);
mapEdit.on("draw:created", handleDrawCreated);
mapEdit.on("draw:edited", handleDrawEdited);
mapEdit.on("draw:deleted", handleDrawDeleted);
mapEdit.invalidateSize();
}
function setMapEdit() {
loadingEdit.style.display = "block";
mapEditConatiner.style.display = "block";
mapEdit.invalidateSize();
addressEditContainer.style.display = "block";
btnEditContainer.style.display = "block";
mapEdit.setView([latDb, lngDb], 16);
if (polygonData) {
let coordinates = JSON.parse(polygonData);
console.log("Polygon Data:", coordinates);
let latlngs = coordinates.map((point) => [point.lat, point.lng]);
let polygon = L.polygon(latlngs, { color: "blue" }).addTo(mapEdit);
drawnItems.addLayer(polygon);
mapEdit.fitBounds(polygon.getBounds());
polygonField.value = JSON.stringify(coordinates);
}
if (currentMarkerEdit) {
mapEdit.removeLayer(currentMarkerEdit);
}
var iconMarker = L.icon({
iconUrl: "/assets/images/marker.png",
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [0, -50],
});
currentMarkerEdit = L.marker([latDb, lngDb], {
icon: iconMarker,
draggable: true,
}).addTo(mapEdit);
currentMarkerEdit.on("dragend", onPointerDragend);
currentMarkerEdit
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
)
.openPopup();
loadingEdit.style.display = "none";
}
function handleDrawCreated(e) {
var layer = e.layer;
drawnItems.addLayer(layer);
var coordinates = layer.getLatLngs()[0];
console.log("Koordinat Polygon:", coordinates);
polygonField.value = JSON.stringify(coordinates);
layer.bindPopup("<b>Petak Lahan Berhasil Dibuat!</b>").openPopup();
btnEditContainer.style.display = "block";
}
function handleDrawEdited(e) {
var layers = e.layers;
layers.eachLayer(function (layer) {
var coordinates = layer.getLatLngs();
console.log("Koordinat setelah diedit:", coordinates);
polygonField.value = JSON.stringify(coordinates);
layer.bindPopup("<b>Petak Lahan Berhasil Diedit!</b>").openPopup();
});
}
function handleDrawDeleted(e) {
drawnItems.clearLayers();
polygonField.value = "";
}
async function onPointerDragend() {
if (!currentMarkerEdit) return;
var coordinates = currentMarkerEdit.getLatLng();
loadingEdit.style.display = "block";
addressEditContainer.style.display = "none";
btnEditContainer.style.display = "none";
try {
const address = await reverseGeocode(coordinates.lat, coordinates.lng);
loadingEdit.style.display = "none";
addressEditContainer.style.display = "block";
addressEditField.value = address;
} catch (error) {
alert(`Error ` + error.message);
} finally {
loadingEdit.style.display = "none";
btnEditContainer.style.display = "block";
}
currentMarkerEdit
.setLatLng(coordinates)
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
)
.openPopup();
}