fix(master-land): create evenListerner for map to get lat and lng

This commit is contained in:
arieeefajar 2025-02-15 14:14:27 +07:00
parent 09989ec7ff
commit ef8b638857
2 changed files with 55 additions and 1 deletions

View File

@ -18,6 +18,8 @@ var districtVal = new Choices(districtField, {
}); });
var mapContainer = form.querySelector("#map-container"); var mapContainer = form.querySelector("#map-container");
var latField = form.querySelector("#lat");
var lngField = form.querySelector("#lng");
var loading = form.querySelector("#loading"); var loading = form.querySelector("#loading");
@ -37,6 +39,8 @@ document.addEventListener("DOMContentLoaded", function () {
$("#showModal").on("shown.bs.modal", function () { $("#showModal").on("shown.bs.modal", function () {
map.invalidateSize(); map.invalidateSize();
}); });
map.on("click", onMapClick);
}); });
function validatePhoneNumber(input) { function validatePhoneNumber(input) {
@ -136,7 +140,13 @@ function showmap(districtId) {
draggable: true, draggable: true,
}).addTo(map); }).addTo(map);
currentMarker.bindPopup("Kamu berada di sini.").openPopup(); currentMarker.on("dragend", onMapDragend);
currentMarker
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
)
.openPopup();
}, },
function (error) { function (error) {
alert("Error: " + error.message); alert("Error: " + error.message);
@ -144,6 +154,42 @@ function showmap(districtId) {
); );
} }
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", onMapDragend);
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 onMapDragend() {
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;
}
function getDistricts(regencyId) { function getDistricts(regencyId) {
districtContainer.style.display = "none"; districtContainer.style.display = "none";
loading.style.display = "block"; loading.style.display = "block";

View File

@ -259,7 +259,15 @@ class="fw-medium link-primary">#VZ2101</a></td>
</div> </div>
<div id="map-container" style="display: none"> <div id="map-container" style="display: none">
<label for="map" class="form-label">Lokasi</label>
<div id="map"></div> <div id="map"></div>
<div class="mt-3">
<input type="hidden" name="lat" id="lat" class="form-control"
readonly disabled>
<input type="hidden" name="lng" id="lng" class="form-control"
readonly disabled>
</div>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">