From dceb46ab862b05087358e4e31976a203f158d45e Mon Sep 17 00:00:00 2001
From: "@jamaludinarifrohman6661" <jamaludinarifrohman6661@gmail.com>
Date: Thu, 6 Mar 2025 16:50:13 +0700
Subject: [PATCH] change-request: add custom geo layer

---
 .../Controllers/Api/TourismController.php     |   2 +-
 resources/js/data/tourisms/data-tourisms.js   | 122 ++++++++++++++++--
 resources/views/data/tourisms/index.blade.php |   5 +-
 3 files changed, 113 insertions(+), 16 deletions(-)

diff --git a/app/Http/Controllers/Api/TourismController.php b/app/Http/Controllers/Api/TourismController.php
index 3a20e69..5a2a50c 100644
--- a/app/Http/Controllers/Api/TourismController.php
+++ b/app/Http/Controllers/Api/TourismController.php
@@ -39,7 +39,7 @@ class TourismController extends Controller
             $tourisms->village_name = $village ? $village->village_name : null;
 
             $district = DB::table('districts')->where('district_code', $tourisms->district_code)->first();
-            $tourisms->district_name = $village ? $village->village_name : null;
+            $tourisms->district_name = $district ? $district->district_name : null;
             return $tourisms;
         });
 
diff --git a/resources/js/data/tourisms/data-tourisms.js b/resources/js/data/tourisms/data-tourisms.js
index 728cba1..a6a1922 100644
--- a/resources/js/data/tourisms/data-tourisms.js
+++ b/resources/js/data/tourisms/data-tourisms.js
@@ -3,6 +3,8 @@ import gridjs from "gridjs/dist/gridjs.umd.js";
 import "gridjs/dist/gridjs.umd.js";
 import GlobalConfig from "../../global-config.js";
 import GeneralTable from "../../table-generator.js";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
 
 const dataTourismsColumns = [
     "No",
@@ -21,6 +23,7 @@ const dataTourismsColumns = [
         widht: "120px",
         formatter: function (cell, row) {
             const id = row.cells[11].data;
+            const district = row.cells[4].data;
             const long = row.cells[9].data;
             const lat = row.cells[10].data;
             const model = "data/tourisms";
@@ -32,7 +35,7 @@ const dataTourismsColumns = [
                         <i class='bx bx-edit'></i></button>
                     
                     <button class="btn btn-info me-2 btn-view" 
-                        data-long="${long}" data-lat="${lat}">
+                        data-long="${long}" data-lat="${lat}" data-district="${district}">
                         <i class='bx bx-map'></i></button>
             
                     <button class="btn btn-red btn-delete" 
@@ -74,24 +77,117 @@ document.addEventListener("DOMContentLoaded", () => {
     table.init();
 
     // Event listener untuk tombol "View" yang memunculkan modal
+    // document.addEventListener("click", function (e) {
+    //     if (e.target && e.target.classList.contains("btn-view")) {
+    //         const long = e.target.getAttribute("data-long");
+    //         const lat = e.target.getAttribute("data-lat");
+
+    //         // Menyiapkan URL iframe dengan koordinat yang didapatkan
+    //         const iframeSrc = `https://www.google.com/maps?q=${lat},${long}&hl=es;z=14&output=embed`;
+
+    //         // Menemukan modal dan iframe di dalam modal
+    //         const modal = document.querySelector(".modalGMaps");
+    //         const iframe = modal.querySelector("iframe");
+
+    //         // Set src iframe untuk menampilkan peta dengan koordinat yang relevan
+    //         iframe.src = iframeSrc;
+
+    //         // Menampilkan modal
+    //         var modalInstance = new bootstrap.Modal(modal);
+    //         modalInstance.show();
+    //     }
+    // });
+
+    let map;
+    let geoLayer;
+    // Event listener untuk tombol "View" yang memunculkan modal dengan Leaflet
     document.addEventListener("click", function (e) {
         if (e.target && e.target.classList.contains("btn-view")) {
-            const long = e.target.getAttribute("data-long");
-            const lat = e.target.getAttribute("data-lat");
+            const long = parseFloat(e.target.getAttribute("data-long"));
+            const lat = parseFloat(e.target.getAttribute("data-lat"));
+            const district = e.target.getAttribute("data-district");
 
-            // Menyiapkan URL iframe dengan koordinat yang didapatkan
-            const iframeSrc = `https://www.google.com/maps?q=${lat},${long}&hl=es;z=14&output=embed`;
-
-            // Menemukan modal dan iframe di dalam modal
             const modal = document.querySelector(".modalGMaps");
-            const iframe = modal.querySelector("iframe");
-
-            // Set src iframe untuk menampilkan peta dengan koordinat yang relevan
-            iframe.src = iframeSrc;
-
-            // Menampilkan modal
             var modalInstance = new bootstrap.Modal(modal);
             modalInstance.show();
+
+            setTimeout(() => {
+                if (!map) {
+                    map = L.map("map").setView([lat, long], 14);
+                    
+                    // Tambahkan tile layer (peta dasar)
+                    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+                        attribution: '&copy; OpenStreetMap contributors'
+                    }).addTo(map);
+                } else {
+                    map.setView([lat, long], 14);
+                }
+
+                if (geoLayer) {
+                    map.removeLayer(geoLayer);
+                }
+
+                // Tambahkan marker untuk lokasi
+                L.marker([lat, long]).addTo(map)
+                    .bindPopup(`<b>${district}</b><br>Lat: ${lat}, Long: ${long}`)
+                    .openPopup();
+
+                // Tambahkan GeoJSON ke dalam peta
+                fetch(`/storage/maps/tourisms/${district.toUpperCase()}.json`)
+                .then((res) => res.json())
+                .then((geojson) => {
+                    let colorMapping = {
+                        BJ: "rgb(235, 30, 30)",
+                        BA: "rgb(151, 219, 242)",
+                        CA: "rgb(70, 70, 165)",
+                        "P-2": "rgb(230, 255, 75)",
+                        HL: "rgb(50, 95, 40)",
+                        HPT: "rgb(75, 155, 55)",
+                        HP: "rgb(125, 180, 55)",
+                        W: "rgb(255, 165, 255)",
+                        PTL: "rgb(0, 255, 205)",
+                        "IK-2": "rgb(130, 185, 210)",
+                        "P-3": "rgb(175, 175, 55)",
+                        PS: "rgb(5, 215, 215)",
+                        PD: "rgb(235, 155, 60)",
+                        PK: "rgb(245, 155, 30)",
+                        HK: "rgb(155, 0, 255)",
+                        KPI: "rgb(105, 0, 0)",
+                        MBT: "rgb(95, 115, 145)",
+                        "P-4": "rgb(185, 235, 185)",
+                        TB: "rgb(70, 150, 255)",
+                        "P-1": "rgb(200, 245, 70)",
+                        TR: "rgb(215, 55, 0)",
+                        THR: "rgb(185, 165, 255)",
+                        TWA: "rgb(210, 190, 255)",
+                    };
+                    var geoLayer = L.geoJSON(geojson, {
+                        style: function (feature) {
+                            let htmlString = feature.properties.description.toString();
+                            let match = htmlString.match(
+                                /<td>Kode Zona<\/td>\s*<td>(.*?)<\/td>/
+                            );
+
+                            let color_code = match[1];
+                            return {
+                                color: colorMapping[color_code],
+                                fillColor: colorMapping[color_code] || "#cccccc", 
+                                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());
+                })
+                .catch((error) => {
+                    console.error("Error loading GeoJSON:", error);
+                });
+            }, 500);
         }
     });
 });
diff --git a/resources/views/data/tourisms/index.blade.php b/resources/views/data/tourisms/index.blade.php
index a17452e..2c04566 100644
--- a/resources/views/data/tourisms/index.blade.php
+++ b/resources/views/data/tourisms/index.blade.php
@@ -39,14 +39,15 @@
                     aria-label="Close"></button>
             </div>
             <div class="modal-body">
-                <iframe 
+                {{-- <iframe 
                         src="" 
                         width="100%" 
                         height="450" 
                         style="border:0;" 
                         allowfullscreen="" 
                         loading="lazy">
-                </iframe>
+                </iframe> --}}
+                <div id="map" style="height: 400px;"></div>
             </div>
         </div>
     </div>