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: '© OpenStreetMap 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 drawnItem.clearLayers(); if(dataRes.geom){ let datageojson = JSON.parse(dataRes.geom); currentGeoJson = 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); }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(); circLat = latlong.lat circLong = latlong.lng $("#modal_radius").modal("show"); // Do marker specific actions // let attri = layer.getAttribution(); return false; } let geJson = layer.toGeoJSON(); currentGeoJson = geJson; // let lgeojson = L.geoJson(geJson) // 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; // 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 } // 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 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(""); });