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>";
+        });
+});

resources/views/maps/google-api.blade.php

@@ -1,45 +1,41 @@
 @extends('layouts.vertical', ['subtitle' => 'Google Maps'])
+
 @section('css')
-<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+<style>
+    .loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5); /* Latar belakang gelap transparan */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.loading-text {
+    background: white;
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-size: 18px;
+    font-weight: bold;
+}
+</style>
 @endsection
 
 @section('content')
-@include('layouts.partials/page-title', ['title' => 'Maps', 'subtitle' => 'Google Maps'])
+@include('layouts.partials.page-title', ['title' => 'Maps', 'subtitle' => 'Google Maps'])
+<!-- Elemen loading -->
+<div id="loading" class="loading-overlay">
+    <div class="loading-text">Loading data...</div>
+</div>
+
+<!-- Peta -->
 <div id="map" style="width: 100%; height: 90vh;"></div>
 @endsection
 
 @section('scripts')
-<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-<script src="https://unpkg.com/togeojson@0.16.0"></script>
-<script src="https://unpkg.com/leaflet-omnivore@0.3.4/leaflet-omnivore.min.js"></script>
-<script src="https://unpkg.com/leaflet-kml/L.KML.js"></script>
-<script>
-    document.addEventListener("DOMContentLoaded", function () {
-        var map = L.map('map').setView([-6.9175, 107.6191], 10); // Jakarta
-
-        // Tambahkan peta dasar dari OpenStreetMap
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '&copy; OpenStreetMap contributors'
-        }).addTo(map);
-
-        // Muat file KMZ
-        omnivore.kml("{{ asset('storage/maps/rencanapolaruang_rtrw_2024_2044__rencana_pola_ruang.kml') }}")
-            .on('ready', function () {
-                try {
-                    var bounds = this.getBounds();
-                    if (bounds.isValid()) {
-                        map.fitBounds(bounds);
-                    } else {
-                        console.warn("Bounds tidak valid, gunakan fallback.");
-                        map.setView([-6.9175, 107.6191], 10); // Default ke Jakarta
-                    }
-                } catch (error) {
-                    console.error("Error setting bounds:", error);
-                    map.setView([-6.1751, 106.8650], 10);
-                }
-            })
-            .addTo(map);
-
-    });
-</script>
+@vite(['resources/js/maps/maps-kml.js'])
 @endsection