feature: sebaran lokasi project pariwisata

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: '© 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;

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