surveyor_indonesia_gantt/view-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 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);

let drawnItem = L.featureGroup().addTo(map);

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

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

map.addControl(drawControl);

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);
            drawnItem.clearLayers();
            if(dataRes.geom){
                let datageojson = JSON.parse(dataRes.geom);
                currentGeoJson = datageojson
                // console.log("cek data geojson", datageojson);
                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});
                    drawnItem.addLayer(newCircle);
                    // console.log("cek layers", layers[0]);
                }else{
                    let lGeoJson = L.geoJson(datageojson);
                    let layers = lGeoJson.getLayers();
                    drawnItem.addLayer(layers[0]);
                }
                actionLocationAc = "edit";
                drawControl.remove();
                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)
        drawnItem.addLayer(layer);
        drawControl.remove();
        map.addControl(drawnControlEdit);
        // map.addLayer(layer);
    });

    map.on(L.Draw.Event.DELETED, function (e) {
        var type = e.layerType,
            layer = e.layer;

        // console.log("cek layer", layer.toGeoJSON());
        // Do whatever else you need to. (save to db; add to map etc)
        currentGeoJson = "";
        drawnItem.removeLayer(layer);
        drawnControlEdit.remove();
        map.addControl(drawControl);
        // map.addLayer(layer);
    });

    map.on(L.Draw.Event.EDITED, function (e) {
        // var type = e.layerType,
        //     layer = e.layer;
        let layers = e.layers.getLayers();
        let layer =  layers[0]
        let geoJson = layers[0].toGeoJSON();
        if(layer instanceof L.Circle){
            geoJson.properties.radius = layer.getRadius();
            currentGeoJson = geoJson
        }else{
            currentGeoJson = geoJson
        }
        // 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)
        // drawnItem.removeLayer(layer);
        // 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{
                        submitLocation();
                    }
                }
            });
        }else{
            submitLocation()
        }
    });

    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
    // console.log("geojsoncircle", geojsoncircle);
    drawnItem.addLayer(circle);
    drawControl.remove();
    map.addControl(drawnControlEdit);

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

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