ariefajar
/
MIF_E31221322
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(master-land): update function getLocation()

This commit is contained in:
arieeefajar 2025-06-12 02:32:13 +07:00
parent 91d2396bdb
commit 786d771653
3 changed files with 222 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/Http/Controllers/LandControllerOfficer.php
View File

@ -26,6 +26,7 @@ public function create()
public function store(Request $request) public function store(Request $request)
{ {
dd($request->all());
$customMessage = [ $customMessage = [
'owner.required' => 'Nama pemilik wajib diisi', 'owner.required' => 'Nama pemilik wajib diisi',
'owner.max' => 'Nama pemilik maksimal 25 karakter', 'owner.max' => 'Nama pemilik maksimal 25 karakter',

407
public/assets/js/pages/customJs/master-data/lahan/create.js
View File

@ -1,5 +1,15 @@
var map, drawnItems, drawControl, googleHybrid, iconMarker; var map, drawnItems, drawControl, googleHybrid, iconMarker;
var currentMarker = null; var currentMarker = null;
var btnLocation = document.getElementById("location-btn");
var form = document.getElementById("add-form");
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 polygonField = form.querySelector("#polygon");
var loading = form.querySelector("#loading");
var btnContainer = form.querySelector("#add-footer");
function initMap() { function initMap() {
map = L.map("map", { map = L.map("map", {
@ -63,244 +73,257 @@ function getLocation() {
return; return;
} }
btnLocation.innerHTML = ``;
btnLocation.innerHTML = `<span class="d-flex align-items-center">
<span class="flex-grow-1 me-2">
Loading...
</span>
<span class="spinner-border flex-shrink-0" role="status">
<span class="visually-hidden">Loading...</span>
</span>
</span>`;
btnLocation.disabled = true;
navigator.geolocation.getCurrentPosition( navigator.geolocation.getCurrentPosition(
function (position) { function (position) {
loading.style.display = "none";
mapContainer.style.display = "block";
map.invalidateSize();
var lat = position.coords.latitude; var lat = position.coords.latitude;
var lng = position.coords.longitude; var lng = position.coords.longitude;
map.setView([lat, lng], 16); fetch(
`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&accept-language=id`
)
.then((response) => response.json())
.then((data) => {
btnLocation.classList.add("d-none");
addressContainer.style.display = "block";
mapContainer.style.display = "block";
map.invalidateSize();
if (currentMarker) { var address = `Desa ${data.address.village}, Kecamatan ${
map.removeLayer(currentMarker); data.address.township ? data.address.township : `-`
} }, Kabupaten ${data.address.city}, Provinsi ${
data.address.state
}`;
addressField.value = address;
currentMarker = L.marker([lat, lng], { map.setView([lat, lng], 16);
icon: iconMarker,
draggable: true,
}).addTo(map);
currentMarker.on("dragend", onPointerDragend); if (currentMarker) {
map.removeLayer(currentMarker);
}
currentMarker currentMarker = L.marker([lat, lng], {
.bindPopup( icon: iconMarker,
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>` draggable: true,
) }).addTo(map);
.openPopup();
latField.value = lat; currentMarker.on("dragend", onPointerDragend);
lngField.value = lng;
currentMarker
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
)
.openPopup();
latField.value = lat;
lngField.value = lng;
})
.catch((error) => {
alert("Error: " + error.message);
});
}, },
function (error) { function (error) {
alert("Error: " + error.message); alert("Error: " + error.message);
} }
); );
} }
// var provinceField = form.querySelector("#province-field");
// var provinceVal = new Choices(provinceField);
var form = document.getElementById("add-form"); // var regencyContainer = form.querySelector("#regency-container");
var provinceField = form.querySelector("#province-field"); // var regencyField = form.querySelector("#regency-field");
var provinceVal = new Choices(provinceField); // var regencyVal = new Choices(regencyField, {
// shouldSort: false,
// });
var regencyContainer = form.querySelector("#regency-container"); // var districtContainer = form.querySelector("#district-container");
var regencyField = form.querySelector("#regency-field"); // var districtField = form.querySelector("#district-field");
var regencyVal = new Choices(regencyField, { // var districtVal = new Choices(districtField, {
shouldSort: false, // 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 polygonField = form.querySelector("#polygon");
var loading = form.querySelector("#loading");
var btnContainer = form.querySelector("#add-footer");
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
initMap(); initMap();
if (provinceField.value !== "") { // if (provinceField.value !== "") {
getRegencies(provinceField.value); // getRegencies(provinceField.value);
} // }
}); });
function getRegencies(provinceId) { // function getRegencies(provinceId) {
regencyContainer.style.display = "none"; // regencyContainer.style.display = "none";
districtContainer.style.display = "none"; // districtContainer.style.display = "none";
addressContainer.style.display = "none"; // addressContainer.style.display = "none";
loading.style.display = "block"; // loading.style.display = "block";
mapContainer.style.display = "none"; // mapContainer.style.display = "none";
const url = "/location/get-regency/" + provinceId; // const url = "/location/get-regency/" + provinceId;
$.ajax({ // $.ajax({
url: url, // url: url,
type: "GET", // type: "GET",
success: function (response) { // success: function (response) {
if (response.success) { // if (response.success) {
loading.style.display = "none"; // loading.style.display = "none";
const data = response.data; // const data = response.data;
regencyVal.clearStore(); // regencyVal.clearStore();
regencyVal.clearChoices(); // regencyVal.clearChoices();
regencyVal.value = ""; // regencyVal.value = "";
regencyVal.setChoices([ // regencyVal.setChoices([
{ // {
value: "", // value: "",
label: "Pilih Kabupaten", // label: "Pilih Kabupaten",
selected: true, // selected: true,
disabled: true, // disabled: true,
}, // },
]); // ]);
if (Array.isArray(data)) { // if (Array.isArray(data)) {
regencyVal.setChoices( // regencyVal.setChoices(
data.map((regency) => ({ // data.map((regency) => ({
value: regency.id, // value: regency.id,
label: regency.name, // label: regency.name,
selected: false, // selected: false,
disabled: false, // disabled: false,
})) // }))
); // );
regencyContainer.style.display = "block"; // regencyContainer.style.display = "block";
} else { // } else {
mapContainer.style.display = "block"; // mapContainer.style.display = "block";
mapContainer.innerHTML = // mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>"; // "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
} // }
} // }
}, // },
error: function (xhr, status, error) { // error: function (xhr, status, error) {
mapContainer.style.display = "block"; // mapContainer.style.display = "block";
mapContainer.innerHTML = // mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>"; // "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
}, // },
}); // });
} // }
function getDistricts(regencyId) { // function getDistricts(regencyId) {
districtContainer.style.display = "none"; // districtContainer.style.display = "none";
addressContainer.style.display = "none"; // addressContainer.style.display = "none";
loading.style.display = "block"; // loading.style.display = "block";
mapContainer.style.display = "none"; // mapContainer.style.display = "none";
const url = "/location/get-district/" + regencyId; // const url = "/location/get-district/" + regencyId;
$.ajax({ // $.ajax({
url: url, // url: url,
type: "GET", // type: "GET",
success: function (response) { // success: function (response) {
if (response.success) { // if (response.success) {
loading.style.display = "none"; // loading.style.display = "none";
const data = response.data; // const data = response.data;
districtVal.clearStore(); // districtVal.clearStore();
districtVal.clearChoices(); // districtVal.clearChoices();
districtVal.value = ""; // districtVal.value = "";
districtVal.setChoices([ // districtVal.setChoices([
{ // {
value: "", // value: "",
label: "Pilih Kecamatan", // label: "Pilih Kecamatan",
selected: true, // selected: true,
disabled: true, // disabled: true,
}, // },
]); // ]);
if (Array.isArray(data)) { // if (Array.isArray(data)) {
districtVal.setChoices( // districtVal.setChoices(
data.map((district) => ({ // data.map((district) => ({
value: district.id, // value: district.id,
label: district.name, // label: district.name,
selected: false, // selected: false,
disabled: false, // disabled: false,
})) // }))
); // );
districtContainer.style.display = "block"; // districtContainer.style.display = "block";
} else { // } else {
mapContainer.style.display = "block"; // mapContainer.style.display = "block";
mapContainer.innerHTML = // mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>"; // "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
} // }
} // }
}, // },
error: function (xhr, status, error) { // error: function (xhr, status, error) {
mapContainer.style.display = "block"; // mapContainer.style.display = "block";
mapContainer.innerHTML = // mapContainer.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>"; // "<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
}, // },
}); // });
} // }
function showmap(districtId) { // function showmap(districtId) {
loading.style.display = "block"; // loading.style.display = "block";
if (!navigator.geolocation) { // if (!navigator.geolocation) {
alert("Geolocation tidak didukung oleh browser ini."); // alert("Geolocation tidak didukung oleh browser ini.");
return; // return;
} // }
navigator.geolocation.getCurrentPosition( // navigator.geolocation.getCurrentPosition(
function (position) { // function (position) {
loading.style.display = "none"; // loading.style.display = "none";
mapContainer.style.display = "block"; // mapContainer.style.display = "block";
map.invalidateSize(); // map.invalidateSize();
addressContainer.style.display = "block"; // addressContainer.style.display = "block";
var lat = position.coords.latitude; // var lat = position.coords.latitude;
var lng = position.coords.longitude; // var lng = position.coords.longitude;
map.setView([lat, lng], 16); // map.setView([lat, lng], 16);
if (currentMarker) { // if (currentMarker) {
map.removeLayer(currentMarker); // map.removeLayer(currentMarker);
} // }
if (currentMarker || currentMarkerEdit) { // if (currentMarker || currentMarkerEdit) {
map.removeLayer(currentMarker); // map.removeLayer(currentMarker);
} // }
var iconMarker = L.icon({ // var iconMarker = L.icon({
iconUrl: "/assets/images/marker.png", // iconUrl: "/assets/images/marker.png",
iconSize: [50, 50], // iconSize: [50, 50],
iconAnchor: [25, 50], // iconAnchor: [25, 50],
popupAnchor: [0, -50], // popupAnchor: [0, -50],
}); // });
currentMarker = L.marker([lat, lng], { // currentMarker = L.marker([lat, lng], {
icon: iconMarker, // icon: iconMarker,
draggable: true, // draggable: true,
}).addTo(map); // }).addTo(map);
currentMarker.on("dragend", onPointerDragend); // currentMarker.on("dragend", onPointerDragend);
currentMarker // currentMarker
.bindPopup( // .bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>` // `<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
) // )
.openPopup(); // .openPopup();
latField.value = lat; // latField.value = lat;
lngField.value = lng; // lngField.value = lng;
}, // },
function (error) { // function (error) {
alert("Error: " + error.message); // alert("Error: " + error.message);
} // }
); // );
} // }
function onPointerDragend() { function onPointerDragend() {
if (!currentMarker) return; if (!currentMarker) return;

11
resources/views/master-data/lahan/create.blade.php
View File

@ -55,11 +55,12 @@
</div> </div>
</div> </div>
<div class="mb-3"> <div class="mb-3 text-end">
<button class="btn btn-success" type="button" onclick="getLocation()">Dapatkan Lokasi Lahan!</button> <button id="location-btn" class="btn btn-success btn-load" type="button"
onclick="getLocation()">Dapatkan Lokasi Lahan!</button>
</div> </div>
<div class="mb-3"> {{-- <div class="mb-3">
<label for="province-field" class="form-label">Provinsi</label> <label for="province-field" class="form-label">Provinsi</label>
<select name="province_id" id="province-field" class="form-control" required <select name="province_id" id="province-field" class="form-control" required
onchange="getRegencies(this.value)"> onchange="getRegencies(this.value)">
@ -101,11 +102,11 @@
<div class="spinner-border text-primary" role="status"> <div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span> <span class="visually-hidden">Loading...</span>
</div> </div>
</div> </div> --}}
<div class="mb-3" id="address-container" style="display: none"> <div class="mb-3" id="address-container" style="display: none">
<label for="address-field" class="form-label">Alamat</label> <label for="address-field" class="form-label">Alamat</label>
<textarea name="address" id="address-field" rows="3" class="form-control" <textarea name="address" id="address-field" rows="3" class="form-control" readonly
placeholder="Masukan Alamat, cnth: Jl. Jend. Sudirman No. 12" required></textarea> placeholder="Masukan Alamat, cnth: Jl. Jend. Sudirman No. 12" required></textarea>
<div class="invalid-feedback"> <div class="invalid-feedback">
Masukan Alamat Masukan Alamat