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

var map, drawnItems, drawControl, googleHybrid, iconMarker;
var currentMarker = null;
var btnLocation = document.getElementById("location-btn");
var form = document.getElementById("add-form");
var addressContainer = form.querySelector("#address-container");
var addressField = form.querySelector("#address-field");
var mapContainer = form.querySelector("#map-container");
var latField = form.querySelector("#lat");
var lngField = form.querySelector("#lng");
var polygonField = form.querySelector("#polygon");
var loading = form.querySelector("#loading");
var btnContainer = form.querySelector("#add-footer");

document.addEventListener("DOMContentLoaded", function () {
    initMap();
});

function initMap() {
    map = L.map("map", {
        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(map);

    iconMarker = L.icon({
        iconUrl: "/assets/images/marker.png",
        iconSize: [50, 50],
        iconAnchor: [25, 50],
        popupAnchor: [0, -50],
    });

    currentMarker = L.marker([-8.157416852745705, 113.72281580436439], {
        icon: iconMarker,
        draggable: true,
    })
        .addTo(map)
        .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();
    map.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
        },
    });
    map.addControl(drawControl);

    map.on("draw:created", handleDrawCreated);
    map.on("draw:edited", handleDrawEdited);

    $("#showModal").on("shown.bs.modal", function () {
        map.invalidateSize();
    });
}

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 getLocation() {
    if (!navigator.geolocation) {
        alert("Geolocation tidak didukung oleh browser ini.");
        return;
    }

    btnLocation.innerHTML = ``;
    btnLocation.innerHTML = `<span class="d-flex align-items-center">
                                <span class="flex-grow-1 me-2">
                                    Loading...
                                </span>
                                <span class="spinner-border flex-shrink-0" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </span>
                            </span>`;
    btnLocation.disabled = true;

    navigator.geolocation.getCurrentPosition(
        async function (position) {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;

            try {
                const address = await reverseGeocode(lat, lng);
                btnLocation.classList.add("d-none");
                addressContainer.style.display = "block";
                mapContainer.style.display = "block";
                map.invalidateSize();

                addressField.value = address;

                map.setView([lat, lng], 16);

                if (currentMarker) {
                    map.removeLayer(currentMarker);
                }

                currentMarker = L.marker([lat, lng], {
                    icon: iconMarker,
                    draggable: true,
                }).addTo(map);

                currentMarker.on("dragend", onPointerDragend);

                currentMarker
                    .bindPopup(
                        `<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
                    )
                    .openPopup();

                latField.value = lat;
                lngField.value = lng;
            } catch (error) {
                alert(`Error ` + error.message);
            } finally {
                btnLocation.disabled = false;
            }
        },
        function (error) {
            alert("Error: " + error.message);
        }
    );
}

async function onPointerDragend() {
    if (!currentMarker) return;
    var coordinates = currentMarker.getLatLng();
    loading.style.display = "block";
    addressContainer.style.display = "none";

    try {
        const address = await reverseGeocode(coordinates.lat, coordinates.lng);
        loading.style.display = "none";
        addressContainer.style.display = "block";
        addressField.value = address;
    } catch (error) {
        alert(`Error ` + error.message);
    } finally {
        loading.style.display = "none";
    }

    currentMarker
        .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();

    latField.value = coordinates.lat;
    lngField.value = coordinates.lng;
}

function handleDrawCreated(e) {
    var layer = e.layer;
    drawnItems.addLayer(layer);
    var coordinates = layer.getLatLngs()[0];
    polygonField.value = JSON.stringify(coordinates);

    layer.bindPopup("<b>Petak Lahan Berhasil Dibuat!</b>").openPopup();
    btnContainer.style.display = "block";
}

function handleDrawEdited(e) {
    var layers = e.layers;
    layers.eachLayer(function (layer) {
        var coordinates = layer.getLatLngs();
        polygonField.value = JSON.stringify(coordinates);

        layer.bindPopup("<b>Petak Lahan Berhasil Diedit!</b>").openPopup();
    });
}