MIF_E31221322/public/assets/js/pages/customJs/master-data/lahan/create.js

348 lines
11 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

var map;
var currentMarker = null;
document.addEventListener("DOMContentLoaded", function () {
map = L.map("map", {
attributionControl: false,
}).setView([-8.157416852745705, 113.72281580436439], 16);
googleStreets = L.tileLayer(
"http://{s}.google.com/vt?lyrs=m&x={x}&y={y}&z={z}",
{
maxZoom: 20,
subdomains: ["mt0", "mt1", "mt2", "mt3"],
}
).addTo(map);
var iconMarker = L.icon({
iconUrl: "/assets/images/marker.png",
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [0, -50],
});
currentMarker = L.marker([-8.157416852745705, 113.72281580436439], {
icon: iconMarker,
draggable: true,
})
.addTo(map)
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
draw: {
polygon: true, // Izinkan user menggambar polygon
polyline: false,
rectangle: false,
circle: false,
marker: false,
circlemarker: false,
},
edit: {
featureGroup: drawnItems, // Edit hanya objek yang sudah digambar
remove: true, // Izinkan menghapus objek
},
});
map.addControl(drawControl);
// 4⃣ Event saat user menggambar polygon
map.on("draw:created", function (event) {
var layer = event.layer;
drawnItems.addLayer(layer);
var coordinates = layer.getLatLngs();
console.log("Koordinat Polygon:", coordinates);
alert("Polygon berhasil dibuat! Cek console untuk koordinatnya.");
});
// 5⃣ Event saat user mengedit polygon
map.on("draw:edited", function (event) {
var layers = event.layers;
layers.eachLayer(function (layer) {
var coordinates = layer.getLatLngs();
console.log("Koordinat setelah diedit:", coordinates);
alert("Polygon berhasil diedit! Cek console untuk koordinatnya.");
});
});
// 6⃣ Event saat user menghapus polygon
map.on("draw:deleted", function (event) {
alert("Polygon telah dihapus!");
});
$("#showModal").on("shown.bs.modal", function () {
map.invalidateSize();
});
map.on("click", onMapClick);
});
var form = document.getElementById("add-form");
var provinceField = form.querySelector("#province-field");
var provinceVal = new Choices(provinceField);
var regencyContainer = form.querySelector("#regency-container");
var regencyField = form.querySelector("#regency-field");
var regencyVal = new Choices(regencyField, {
shouldSort: false,
});
var districtContainer = form.querySelector("#district-container");
var districtField = form.querySelector("#district-field");
var districtVal = new Choices(districtField, {
shouldSort: false,
});
var addressContainer = form.querySelector("#address-container");
var addressField = form.querySelector("#address-field");
var mapContainer = form.querySelector("#map-container");
var latField = form.querySelector("#lat");
var lngField = form.querySelector("#lng");
var btnContainer = form.querySelector("#add-footer");
function getRegencies(provinceId) {
regencyContainer.style.display = "none";
// regencyEditContainer.style.display = "none";
districtContainer.style.display = "none";
// districtEditContainer.style.display = "none";
addressContainer.style.display = "none";
// addressEditContainer.style.display = "none";
loading.style.display = "block";
// loadingEdit.style.display = "block";
mapContainer.style.display = "none";
// mapEditConatiner.style.display = "none";
const url = "/location/get-regency/" + provinceId;
$.ajax({
url: url,
type: "GET",
success: function (response) {
if (response.success) {
loading.style.display = "none";
// loadingEdit.style.display = "none";
const data = response.data;
regencyVal.clearStore();
regencyVal.clearChoices();
// regencyEditVal.clearStore();
// regencyEditVal.clearChoices();
regencyVal.value = "";
regencyVal.setChoices([
{
value: "",
label: "Pilih Kabupaten",
selected: true,
disabled: true,
},
]);
// regencyEditVal.value = "";
// regencyEditVal.setChoices([
// {
// value: "",
// label: "Pilih Kabupaten",
// selected: true,
// disabled: true,
// },
// ]);
if (Array.isArray(data)) {
regencyVal.setChoices(
data.map((regency) => ({
value: regency.id,
label: regency.name,
selected: false,
disabled: false,
}))
);
// regencyEditVal.setChoices(
// data.map((regency) => ({
// value: regency.id,
// label: regency.name,
// selected: false,
// disabled: false,
// }))
// );
regencyContainer.style.display = "block";
// regencyEditContainer.style.display = "block";
} else {
mapContainer.style.display = "block";
mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
// mapEditConatiner.style.display = "block";
// mapEditConatiner.innerHTML =
// "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
}
}
},
error: function (xhr, status, error) {
mapContainer.style.display = "block";
mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
// mapEditConatiner.style.display = "block";
// mapEditConatiner.innerHTML =
// "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
},
});
}
function getDistricts(regencyId) {
districtContainer.style.display = "none";
addressContainer.style.display = "none";
loading.style.display = "block";
mapContainer.style.display = "none";
const url = "/location/get-district/" + regencyId;
$.ajax({
url: url,
type: "GET",
success: function (response) {
if (response.success) {
loading.style.display = "none";
const data = response.data;
districtVal.clearStore();
districtVal.clearChoices();
districtVal.value = "";
districtVal.setChoices([
{
value: "",
label: "Pilih Kecamatan",
selected: true,
disabled: true,
},
]);
if (Array.isArray(data)) {
districtVal.setChoices(
data.map((district) => ({
value: district.id,
label: district.name,
selected: false,
disabled: false,
}))
);
districtContainer.style.display = "block";
} else {
mapContainer.style.display = "block";
mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
}
}
},
error: function (xhr, status, error) {
mapContainer.style.display = "block";
mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
},
});
}
function showmap(districtId) {
loading.style.display = "block";
if (!navigator.geolocation) {
alert("Geolocation tidak didukung oleh browser ini.");
return;
}
navigator.geolocation.getCurrentPosition(
function (position) {
loading.style.display = "none";
mapContainer.style.display = "block";
map.invalidateSize();
addressContainer.style.display = "block";
btnContainer.style.display = "block";
var lat = position.coords.latitude;
var lng = position.coords.longitude;
map.setView([lat, lng], 16);
if (currentMarker) {
map.removeLayer(currentMarker);
}
if (currentMarker || currentMarkerEdit) {
map.removeLayer(currentMarker);
}
var iconMarker = L.icon({
iconUrl: "/assets/images/marker.png",
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [0, -50],
});
currentMarker = L.marker([lat, lng], {
icon: iconMarker,
draggable: true,
}).addTo(map);
currentMarker.on("dragend", onPointerDragend);
currentMarker
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
)
.openPopup();
latField.value = lat;
lngField.value = lng;
},
function (error) {
alert("Error: " + error.message);
}
);
}
function onMapClick(e) {
var lat = e.latlng.lat;
var lng = e.latlng.lng;
if (!currentMarker) {
currentMarker = L.marker(e.latlng).addTo(map);
} else {
currentMarker.setLatLng(e.latlng);
}
currentMarker.on("dragend", onPointerDragend);
currentMarker
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
)
.openPopup();
latField.value = lat;
lngField.value = lng;
}
function onPointerDragend() {
if (!currentMarker) return;
var coordinates = currentMarker.getLatLng();
currentMarker
.setLatLng(coordinates)
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
)
.openPopup();
latField.value = coordinates.lat;
lngField.value = coordinates.lng;
}