Multiple site

edit-mode/function/activityLocation.js

@@ -5,7 +5,7 @@ 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  = "",
@@ -15,8 +15,6 @@ 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,
@@ -24,7 +22,7 @@ var drawControl = new L.Control.Draw({
         polyline: false
     },
     edit:{
-        featureGroup:drawnItem,
+        featureGroup:drawnItems,
         edit:false,
         delete:false
     }
@@ -33,7 +31,7 @@ var drawControl = new L.Control.Draw({
 var drawnControlEdit = new L.Control.Draw({
     draw: false,
     edit:{
-        featureGroup:drawnItem,
+        featureGroup:drawnItems,
         delete:true
     }
 });
@@ -42,7 +40,21 @@ 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();
+        shapes.push(geojson);
+    });
+    currentGeoJson = {
+        type: 'FeatureCollection',
+        features: shapes
+    };
+}
 function openActivityMap(id)
 {
     currentIdAct = id;
@@ -53,23 +65,30 @@ function openActivityMap(id)
         success: function (data) {
             let dataRes = data.data
             // console.log("cek data", data);
-            drawnItem.clearLayers();
+            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 layer = L.geoJSON(feature);
+                        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});
-                    drawnItem.addLayer(newCircle);
+                    addDrawnLayer(newCircle)
                     // console.log("cek layers", layers[0]);
                 }else{
                     let lGeoJson = L.geoJson(datageojson);
                     let layers = lGeoJson.getLayers();
-                    drawnItem.addLayer(layers[0]);
+                    addDrawnLayer(layers[0])
+                }
                 }
                 actionLocationAc = "edit";
                 drawControl.remove();
@@ -127,22 +146,22 @@ $(document).ready(function () {
         // 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();
+        addDrawnLayer(layer);
+        updateCurrentGeoJson();
         map.addControl(drawnControlEdit);
         // map.addLayer(layer);
     });
 
     map.on(L.Draw.Event.DELETED, function (e) {
-        var type = e.layerType,
-            layer = e.layer;
-
+        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)
-        currentGeoJson = "";
-        drawnItem.removeLayer(layer);
-        drawnControlEdit.remove();
-        map.addControl(drawControl);
+
         // map.addLayer(layer);
     });
 
@@ -150,18 +169,16 @@ $(document).ready(function () {
         // var type = e.layerType,
         //     layer = e.layer;
         let layers = e.layers.getLayers();
-        let layer =  layers[0]
-        let geoJson = layers[0].toGeoJSON();
+        layers.forEach(layer => {
+        let geoJson = layer.toGeoJSON();
         if(layer instanceof L.Circle){
             geoJson.properties.radius = layer.getRadius();
-            currentGeoJson = geoJson
-        }else{
-            currentGeoJson = geoJson
         }
+        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)
-        // drawnItem.removeLayer(layer);
         // drawnControlEdit.remove();
         // map.addControl(drawControl);
         // map.addLayer(layer);
@@ -177,15 +194,49 @@ $(document).ready(function () {
                     if(!result){
                         return false
                     }else{
-                        submitLocation();
+                        submitShapes();
                     }
                 }
             });
         }else{
-            submitLocation()
+            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
@@ -238,8 +289,7 @@ function submitCircle(radius)
     geojsoncircle.properties.radius = radius
     currentGeoJson = geojsoncircle
     // console.log("geojsoncircle", geojsoncircle);
-    drawnItem.addLayer(circle);
-    drawControl.remove();
+    addDrawnLayer(circle);
     map.addControl(drawnControlEdit);
 
     $("#modal_radius").modal('hide');