From 8bae33519f020bd25e267f7222ae62f7e7ddec13 Mon Sep 17 00:00:00 2001
From: "@jamaludinarifrohman6661" <jamaludinarifrohman6661@gmail.com>
Date: Mon, 24 Feb 2025 21:47:24 +0700
Subject: [PATCH] feature: sebaran lokasi project pariwisata

---
 .../Controllers/Api/TourismController.php     |  2 +-
 resources/js/dashboards/pbg.js                | 30 ++++++++++++++++++-
 resources/views/dashboards/pbg.blade.php      |  5 ++--
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/app/Http/Controllers/Api/TourismController.php b/app/Http/Controllers/Api/TourismController.php
index 041d77e..3a20e69 100644
--- a/app/Http/Controllers/Api/TourismController.php
+++ b/app/Http/Controllers/Api/TourismController.php
@@ -110,7 +110,7 @@ class TourismController extends Controller
     {
         $locations = Tourism::whereNotNull('longitude')
                     ->whereNotNull('latitude')
-                    ->select('longitude', 'latitude')
+                    ->select('project_name', 'longitude', 'latitude')
                     ->get();
 
         return response()->json([
diff --git a/resources/js/dashboards/pbg.js b/resources/js/dashboards/pbg.js
index 628de88..5967118 100644
--- a/resources/js/dashboards/pbg.js
+++ b/resources/js/dashboards/pbg.js
@@ -76,10 +76,38 @@ document.addEventListener("DOMContentLoaded", async function () {
 
         updatePieChart(dataSeriesPieChart, labelsPieChart);
 
-        // Load all location
+        // Load all Tourism location
         const allLocation = await getAllLocation();
         console.log(allLocation);
 
+        // Filter hanya data yang memiliki angka valid
+        let validLocations = allLocation.dataLocation.filter(loc => {
+            return !isNaN(parseFloat(loc.longitude)) && !isNaN(parseFloat(loc.latitude));
+        });
+
+        // Ubah string ke float
+        validLocations = validLocations.map(loc => ({
+            name: loc.project_name,
+            longitude: parseFloat(loc.longitude),
+            latitude: parseFloat(loc.latitude)
+        }));
+
+        console.log(validLocations.name)
+
+        // Inisialisasi peta
+        var map = L.map('map').setView([-7.0230, 107.5275], 10);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        // Tambahkan marker ke peta
+        validLocations.forEach(function(loc) {
+            L.marker([loc.latitude, loc.longitude])
+                .addTo(map)
+                .bindPopup(`<b>${loc.name}</b>`) // Popup saat diklik
+                .bindTooltip(loc.name, { permanent: false, direction: "top" }); // Tooltip saat di-hover
+        });
+
         // Realisasi terbit PBG
         const totalRealisasiTerbitPBG = document.getElementById("realisasi-terbit-pbg");
         if (!totalRealisasiTerbitPBG) return;
diff --git a/resources/views/dashboards/pbg.blade.php b/resources/views/dashboards/pbg.blade.php
index 2915f1a..5baf94c 100644
--- a/resources/views/dashboards/pbg.blade.php
+++ b/resources/views/dashboards/pbg.blade.php
@@ -1,6 +1,7 @@
 @extends('layouts.vertical', ['subtitle' => 'Dashboard'])
 
 @section('css')
+<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
 @vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
 @endsection
 @section('content')
@@ -207,8 +208,7 @@
                     </div>
         
                     <div class="card-body pt-0">
-                        <div id="world-map-markers" class="mt-3" style="height: 309px">
-                        </div>
+                        <div id="map" style="height: 400px; width: 100%;"></div>
                     </div> <!-- end card-body-->
         
         
@@ -319,5 +319,6 @@
 @endsection
 
 @section('scripts')
+<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
 @vite(['resources/js/dashboards/pbg.js'])
 @endsection
\ No newline at end of file