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

package.json

@@ -1,36 +1,37 @@
 {
-  "private": true,
+    "private": true,
-  "type": "module",
+    "type": "module",
-  "scripts": {
+    "scripts": {
-    "build": "vite build",
+        "build": "vite build",
-    "dev": "vite"
+        "dev": "vite"
-  },
+    },
-  "devDependencies": {
+    "devDependencies": {
-    "autoprefixer": "^10.4.20",
+        "autoprefixer": "^10.4.20",
-    "axios": "^1.7.4",
+        "axios": "^1.7.4",
-    "concurrently": "^9.0.1",
+        "concurrently": "^9.0.1",
-    "laravel-vite-plugin": "^1.0",
+        "laravel-vite-plugin": "^1.0",
-    "postcss": "^8.4.47",
+        "postcss": "^8.4.47",
-    "sass": "^1.81.1",
+        "sass": "^1.81.1",
-    "tailwindcss": "^3.4.13",
+        "tailwindcss": "^3.4.13",
-    "vite": "^5.0"
+        "vite": "^5.0"
-  },
+    },
-  "dependencies": {
+    "dependencies": {
-    "apexcharts": "^3.44.2",
+        "apexcharts": "^3.44.2",
-    "big.js": "^6.2.2",
+        "big.js": "^6.2.2",
-    "bootstrap": "^5.3.3",
+        "bootstrap": "^5.3.3",
-    "countup.js": "^2.3.2",
+        "countup.js": "^2.3.2",
-    "dropzone": "^5.9.0",
+        "dropzone": "^5.9.0",
-    "flatpickr": "^4.6.13",
+        "flatpickr": "^4.6.13",
-    "gmaps": "^0.4.25",
+        "gmaps": "^0.4.25",
-    "gridjs": "^5.1.0",
+        "gridjs": "^5.1.0",
-    "iconify-icon": "^2.1.0",
+        "iconify-icon": "^2.1.0",
-    "jsvectormap": "^1.5.1",
+        "jsvectormap": "^1.5.1",
-    "moment": "^2.29.4",
+        "leaflet": "^1.9.4",
-    "node-waves": "^0.7.6",
+        "moment": "^2.29.4",
-    "quill": "^1.3.7",
+        "node-waves": "^0.7.6",
-    "simplebar": "^5.3.9",
+        "quill": "^1.3.7",
-    "sweetalert2": "^11.16.0",
+        "simplebar": "^5.3.9",
-    "wnumb": "^1.2.0"
+        "sweetalert2": "^11.16.0",
-  }
+        "wnumb": "^1.2.0"
+    }
 }

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>
+@vite(['resources/js/maps/maps-kml.js'])
-<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>
 @endsection

vite.config.js

@@ -3,10 +3,6 @@ import laravel from "laravel-vite-plugin";
 import path from "path";
 
 export default defineConfig({
-    build: {
-        outDir: "public/build",
-        manifest: true, // Menghasilkan manifest.json untuk Laravel
-    },
     resolve: {
         alias: {
             "@": path.resolve(__dirname, "resources/js"),
@@ -98,7 +94,9 @@ export default defineConfig({
                 "resources/js/customers/index.js",
                 "resources/js/customers/create.js",
                 "resources/js/customers/edit.js",
-		"resources/js/dashboards/pbg.js"
+                "resources/js/dashboards/pbg.js",
+                // maps
+                "resources/js/maps/maps-kml.js",
             ],
             refresh: true,
         }),