348 lines
11 KiB
JavaScript
348 lines
11 KiB
JavaScript
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;
|
||
}
|