surveyor_indonesia_gantt/edit-mode/function/activityLocation.js

let currentGeoJson = "";
let actionLocationAc = "add";
let lat = -6.228000;
let long = 106.559242;
let zoom = 10;
let currentIdAct = 0;
let map = L.map('map_activity').setView([lat, long], zoom);
let drawnItems = new L.FeatureGroup().addTo(map);
let inter = 5;

let circLat = "",
    circLong = "";

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var drawControl = new L.Control.Draw({
    draw: {
        circlemarker: false,
        circle: false,
        polyline: false
    },
});

var drawnControlEdit = new L.Control.Draw({
    draw: false,
    edit: {
        featureGroup: drawnItems,
        delete: true
    }
});

map.addControl(drawControl);

// add searching location (nominatim) on map
L.Control.geocoder().addTo(map);
function addDrawnLayer(layer) {
    drawnItems.addLayer(layer);
}

function updateCurrentGeoJson() {
    let shapes = [];
    drawnItems.eachLayer(function (layer) {
        let geojson = layer.toGeoJSON();
        if (layer instanceof L.Circle) {
            geojson.properties.radius = layer.getRadius();
        }
        shapes.push(geojson);
    });
    currentGeoJson = {
        type: 'FeatureCollection',
        features: shapes
    };
}
function openActivityMap(id) {
    currentIdAct = id;
    map.invalidateSize();
    $.ajax({
        url: `${base_url}task/edit/${id}`,
        type: "get",
        success: function (data) {
            let dataRes = data.data
            // console.log("cek data", data);
            drawnItems.clearLayers();
            if (dataRes.geom) {
                let datageojson = JSON.parse(dataRes.geom);
                currentGeoJson = datageojson
                // console.log("cek data geojson", datageojson);
                if (datageojson.type === 'FeatureCollection') {
                    datageojson.features.forEach(feature => {
                        let lGeoJson = L.geoJSON(feature);
                        let layers = lGeoJson.getLayers();
                        layers.forEach(layer => {
                            let radius = layer.feature.properties.radius;
                            if (radius) {
                                let latlon = layer.getLatLng();
                                let circle = L.circle([latlon.lat, latlon.lng], { radius: radius });
                                addDrawnLayer(circle);
                            }
                            else {
                                addDrawnLayer(layer)
                            }
                        });
                    });
                } else {
                    if (datageojson.properties.radius) {
                        let radius = datageojson.properties.radius
                        let lGeoJson = L.geoJson(datageojson);
                        let layers = lGeoJson.getLayers();
                        let latlon = layers[0].getLatLng();
                        let newCircle = L.circle([latlon.lat, latlon.lng], { radius: radius });
                        addDrawnLayer(newCircle)
                        // console.log("cek layers", layers[0]);
                    } else {
                        let lGeoJson = L.geoJson(datageojson);
                        let layers = lGeoJson.getLayers();
                        addDrawnLayer(layers[0])
                    }
                }
                actionLocationAc = "edit";
                map.addControl(drawnControlEdit);
            } else {
                currentGeoJson = "";
                actionLocationAc = "add";
                drawnControlEdit.remove();
                map.addControl(drawControl);
            }
            $("#modal_activity_location").modal("show");
        },
        error: function (data) {
            gantt.alert("Get Activity Location Failed, try again later!");
        }
    });
}

$('#modal_activity_location').on('hide.bs.modal', function (event) {
    currentGeoJson = ""
    currentIdAct = 0;
    actionLocationAc = "add";
    drawnControlEdit.remove();
    map.addControl(drawControl);
    map.setView([lat, long], zoom);
});

// map initialization
$(document).ready(function () {
    let intervalMap = setInterval(function () {
        if (inter = 0) {
            clearInterval(intervalMap)
        }
        map.invalidateSize();
        inter--;
    }, 1000);

    map.on(L.Draw.Event.CREATED, function (e) {
        var type = e.layerType,
            layer = e.layer;
        if (type === 'marker') {
            let latlong = layer.getLatLng();
            // console.log("cek latlong", latlong);
            circLat = latlong.lat
            circLong = latlong.lng
            $("#modal_radius").modal("show");
            // Do marker specific actions
            // let attri = layer.getAttribution();
            // console.log("cek attribute", attri);
            return false;
        }
        let geJson = layer.toGeoJSON();
        currentGeoJson = geJson;
        // let lgeojson = L.geoJson(geJson)
        // console.log("cek layer", layer.toGeoJSON());
        // layer.bindTooltip("cek");
        // Do whatever else you need to. (save to db; add to map etc)
        addDrawnLayer(layer);
        updateCurrentGeoJson();
        map.addControl(drawnControlEdit);
        // map.addLayer(layer);
    });

    map.on(L.Draw.Event.DELETED, function (e) {
        var type = e.layerType;
        let layers = e.layers.getLayers();
        layers.forEach(layer => {
            drawnItems.removeLayer(layer);
        });
        updateCurrentGeoJson()
        // console.log("cek layer", layer.toGeoJSON());
        // Do whatever else you need to. (save to db; add to map etc)

        // map.addLayer(layer);
    });

    map.on(L.Draw.Event.EDITED, function (e) {
        // var type = e.layerType,
        //     layer = e.layer;
        let layers = e.layers.getLayers();
        layers.forEach(layer => {
            let geoJson = layer.toGeoJSON();
            if (layer instanceof L.Circle) {
                geoJson.properties.radius = layer.getRadius();
            }
            updateCurrentGeoJson();
        });
        // console.log("cek layer", layers[0].toGeoJSON());
        // console.log("cek layer", layer.toGeoJSON());
        // Do whatever else you need to. (save to db; add to map etc)
        // drawnControlEdit.remove();
        // map.addControl(drawControl);
        // map.addLayer(layer);
    });

    $("#modal_activity_location").on("click", "#btn_save_location", function () {
        if (currentGeoJson == "") {
            gantt.confirm({
                text: "Lokasi belum ditentukan!, lanjutkan?",
                ok: "Submit",
                cancel: "Cancel",
                callback: function (result) {
                    if (!result) {
                        return false
                    } else {
                        submitShapes();
                    }
                }
            });
        } else {
            submitShapes();
        }
    });

    function submitShapes() {
        let payload

        if (currentGeoJson && currentGeoJson != "") {
            payload = {
                geom: JSON.stringify(currentGeoJson),
            }
        } else {
            payload = {
                geom: null,
            }
        }

        $.ajax({
            data: JSON.stringify(payload),
            url: `${base_url}task/update-regular/${currentIdAct}`,
            type: "PUT",
            processData: false,
            contentType: false,
            success: function (data) {
                $("#modal_activity_location").modal("hide");
                currentGeoJson = ""
                currentIdAct = 0;
                gantt.alert("Activity Location successfully updated!");
            },
            error: function (data) {
                $("#modal_activity_location").modal("hide");
                currentGeoJson = ""
                currentIdAct = 0;
                gantt.alert("Activity Location failed updated!, try again later!");
            }
        });
    }

    function submitLocation() {
        let payload

        if (currentGeoJson && currentGeoJson != "") {
            payload = {
                geom: JSON.stringify(currentGeoJson),
            }
        } else {
            payload = {
                geom: null,
            }
        }

        $.ajax({
            data: JSON.stringify(payload),
            url: `${base_url}task/update-regular/${currentIdAct}`,
            type: "PUT",
            processData: false,
            contentType: false,
            success: function (data) {
                $("#modal_activity_location").modal("hide");
                currentGeoJson = ""
                currentIdAct = 0;
                gantt.alert("Activity Location successfully updated!");
            },
            error: function (data) {
                $("#modal_activity_location").modal("hide");
                currentGeoJson = ""
                currentIdAct = 0;
                gantt.alert("Activity Location failed updated!, try again later!");
            }
        });
    }

    $("#modal_radius").on("click", "#btn_save_radius", function () {
        let radius = $("#buffer_radius").val();
        if (radius <= 0) {
            gantt.alert("radius buffer tidak boleh kurang dari atau sama dengan 0!!");
        } else {
            submitCircle(radius);
        }
    });
});

function submitCircle(radius) {
    let circle = L.circle([circLat, circLong], { radius: radius });
    let geojsoncircle = circle.toGeoJSON();
    geojsoncircle.properties.radius = radius
    currentGeoJson = geojsoncircle
    addDrawnLayer(circle);
    updateCurrentGeoJson();
    map.addControl(drawnControlEdit);

    $("#modal_radius").modal('hide');
}

$('#modal_radius').on('hide.bs.modal', function (event) {
    circLat = 0
    circLong = 0
    $("#buffer_radius").val("");
});