+
+
+ 📍 Tentukan lokasi SPBU di peta
+ Klik langsung di peta untuk menempatkan pin lokasi SPBU.
+ Klik di tempat lain untuk memindahkan pin.
+
+
+
+ Belum ada pin. Klik di peta untuk menentukan
+ lokasi.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Koordinat diisi otomatis saat kamu klik peta. Tidak perlu
+ mengetik secara manual.
+
+
@@ -939,7 +1074,7 @@
});
// ─── Tab switching ────────────────────────────────────────────────────────────
- let mapsInitialized = { jalan: false, bangunan: false };
+ let mapsInitialized = { spbu: false, jalan: false, bangunan: false };
document.querySelectorAll(".tab-btn").forEach((btn) => {
btn.addEventListener("click", () => {
@@ -954,6 +1089,12 @@
document.getElementById(tabId).classList.add("active");
// Init peta saat tab dibuka pertama kali (Leaflet butuh container visible)
+ if (tabId === "tab-spbu" && !mapsInitialized.spbu) {
+ setTimeout(() => {
+ initSpbuMap();
+ mapsInitialized.spbu = true;
+ }, 80);
+ }
if (tabId === "tab-jalan" && !mapsInitialized.jalan) {
setTimeout(() => {
initJalanMap();
@@ -969,6 +1110,79 @@
});
});
+ // ══════════════════════════════════════════════════════════════════════════════
+ // ─── PETA SPBU (pin klik) ────────────────────────────────────────────────────
+ // ══════════════════════════════════════════════════════════════════════════════
+ let spbuMap, spbuPinMarker;
+
+ function initSpbuMap() {
+ spbuMap = L.map("mapSpbu").setView(PONTIANAK_CENTER, 13);
+ L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+ maxZoom: 19,
+ attribution:
+ '©
OpenStreetMap',
+ }).addTo(spbuMap);
+
+ spbuMap.on("click", (e) => {
+ const { lat, lng } = e.latlng;
+ setSpbuPin(lat, lng);
+ });
+ }
+
+ function setSpbuPin(lat, lng) {
+ const latR = parseFloat(lat.toFixed(6));
+ const lngR = parseFloat(lng.toFixed(6));
+
+ // Hapus marker lama, pasang yang baru
+ if (spbuPinMarker) spbuMap.removeLayer(spbuPinMarker);
+ spbuPinMarker = L.marker([latR, lngR], {
+ icon: L.divIcon({
+ className: "",
+ html: `
+ ⛽
+
`,
+ iconSize: [36, 36],
+ iconAnchor: [18, 34],
+ }),
+ draggable: true,
+ }).addTo(spbuMap);
+
+ // Drag marker juga update koordinat
+ spbuPinMarker.on("dragend", (ev) => {
+ const pos = ev.target.getLatLng();
+ setSpbuPin(pos.lat, pos.lng);
+ });
+
+ // Update input fields & pill
+ spbuEl.fLat.value = latR;
+ spbuEl.fLng.value = lngR;
+ document.getElementById("coordsTextSpbu").textContent =
+ `Lat: ${latR} | Lng: ${lngR}`;
+ const pill = document.getElementById("coordsPillSpbu");
+ pill.classList.add("filled");
+ document.getElementById("mapSpbu").classList.add("has-pin");
+ }
+
+ function clearSpbuPin() {
+ if (spbuPinMarker) {
+ spbuMap.removeLayer(spbuPinMarker);
+ spbuPinMarker = null;
+ }
+ spbuEl.fLat.value = "";
+ spbuEl.fLng.value = "";
+ document.getElementById("coordsTextSpbu").textContent =
+ "Belum ada pin. Klik di peta untuk menentukan lokasi.";
+ document.getElementById("coordsPillSpbu").classList.remove("filled");
+ document.getElementById("mapSpbu").classList.remove("has-pin");
+ }
+
+ document
+ .getElementById("clearPinSpbu")
+ .addEventListener("click", clearSpbuPin);
+
// ══════════════════════════════════════════════════════════════════════════════
// ─── TAB SPBU ────────────────────────────────────────────────────────────────
// ══════════════════════════════════════════════════════════════════════════════
@@ -1080,16 +1294,12 @@
}
function resetSpbuForm() {
spbuEl.editId.value = "";
- spbuEl.fKode.value =
- spbuEl.fNama.value =
- spbuEl.fAlamat.value =
- spbuEl.fLat.value =
- spbuEl.fLng.value =
- "";
+ spbuEl.fKode.value = spbuEl.fNama.value = spbuEl.fAlamat.value = "";
spbuEl.fJamBuka.value = "06:00";
spbuEl.fJamTutup.value = "22:00";
spbuEl.fOverride.value = "auto";
renderFuelChecks([]);
+ clearSpbuPin();
spbuEl.formTitle.textContent = "➕ Tambah SPBU Baru";
spbuEl.submitBtn.textContent = "💾 Simpan SPBU";
spbuEl.resetBtn.style.display = "none";
@@ -1101,8 +1311,6 @@
spbuEl.fKode.value = spbu.kode;
spbuEl.fNama.value = spbu.nama;
spbuEl.fAlamat.value = spbu.alamat;
- spbuEl.fLat.value = spbu.lat;
- spbuEl.fLng.value = spbu.lng;
spbuEl.fJamBuka.value = spbu.jam_buka;
spbuEl.fJamTutup.value = spbu.jam_tutup;
spbuEl.fOverride.value = spbu.manual_override || "auto";
@@ -1111,6 +1319,21 @@
spbuEl.submitBtn.textContent = "💾 Update SPBU";
spbuEl.resetBtn.style.display = "";
window.scrollTo({ top: 0, behavior: "smooth" });
+
+ // Set pin di peta — inisialisasi peta dulu kalau belum
+ const doPin = () => {
+ setSpbuPin(spbu.lat, spbu.lng);
+ spbuMap.setView([spbu.lat, spbu.lng], 15);
+ };
+ if (!mapsInitialized.spbu) {
+ setTimeout(() => {
+ initSpbuMap();
+ mapsInitialized.spbu = true;
+ setTimeout(doPin, 200);
+ }, 80);
+ } else {
+ doPin();
+ }
}
async function submitSpbu() {
const id = spbuEl.editId.value;
@@ -1171,6 +1394,11 @@
spbuEl.resetBtn.addEventListener("click", resetSpbuForm);
renderFuelChecks([]);
loadSpbu();
+ // Tab SPBU aktif saat load — init petanya langsung
+ setTimeout(() => {
+ initSpbuMap();
+ mapsInitialized.spbu = true;
+ }, 120);
// ══════════════════════════════════════════════════════════════════════════════
// ─── TAB JALAN ───────────────────────────────────────────────────────────────
diff --git a/frontend/poverty-map.html b/frontend/poverty-map.html
index 377d0b4..44a47a6 100644
--- a/frontend/poverty-map.html
+++ b/frontend/poverty-map.html
@@ -194,7 +194,7 @@
Gereja Peduli
WebGIS Poverty Mapping
-
Peta prioritas keluarga penerima bantuan berbasis SAW, terpusat, dan mendukung mode privasi.
+
Peta prioritas keluarga penerima bantuan berbasis SAW, terpusat, dan mudah dipantau.
@@ -209,12 +209,6 @@
@@ -296,11 +289,9 @@
}
function params() {
- const role = el("roleSelect").value;
- const privacy = el("privacyToggle").checked ? "1" : "0";
const kategori = encodeURIComponent(el("categoryFilter").value);
const search = encodeURIComponent(el("searchInput").value.trim());
- return `role=${role}&privacy=${privacy}&kategori=${kategori}&search=${search}`;
+ return `kategori=${kategori}&search=${search}`;
}
async function loadData() {
@@ -416,7 +407,7 @@
}
let debounce;
- ["roleSelect", "categoryFilter", "privacyToggle", "heatToggle"].forEach((id) => el(id).addEventListener("change", () => loadData().catch((error) => toast(error.message))));
+ ["categoryFilter", "heatToggle"].forEach((id) => el(id).addEventListener("change", () => loadData().catch((error) => toast(error.message))));
el("searchInput").addEventListener("input", () => {
clearTimeout(debounce);
debounce = setTimeout(() => loadData().catch((error) => toast(error.message)), 260);