You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

298 lines
9.5 KiB

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 drawnItems = new L.FeatureGroup().addTo(map);
let inter = 5;
let circLat = "",
circLong = "";
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);
var drawControl = new L.Control.Draw({
draw: {
circlemarker: false,
circle: false,
polyline: false
},
});
var drawnControlEdit = new L.Control.Draw({
draw: false,
edit: {
featureGroup: drawnItems,
delete: true
}
});
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();
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",
success: function (data) {
let dataRes = data.data
drawnItems.clearLayers();
if (dataRes.geom) {
let datageojson = JSON.parse(dataRes.geom);
currentGeoJson = datageojson
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)
} else {
let lGeoJson = L.geoJson(datageojson);
let layers = lGeoJson.getLayers();
addDrawnLayer(layers[0])
}
}
actionLocationAc = "edit";
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)
addDrawnLayer(layer);
updateCurrentGeoJson();
map.addControl(drawnControlEdit);
// map.addLayer(layer);
});
map.on(L.Draw.Event.DELETED, function (e) {
var type = e.layerType;
let layers = e.layers.getLayers();
layers.forEach(layer => {
drawnItems.removeLayer(layer);
});
updateCurrentGeoJson()
// Do whatever else you need to. (save to db; add to map etc)
// map.addLayer(layer);
});
map.on(L.Draw.Event.EDITED, function (e) {
// var type = e.layerType,
// 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();
});
// Do whatever else you need to. (save to db; add to map etc)
// 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 {
submitShapes();
}
}
});
} else {
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
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
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("");
});