|
|
@ -9,7 +9,7 @@ let drawnItems = new L.FeatureGroup().addTo(map); |
|
|
|
let inter = 5; |
|
|
|
let inter = 5; |
|
|
|
|
|
|
|
|
|
|
|
let circLat = "", |
|
|
|
let circLat = "", |
|
|
|
circLong = ""; |
|
|
|
circLong = ""; |
|
|
|
|
|
|
|
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
|
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
|
|
@ -18,16 +18,16 @@ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
|
|
var drawControl = new L.Control.Draw({ |
|
|
|
var drawControl = new L.Control.Draw({ |
|
|
|
draw: { |
|
|
|
draw: { |
|
|
|
circlemarker: false, |
|
|
|
circlemarker: false, |
|
|
|
circle:false, |
|
|
|
circle: false, |
|
|
|
polyline: false |
|
|
|
polyline: false |
|
|
|
}, |
|
|
|
}, |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
var drawnControlEdit = new L.Control.Draw({ |
|
|
|
var drawnControlEdit = new L.Control.Draw({ |
|
|
|
draw: false, |
|
|
|
draw: false, |
|
|
|
edit:{ |
|
|
|
edit: { |
|
|
|
featureGroup:drawnItems, |
|
|
|
featureGroup: drawnItems, |
|
|
|
delete:true |
|
|
|
delete: true |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
@ -43,6 +43,9 @@ function updateCurrentGeoJson() { |
|
|
|
let shapes = []; |
|
|
|
let shapes = []; |
|
|
|
drawnItems.eachLayer(function (layer) { |
|
|
|
drawnItems.eachLayer(function (layer) { |
|
|
|
let geojson = layer.toGeoJSON(); |
|
|
|
let geojson = layer.toGeoJSON(); |
|
|
|
|
|
|
|
if (layer instanceof L.Circle) { |
|
|
|
|
|
|
|
geojson.properties.radius = layer.getRadius(); |
|
|
|
|
|
|
|
} |
|
|
|
shapes.push(geojson); |
|
|
|
shapes.push(geojson); |
|
|
|
}); |
|
|
|
}); |
|
|
|
currentGeoJson = { |
|
|
|
currentGeoJson = { |
|
|
@ -50,18 +53,17 @@ function updateCurrentGeoJson() { |
|
|
|
features: shapes |
|
|
|
features: shapes |
|
|
|
}; |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
function openActivityMap(id) |
|
|
|
function openActivityMap(id) { |
|
|
|
{ |
|
|
|
|
|
|
|
currentIdAct = id; |
|
|
|
currentIdAct = id; |
|
|
|
map.invalidateSize(); |
|
|
|
map.invalidateSize(); |
|
|
|
$.ajax({ |
|
|
|
$.ajax({ |
|
|
|
url: `${base_url}task/edit/${id}`, |
|
|
|
url: `${base_url}task/edit/${id}`, |
|
|
|
type:"get", |
|
|
|
type: "get", |
|
|
|
success: function (data) { |
|
|
|
success: function (data) { |
|
|
|
let dataRes = data.data |
|
|
|
let dataRes = data.data |
|
|
|
// console.log("cek data", data);
|
|
|
|
// console.log("cek data", data);
|
|
|
|
drawnItems.clearLayers(); |
|
|
|
drawnItems.clearLayers(); |
|
|
|
if(dataRes.geom){ |
|
|
|
if (dataRes.geom) { |
|
|
|
let datageojson = JSON.parse(dataRes.geom); |
|
|
|
let datageojson = JSON.parse(dataRes.geom); |
|
|
|
currentGeoJson = datageojson |
|
|
|
currentGeoJson = datageojson |
|
|
|
// console.log("cek data geojson", datageojson);
|
|
|
|
// console.log("cek data geojson", datageojson);
|
|
|
@ -70,19 +72,27 @@ function openActivityMap(id) |
|
|
|
let lGeoJson = L.geoJSON(feature); |
|
|
|
let lGeoJson = L.geoJSON(feature); |
|
|
|
let layers = lGeoJson.getLayers(); |
|
|
|
let layers = lGeoJson.getLayers(); |
|
|
|
layers.forEach(layer => { |
|
|
|
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) |
|
|
|
addDrawnLayer(layer) |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
if(datageojson.properties.radius){ |
|
|
|
if (datageojson.properties.radius) { |
|
|
|
let radius = datageojson.properties.radius |
|
|
|
let radius = datageojson.properties.radius |
|
|
|
let lGeoJson = L.geoJson(datageojson); |
|
|
|
let lGeoJson = L.geoJson(datageojson); |
|
|
|
let layers = lGeoJson.getLayers(); |
|
|
|
let layers = lGeoJson.getLayers(); |
|
|
|
let latlon = layers[0].getLatLng(); |
|
|
|
let latlon = layers[0].getLatLng(); |
|
|
|
let newCircle = L.circle([latlon.lat,latlon.lng], {radius: radius}); |
|
|
|
let newCircle = L.circle([latlon.lat, latlon.lng], { radius: radius }); |
|
|
|
addDrawnLayer(newCircle) |
|
|
|
addDrawnLayer(newCircle) |
|
|
|
// console.log("cek layers", layers[0]);
|
|
|
|
// console.log("cek layers", layers[0]);
|
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
let lGeoJson = L.geoJson(datageojson); |
|
|
|
let lGeoJson = L.geoJson(datageojson); |
|
|
|
let layers = lGeoJson.getLayers(); |
|
|
|
let layers = lGeoJson.getLayers(); |
|
|
|
addDrawnLayer(layers[0]) |
|
|
|
addDrawnLayer(layers[0]) |
|
|
@ -90,7 +100,7 @@ function openActivityMap(id) |
|
|
|
} |
|
|
|
} |
|
|
|
actionLocationAc = "edit"; |
|
|
|
actionLocationAc = "edit"; |
|
|
|
map.addControl(drawnControlEdit); |
|
|
|
map.addControl(drawnControlEdit); |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
currentGeoJson = ""; |
|
|
|
currentGeoJson = ""; |
|
|
|
actionLocationAc = "add"; |
|
|
|
actionLocationAc = "add"; |
|
|
|
drawnControlEdit.remove(); |
|
|
|
drawnControlEdit.remove(); |
|
|
@ -105,7 +115,7 @@ function openActivityMap(id) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
$('#modal_activity_location').on('hide.bs.modal', function (event) { |
|
|
|
$('#modal_activity_location').on('hide.bs.modal', function (event) { |
|
|
|
currentGeoJson ="" |
|
|
|
currentGeoJson = "" |
|
|
|
currentIdAct = 0; |
|
|
|
currentIdAct = 0; |
|
|
|
actionLocationAc = "add"; |
|
|
|
actionLocationAc = "add"; |
|
|
|
drawnControlEdit.remove(); |
|
|
|
drawnControlEdit.remove(); |
|
|
@ -116,7 +126,7 @@ $('#modal_activity_location').on('hide.bs.modal', function (event) { |
|
|
|
// map initialization
|
|
|
|
// map initialization
|
|
|
|
$(document).ready(function () { |
|
|
|
$(document).ready(function () { |
|
|
|
let intervalMap = setInterval(function () { |
|
|
|
let intervalMap = setInterval(function () { |
|
|
|
if(inter=0){ |
|
|
|
if (inter = 0) { |
|
|
|
clearInterval(intervalMap) |
|
|
|
clearInterval(intervalMap) |
|
|
|
} |
|
|
|
} |
|
|
|
map.invalidateSize(); |
|
|
|
map.invalidateSize(); |
|
|
@ -168,7 +178,7 @@ $(document).ready(function () { |
|
|
|
let layers = e.layers.getLayers(); |
|
|
|
let layers = e.layers.getLayers(); |
|
|
|
layers.forEach(layer => { |
|
|
|
layers.forEach(layer => { |
|
|
|
let geoJson = layer.toGeoJSON(); |
|
|
|
let geoJson = layer.toGeoJSON(); |
|
|
|
if(layer instanceof L.Circle){ |
|
|
|
if (layer instanceof L.Circle) { |
|
|
|
geoJson.properties.radius = layer.getRadius(); |
|
|
|
geoJson.properties.radius = layer.getRadius(); |
|
|
|
} |
|
|
|
} |
|
|
|
updateCurrentGeoJson(); |
|
|
|
updateCurrentGeoJson(); |
|
|
@ -181,21 +191,21 @@ $(document).ready(function () { |
|
|
|
// map.addLayer(layer);
|
|
|
|
// map.addLayer(layer);
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
$("#modal_activity_location").on("click", "#btn_save_location", function() { |
|
|
|
$("#modal_activity_location").on("click", "#btn_save_location", function () { |
|
|
|
if(currentGeoJson==""){ |
|
|
|
if (currentGeoJson == "") { |
|
|
|
gantt.confirm({ |
|
|
|
gantt.confirm({ |
|
|
|
text: "Lokasi belum ditentukan!, lanjutkan?", |
|
|
|
text: "Lokasi belum ditentukan!, lanjutkan?", |
|
|
|
ok:"Submit",
|
|
|
|
ok: "Submit", |
|
|
|
cancel:"Cancel", |
|
|
|
cancel: "Cancel", |
|
|
|
callback: function(result){ |
|
|
|
callback: function (result) { |
|
|
|
if(!result){ |
|
|
|
if (!result) { |
|
|
|
return false |
|
|
|
return false |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
submitShapes(); |
|
|
|
submitShapes(); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
submitShapes(); |
|
|
|
submitShapes(); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
@ -203,11 +213,11 @@ $(document).ready(function () { |
|
|
|
function submitShapes() { |
|
|
|
function submitShapes() { |
|
|
|
let payload |
|
|
|
let payload |
|
|
|
|
|
|
|
|
|
|
|
if(currentGeoJson && currentGeoJson!=""){ |
|
|
|
if (currentGeoJson && currentGeoJson != "") { |
|
|
|
payload = { |
|
|
|
payload = { |
|
|
|
geom: JSON.stringify(currentGeoJson), |
|
|
|
geom: JSON.stringify(currentGeoJson), |
|
|
|
} |
|
|
|
} |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
payload = { |
|
|
|
payload = { |
|
|
|
geom: null, |
|
|
|
geom: null, |
|
|
|
} |
|
|
|
} |
|
|
@ -221,28 +231,27 @@ $(document).ready(function () { |
|
|
|
contentType: false, |
|
|
|
contentType: false, |
|
|
|
success: function (data) { |
|
|
|
success: function (data) { |
|
|
|
$("#modal_activity_location").modal("hide"); |
|
|
|
$("#modal_activity_location").modal("hide"); |
|
|
|
currentGeoJson ="" |
|
|
|
currentGeoJson = "" |
|
|
|
currentIdAct = 0; |
|
|
|
currentIdAct = 0; |
|
|
|
gantt.alert("Activity Location successfully updated!"); |
|
|
|
gantt.alert("Activity Location successfully updated!"); |
|
|
|
}, |
|
|
|
}, |
|
|
|
error: function (data) { |
|
|
|
error: function (data) { |
|
|
|
$("#modal_activity_location").modal("hide"); |
|
|
|
$("#modal_activity_location").modal("hide"); |
|
|
|
currentGeoJson ="" |
|
|
|
currentGeoJson = "" |
|
|
|
currentIdAct = 0; |
|
|
|
currentIdAct = 0; |
|
|
|
gantt.alert("Activity Location failed updated!, try again later!"); |
|
|
|
gantt.alert("Activity Location failed updated!, try again later!"); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function submitLocation() |
|
|
|
function submitLocation() { |
|
|
|
{ |
|
|
|
|
|
|
|
let payload |
|
|
|
let payload |
|
|
|
|
|
|
|
|
|
|
|
if(currentGeoJson && currentGeoJson!=""){ |
|
|
|
if (currentGeoJson && currentGeoJson != "") { |
|
|
|
payload = { |
|
|
|
payload = { |
|
|
|
geom: JSON.stringify(currentGeoJson), |
|
|
|
geom: JSON.stringify(currentGeoJson), |
|
|
|
} |
|
|
|
} |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
payload = { |
|
|
|
payload = { |
|
|
|
geom: null, |
|
|
|
geom: null, |
|
|
|
} |
|
|
|
} |
|
|
@ -256,37 +265,36 @@ $(document).ready(function () { |
|
|
|
contentType: false, |
|
|
|
contentType: false, |
|
|
|
success: function (data) { |
|
|
|
success: function (data) { |
|
|
|
$("#modal_activity_location").modal("hide"); |
|
|
|
$("#modal_activity_location").modal("hide"); |
|
|
|
currentGeoJson ="" |
|
|
|
currentGeoJson = "" |
|
|
|
currentIdAct = 0; |
|
|
|
currentIdAct = 0; |
|
|
|
gantt.alert("Activity Location successfully updated!"); |
|
|
|
gantt.alert("Activity Location successfully updated!"); |
|
|
|
}, |
|
|
|
}, |
|
|
|
error: function (data) { |
|
|
|
error: function (data) { |
|
|
|
$("#modal_activity_location").modal("hide"); |
|
|
|
$("#modal_activity_location").modal("hide"); |
|
|
|
currentGeoJson ="" |
|
|
|
currentGeoJson = "" |
|
|
|
currentIdAct = 0; |
|
|
|
currentIdAct = 0; |
|
|
|
gantt.alert("Activity Location failed updated!, try again later!"); |
|
|
|
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(); |
|
|
|
let radius = $("#buffer_radius").val(); |
|
|
|
if(radius <= 0){ |
|
|
|
if (radius <= 0) { |
|
|
|
gantt.alert("radius buffer tidak boleh kurang dari atau sama dengan 0!!"); |
|
|
|
gantt.alert("radius buffer tidak boleh kurang dari atau sama dengan 0!!"); |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
submitCircle(radius); |
|
|
|
submitCircle(radius); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
function submitCircle(radius) |
|
|
|
function submitCircle(radius) { |
|
|
|
{ |
|
|
|
let circle = L.circle([circLat, circLong], { radius: radius }); |
|
|
|
let circle = L.circle([circLat,circLong], {radius: radius}); |
|
|
|
|
|
|
|
let geojsoncircle = circle.toGeoJSON(); |
|
|
|
let geojsoncircle = circle.toGeoJSON(); |
|
|
|
geojsoncircle.properties.radius = radius |
|
|
|
geojsoncircle.properties.radius = radius |
|
|
|
currentGeoJson = geojsoncircle |
|
|
|
currentGeoJson = geojsoncircle |
|
|
|
// console.log("geojsoncircle", geojsoncircle);
|
|
|
|
|
|
|
|
addDrawnLayer(circle); |
|
|
|
addDrawnLayer(circle); |
|
|
|
|
|
|
|
updateCurrentGeoJson(); |
|
|
|
map.addControl(drawnControlEdit); |
|
|
|
map.addControl(drawnControlEdit); |
|
|
|
|
|
|
|
|
|
|
|
$("#modal_radius").modal('hide'); |
|
|
|
$("#modal_radius").modal('hide'); |
|
|
|