webgis-sig/jalan/assets/js/map.js

// Inisialisasi Peta Jalan
// Koordinat awal: [-0.0263, 109.3425] (Pontianak)
const map = L.map("map", { zoomControl: false }).setView(
	[-0.0263, 109.3425],
	13,
);

// ===== Toast Notification =====
window.showToast = function (message, type = "success", duration = 3500) {
	const icons = { success: "✅", error: "❌", info: "ℹ️", warning: "⚠️" };
	const container = document.getElementById("toastContainer");
	if (!container) return;

	const toast = document.createElement("div");
	toast.className = `toast toast-${type}`;
	toast.innerHTML = `<span class="toast-icon">${icons[type] || "ℹ️"}</span><span>${message}</span>`;
	container.appendChild(toast);

	setTimeout(() => {
		toast.classList.add("hiding");
		toast.addEventListener("animationend", () => toast.remove());
	}, duration);
};

// Custom Zoom Control Logic
document.getElementById("zoomInBtn").addEventListener("click", function () {
	map.zoomIn();
});
document.getElementById("zoomOutBtn").addEventListener("click", function () {
	map.zoomOut();
});

// Base Map dari OpenStreetMap
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
	attribution:
		'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);

// Inisialisasi FeatureGroups untuk masing-masing layer
const jalanLayer = L.featureGroup().addTo(map);

const searchInput = document.getElementById("searchInput");
const searchClear = document.getElementById("searchClear");

searchInput.addEventListener("focus", function () {
	if (typeof window.deactivateAddMode === "function")
		window.deactivateAddMode();
});

searchInput.addEventListener("input", function () {
	const val = this.value.toLowerCase();
	if (val.length > 0) {
		searchClear.style.visibility = "visible";
		window.showSearchResults(val);
	} else {
		searchClear.style.visibility = "hidden";
		document.getElementById("searchResults").style.display = "none";
	}
});

searchClear.addEventListener("click", function () {
	searchInput.value = "";
	searchClear.style.visibility = "hidden";
	document.getElementById("searchResults").style.display = "none";
	searchInput.focus();
});

// UI Logic: Custom Layer Control Toggle
const layerBtn = document.getElementById("layerBtn");
const layerPanel = document.getElementById("layerPanel");

if (layerBtn && layerPanel) {
	layerBtn.addEventListener("click", function () {
		if (typeof window.deactivateAddMode === "function")
			window.deactivateAddMode();
		layerPanel.style.display =
			layerPanel.style.display === "block" ? "none" : "block";
	});
}

// Sembunyikan layer panel saat klik di peta
map.on("click", function () {
	if (layerPanel) layerPanel.style.display = "none";
});

// Logic untuk Toggle Layer Visibility
const setupLayerToggle = (id, layer) => {
	const el = document.getElementById(id);
	if (el) {
		el.addEventListener("change", function (e) {
			e.target.checked ? map.addLayer(layer) : map.removeLayer(layer);
		});
	}
};

setupLayerToggle("layerJalan", jalanLayer);

// --- Sub-layer Toggle (expand/collapse) ---
window.toggleSubLayer = function (subId, iconEl) {
	const sub = document.getElementById(subId);
	if (!sub) return;
	const isHidden = sub.style.display === "none";
	sub.style.display = isHidden ? "" : "none";
	iconEl.classList.toggle("collapsed", !isHidden);
};

// --- Sub-layer Filter ---
window.applySubFilter = function (type) {
	if (type === "jalan") {
		const checked = [...document.querySelectorAll(".sub-jalan:checked")].map(
			(el) => el.value,
		);
		jalanLayer.eachLayer((layer) => {
			if (!layer.jalanData) return;
			const visible = checked.includes(layer.jalanData.status);
			layer.setStyle({ opacity: visible ? 1 : 0, fillOpacity: visible ? 0.5 : 0 });
		});
	}
};

// --- Modal Logic ---
const unifiedModal = document.getElementById("unifiedModal");
const modalTitle   = document.getElementById("modalTitle");
const modalBody    = document.getElementById("modalBody");

window.openModal = function (title, bodyHTML, saveCallback) {
	if (!unifiedModal) return;
	modalTitle.textContent = title;
	modalBody.innerHTML = bodyHTML;
	unifiedModal.classList.add("show");

	const currentSaveBtn = document.getElementById("modalSaveBtn");
	if (currentSaveBtn) {
		const newSaveBtn = currentSaveBtn.cloneNode(true);
		currentSaveBtn.parentNode.replaceChild(newSaveBtn, currentSaveBtn);
		newSaveBtn.addEventListener("click", saveCallback);
	}
};

window.closeModal = function () {
	if (unifiedModal) unifiedModal.classList.remove("show");
};

const confirmModal   = document.getElementById("confirmModal");
const confirmMessage = document.getElementById("confirmMessage");

window.openConfirmModal = function (msg, confirmCallback) {
	if (!confirmModal) return;
	confirmMessage.textContent = msg;
	confirmModal.classList.add("show");

	const currentYesBtn = document.getElementById("confirmYesBtn");
	if (currentYesBtn) {
		const newYesBtn = currentYesBtn.cloneNode(true);
		currentYesBtn.parentNode.replaceChild(newYesBtn, currentYesBtn);
		newYesBtn.addEventListener("click", function () {
			confirmModal.classList.remove("show");
			confirmCallback();
		});
	}
};

window.closeConfirmModal = function () {
	if (confirmModal) confirmModal.classList.remove("show");
};

// --- Add Mode (untuk draw control) ---
window.currentDrawMode = null;
window.activeDrawHandler = null;

window.deactivateAddMode = function () {
	if (window.activeDrawHandler) {
		try { window.activeDrawHandler.disable(); } catch(e) {}
		window.activeDrawHandler = null;
	}
	window.currentDrawMode = null;
	document.getElementById("map").style.cursor = "";
};