partial update add loading on maps and add color for zone type maps

resources/js/maps/maps-kml.js

@@ -0,0 +1,55 @@
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+document.addEventListener("DOMContentLoaded", function () {
+    var map = L.map("map").setView([-6.9175, 107.6191], 10); // Bandung
+
+    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        attribution: "© OpenStreetMap contributors",
+    }).addTo(map);
+
+    // Dapatkan elemen loading
+    const loadingDiv = document.getElementById("loading");
+    loadingDiv.style.display = "flex"; // Tampilkan loading
+
+    fetch("/storage/maps/rencana-polaruang.geojson")
+        .then((res) => res.json())
+        .then((geojson) => {
+            let colorMapping = {
+                "Kawasan Pariwisata": "#ff6600", // Orange
+                "Kawasan Industri": "#0000ff", // Biru
+                "Kawasan Pemukiman": "#ff0000", // Merah
+                "Kawasan Hutan": "#008000", // Hijau
+                "Kawasan Pertanian": "#ffff00", // Kuning
+            };
+            var geoLayer = L.geoJSON(geojson, {
+                style: function (feature) {
+                    let name = feature.properties.Name; // Ambil properti Name
+
+                    console.log("Zone Type:", name);
+
+                    return {
+                        color: "#333333", // Warna garis
+                        fillColor: colorMapping[name] || "#cccccc", // Gunakan warna dari mapping
+                        fillOpacity: 0.6,
+                        weight: 1.5,
+                    };
+                },
+                onEachFeature: function (feature, layer) {
+                    if (feature.properties && feature.properties.name) {
+                        layer.bindPopup(feature.properties.name);
+                    }
+                },
+            }).addTo(map);
+
+            map.fitBounds(geoLayer.getBounds());
+
+            // Sembunyikan loading setelah selesai render
+            loadingDiv.style.display = "none";
+        })
+        .catch((error) => {
+            console.error("Error loading GeoJSON:", error);
+            loadingDiv.innerHTML =
+                "<div class='loading-text' style='background: red;'>Failed to load data!</div>";
+        });
+});