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

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();
}