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

fix(master-land): create func js reverseGeocode

This commit is contained in:
arieeefajar 2025-06-13 18:17:29 +07:00
parent 8c356399d9
commit 6b1f43e7d7
3 changed files with 60 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,7 @@ public function calculateCFc($cf1, $cf2)
public function store(Request $request)
{
dd($request->all());
$customMessages = [
'land.required' => 'Harap pilih lahan',
'land.exists' => 'Lahan tidak ditemukan',

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

@ -80,6 +80,18 @@ function fetchWithTimeout(url, options = {}, timeout = 10000) {
]);
}
async function reverseGeocode(lat, lng) {
try {
const response = await fetchWithTimeout(
`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&accept-language=id`
);
const data = await response.json();
return data.display_name;
} catch (error) {
return alert(`Error ` + error.message);
}
}
function getLocation() {
if (!navigator.geolocation) {
alert("Geolocation tidak didukung oleh browser ini.");
@ -98,301 +110,70 @@ function getLocation() {
btnLocation.disabled = true;
navigator.geolocation.getCurrentPosition(
function (position) {
async function (position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
fetchWithTimeout(
`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();
try {
const address = await reverseGeocode(lat, lng);
btnLocation.classList.add("d-none");
addressContainer.style.display = "block";
mapContainer.style.display = "block";
map.invalidateSize();
console.log(data);
addressField.value = address;
var address = `Desa ${
data.address.village || "-"
}, Kecamatan ${
data.address.township ||
data.address.suburb ||
data.address.city_district ||
"-"
}, Kabupaten ${data.address.city || "-"}, Provinsi ${
data.address.state || "-"
}`;
addressField.value = address;
map.setView([lat, lng], 16);
map.setView([lat, lng], 16);
if (currentMarker) {
map.removeLayer(currentMarker);
}
if (currentMarker) {
map.removeLayer(currentMarker);
}
currentMarker = L.marker([lat, lng], {
icon: iconMarker,
draggable: true,
}).addTo(map);
currentMarker = L.marker([lat, lng], {
icon: iconMarker,
draggable: true,
}).addTo(map);
currentMarker.on("dragend", onPointerDragend);
currentMarker.on("dragend", onPointerDragend);
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();
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) => {
btnLocation.disabled = false;
btnLocation.innerHTML = `<i class="fa fa-location-arrow"></i> Dapatkan Lokasi Lahan!`;
alert("Terjadi kesalahan: " + error.message);
});
// 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();
// var address = `Desa ${data.address.village}, Kecamatan ${
// data.address.township ? data.address.township : `-`
// }, Kabupaten ${data.address.city}, Provinsi ${
// data.address.state
// }`;
// addressField.value = address;
// map.setView([lat, lng], 16);
// if (currentMarker) {
// map.removeLayer(currentMarker);
// }
// 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 tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
// )
// .openPopup();
// latField.value = lat;
// lngField.value = lng;
// })
// .catch((error) => {
// alert("Error: " + error.message);
// });
latField.value = lat;
lngField.value = lng;
} catch (error) {
alert(`Error ` + error.message);
} finally {
btnLocation.disabled = false;
}
},
function (error) {
alert("Error: " + error.message);
}
);
}
// 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,
// });
document.addEventListener("DOMContentLoaded", function () {
initMap();
// if (provinceField.value !== "") {
// getRegencies(provinceField.value);
// }
});
// function getRegencies(provinceId) {
// regencyContainer.style.display = "none";
// districtContainer.style.display = "none";
// addressContainer.style.display = "none";
// loading.style.display = "block";
// mapContainer.style.display = "none";
// const url = "/location/get-regency/" + provinceId;
// $.ajax({
// url: url,
// type: "GET",
// success: function (response) {
// if (response.success) {
// loading.style.display = "none";
// const data = response.data;
// regencyVal.clearStore();
// regencyVal.clearChoices();
// regencyVal.value = "";
// regencyVal.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,
// }))
// );
// regencyContainer.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 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";
// 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 tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
// )
// .openPopup();
// latField.value = lat;
// lngField.value = lng;
// },
// function (error) {
// alert("Error: " + error.message);
// }
// );
// }
function onPointerDragend() {
async function onPointerDragend() {
if (!currentMarker) return;
var coordinates = currentMarker.getLatLng();
loading.style.display = "block";
addressContainer.style.display = "none";
try {
const address = await reverseGeocode(coordinates.lat, coordinates.lng);
loading.style.display = "none";
addressContainer.style.display = "block";
addressField.value = address;
} catch (error) {
} finally {
}
currentMarker
.setLatLng(coordinates)

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

@ -104,6 +104,12 @@
</div>
</div> --}}
<div id="loading" class="text-center" style="display: none">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="mb-3" id="address-container" style="display: none">
<label for="address-field" class="form-label">Alamat</label>
<textarea name="address" id="address-field" rows="3" class="form-control" readonly