From f3db3dac8cb37bbf8908c7fa9c731cfecdea799d Mon Sep 17 00:00:00 2001 From: Wahyu Ramadhan Date: Mon, 21 Aug 2023 16:12:00 +0700 Subject: [PATCH 1/3] Handling circle and radius --- edit-mode/function/activityLocation.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/edit-mode/function/activityLocation.js b/edit-mode/function/activityLocation.js index dc6dbca..caaf8a0 100644 --- a/edit-mode/function/activityLocation.js +++ b/edit-mode/function/activityLocation.js @@ -43,6 +43,9 @@ 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 = { @@ -70,7 +73,15 @@ function openActivityMap(id) let lGeoJson = L.geoJSON(feature); let layers = lGeoJson.getLayers(); layers.forEach(layer => { - addDrawnLayer(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 { @@ -285,15 +296,13 @@ function submitCircle(radius) let geojsoncircle = circle.toGeoJSON(); geojsoncircle.properties.radius = radius currentGeoJson = geojsoncircle - // console.log("geojsoncircle", 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(""); }); \ No newline at end of file From 59471c7c2bbd59e9df9005e4e6023efd9954c23c Mon Sep 17 00:00:00 2001 From: Wahyu Ramadhan Date: Mon, 21 Aug 2023 16:18:33 +0700 Subject: [PATCH 2/3] Quick fix --- edit-mode/function/activityLocation.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/edit-mode/function/activityLocation.js b/edit-mode/function/activityLocation.js index caaf8a0..0f4d2a1 100644 --- a/edit-mode/function/activityLocation.js +++ b/edit-mode/function/activityLocation.js @@ -304,5 +304,7 @@ function submitCircle(radius) } $('#modal_radius').on('hide.bs.modal', function (event) { + circLat = 0 + circLong = 0 $("#buffer_radius").val(""); }); \ No newline at end of file From 20fce656dc4e8a5b6f3e51a185922849ad3a5418 Mon Sep 17 00:00:00 2001 From: Wahyu Ramadhan Date: Mon, 21 Aug 2023 16:20:05 +0700 Subject: [PATCH 3/3] Add formatting --- edit-mode/function/activityLocation.js | 117 ++++++++++++------------- 1 file changed, 57 insertions(+), 60 deletions(-) diff --git a/edit-mode/function/activityLocation.js b/edit-mode/function/activityLocation.js index 0f4d2a1..77e9c90 100644 --- a/edit-mode/function/activityLocation.js +++ b/edit-mode/function/activityLocation.js @@ -6,10 +6,10 @@ 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 inter = 5; -let circLat = "", -circLong = ""; +let circLat = "", + circLong = ""; L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' @@ -18,16 +18,16 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { var drawControl = new L.Control.Draw({ draw: { circlemarker: false, - circle:false, + circle: false, polyline: false }, }); var drawnControlEdit = new L.Control.Draw({ draw: false, - edit:{ - featureGroup:drawnItems, - delete:true + edit: { + featureGroup: drawnItems, + delete: true } }); @@ -53,18 +53,17 @@ function updateCurrentGeoJson() { features: shapes }; } -function openActivityMap(id) -{ +function openActivityMap(id) { currentIdAct = id; map.invalidateSize(); $.ajax({ url: `${base_url}task/edit/${id}`, - type:"get", + type: "get", success: function (data) { let dataRes = data.data // console.log("cek data", data); drawnItems.clearLayers(); - if(dataRes.geom){ + if (dataRes.geom) { let datageojson = JSON.parse(dataRes.geom); currentGeoJson = datageojson // console.log("cek data geojson", datageojson); @@ -76,7 +75,7 @@ function openActivityMap(id) let radius = layer.feature.properties.radius; if (radius) { let latlon = layer.getLatLng(); - let circle = L.circle([latlon.lat, latlon.lng], {radius: radius}); + let circle = L.circle([latlon.lat, latlon.lng], { radius: radius }); addDrawnLayer(circle); } else { @@ -85,23 +84,23 @@ function openActivityMap(id) }); }); } 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]) - } + 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{ + } else { currentGeoJson = ""; actionLocationAc = "add"; drawnControlEdit.remove(); @@ -116,7 +115,7 @@ function openActivityMap(id) } $('#modal_activity_location').on('hide.bs.modal', function (event) { - currentGeoJson ="" + currentGeoJson = "" currentIdAct = 0; actionLocationAc = "add"; drawnControlEdit.remove(); @@ -127,7 +126,7 @@ $('#modal_activity_location').on('hide.bs.modal', function (event) { // map initialization $(document).ready(function () { let intervalMap = setInterval(function () { - if(inter=0){ + if (inter = 0) { clearInterval(intervalMap) } map.invalidateSize(); @@ -140,7 +139,7 @@ $(document).ready(function () { if (type === 'marker') { let latlong = layer.getLatLng(); // console.log("cek latlong", latlong); - circLat = latlong.lat + circLat = latlong.lat circLong = latlong.lng $("#modal_radius").modal("show"); // Do marker specific actions @@ -178,11 +177,11 @@ $(document).ready(function () { // 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(); + 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()); @@ -192,21 +191,21 @@ $(document).ready(function () { // map.addLayer(layer); }); - $("#modal_activity_location").on("click", "#btn_save_location", function() { - if(currentGeoJson==""){ + $("#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){ + ok: "Submit", + cancel: "Cancel", + callback: function (result) { + if (!result) { return false - }else{ + } else { submitShapes(); } } }); - }else{ + } else { submitShapes(); } }); @@ -214,85 +213,83 @@ $(document).ready(function () { function submitShapes() { let payload - if(currentGeoJson && currentGeoJson!=""){ + if (currentGeoJson && currentGeoJson != "") { payload = { geom: JSON.stringify(currentGeoJson), } - }else{ + } else { payload = { geom: null, } } $.ajax({ - data: JSON.stringify(payload), + 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 ="" + currentGeoJson = "" currentIdAct = 0; gantt.alert("Activity Location successfully updated!"); }, error: function (data) { $("#modal_activity_location").modal("hide"); - currentGeoJson ="" + currentGeoJson = "" currentIdAct = 0; gantt.alert("Activity Location failed updated!, try again later!"); } }); } - function submitLocation() - { + function submitLocation() { let payload - if(currentGeoJson && currentGeoJson!=""){ + if (currentGeoJson && currentGeoJson != "") { payload = { geom: JSON.stringify(currentGeoJson), } - }else{ + } else { payload = { geom: null, } } $.ajax({ - data: JSON.stringify(payload), + 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 ="" + currentGeoJson = "" currentIdAct = 0; gantt.alert("Activity Location successfully updated!"); }, error: function (data) { $("#modal_activity_location").modal("hide"); - currentGeoJson ="" + currentGeoJson = "" currentIdAct = 0; gantt.alert("Activity Location failed updated!, try again later!"); } }); } - $("#modal_radius").on("click", "#btn_save_radius", function() { + $("#modal_radius").on("click", "#btn_save_radius", function () { let radius = $("#buffer_radius").val(); - if(radius <= 0){ + if (radius <= 0) { gantt.alert("radius buffer tidak boleh kurang dari atau sama dengan 0!!"); - }else{ + } else { submitCircle(radius); } }); }); -function submitCircle(radius) -{ - let circle = L.circle([circLat,circLong], {radius: radius}); +function submitCircle(radius) { + let circle = L.circle([circLat, circLong], { radius: radius }); let geojsoncircle = circle.toGeoJSON(); geojsoncircle.properties.radius = radius currentGeoJson = geojsoncircle