|
|
|
|
@ -5,36 +5,29 @@ 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 inter = 5;
|
|
|
|
|
|
|
|
|
|
let circLat = "", |
|
|
|
|
circLong = ""; |
|
|
|
|
let circLat = "", |
|
|
|
|
circLong = ""; |
|
|
|
|
|
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
|
|
|
attribution: '© <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, |
|
|
|
|
circle: false, |
|
|
|
|
polyline: false |
|
|
|
|
}, |
|
|
|
|
edit:{ |
|
|
|
|
featureGroup:drawnItem, |
|
|
|
|
edit:false, |
|
|
|
|
delete:false |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
var drawnControlEdit = new L.Control.Draw({ |
|
|
|
|
draw: false, |
|
|
|
|
edit:{ |
|
|
|
|
featureGroup:drawnItem, |
|
|
|
|
delete:true |
|
|
|
|
edit: { |
|
|
|
|
featureGroup: drawnItems, |
|
|
|
|
delete: true |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
@ -42,39 +35,72 @@ map.addControl(drawControl);
|
|
|
|
|
|
|
|
|
|
// add searching location (nominatim) on map
|
|
|
|
|
L.Control.geocoder().addTo(map); |
|
|
|
|
function addDrawnLayer(layer) { |
|
|
|
|
drawnItems.addLayer(layer); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function openActivityMap(id) |
|
|
|
|
{ |
|
|
|
|
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 = { |
|
|
|
|
type: 'FeatureCollection', |
|
|
|
|
features: shapes |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
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);
|
|
|
|
|
drawnItem.clearLayers(); |
|
|
|
|
if(dataRes.geom){ |
|
|
|
|
drawnItems.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]); |
|
|
|
|
if (datageojson.type === 'FeatureCollection') { |
|
|
|
|
datageojson.features.forEach(feature => { |
|
|
|
|
let lGeoJson = L.geoJSON(feature); |
|
|
|
|
let layers = lGeoJson.getLayers(); |
|
|
|
|
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) |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
} 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]) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
actionLocationAc = "edit"; |
|
|
|
|
drawControl.remove(); |
|
|
|
|
map.addControl(drawnControlEdit); |
|
|
|
|
}else{ |
|
|
|
|
} else { |
|
|
|
|
currentGeoJson = ""; |
|
|
|
|
actionLocationAc = "add"; |
|
|
|
|
drawnControlEdit.remove(); |
|
|
|
|
@ -89,7 +115,7 @@ function openActivityMap(id)
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$('#modal_activity_location').on('hide.bs.modal', function (event) { |
|
|
|
|
currentGeoJson ="" |
|
|
|
|
currentGeoJson = "" |
|
|
|
|
currentIdAct = 0; |
|
|
|
|
actionLocationAc = "add"; |
|
|
|
|
drawnControlEdit.remove(); |
|
|
|
|
@ -100,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(); |
|
|
|
|
@ -113,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
|
|
|
|
|
@ -127,22 +153,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,103 +176,132 @@ $(document).ready(function () {
|
|
|
|
|
// 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 |
|
|
|
|
} |
|
|
|
|
layers.forEach(layer => { |
|
|
|
|
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());
|
|
|
|
|
// 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==""){ |
|
|
|
|
$("#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{ |
|
|
|
|
submitLocation(); |
|
|
|
|
} else { |
|
|
|
|
submitShapes(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}else{ |
|
|
|
|
submitLocation() |
|
|
|
|
} else { |
|
|
|
|
submitShapes(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
function submitLocation() |
|
|
|
|
{ |
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
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 |
|
|
|
|
// console.log("geojsoncircle", geojsoncircle);
|
|
|
|
|
drawnItem.addLayer(circle); |
|
|
|
|
drawControl.remove(); |
|
|
|
|
addDrawnLayer(circle); |
|
|
|
|
updateCurrentGeoJson(); |
|
|
|
|
map.addControl(drawnControlEdit); |
|
|
|
|
|
|
|
|
|
$("#modal_radius").modal('hide'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
$('#modal_radius').on('hide.bs.modal', function (event) { |
|
|
|
|
circLat = 0 |
|
|
|
|
circLat = 0 |
|
|
|
|
circLong = 0 |
|
|
|
|
$("#buffer_radius").val(""); |
|
|
|
|
}); |
wahyuun
1 year ago