190 lines
6.2 KiB
JavaScript
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();
|
|
}
|