Update Ambil Warna Vektor Map dari Database

app/Http/Controllers/MapController.php

@@ -0,0 +1,57 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Curas;
+use Illuminate\Http\Request;
+
+class MapController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        $data = Curas::with(['punyaKecamatanCuras', 'punyaKlasterCuras'])->get()->map(function ($item) {
+            return [
+                'kecamatan' => $item->punyaKecamatanCuras->nama_kecamatan, // pastikan nama kolom benar
+                'jumlah_curas' => $item->jumlah_curas,
+                'klaster' => $item->punyaKlasterCuras?->warna ?? '#cccccc' // fallback warna abu-abu jika tidak ada
+            ];
+        });
+
+        return response()->json($data);
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        //
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(string $id)
+    {
+        //
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        //
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        //
+    }
+}

app/Providers/AppServiceProvider.php

@@ -2,6 +2,7 @@
 
 namespace App\Providers;
 
+use Illuminate\Support\Facades\Route;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -19,6 +20,8 @@ public function register(): void
      */
     public function boot(): void
     {
-        //
+        Route::middleware('api')
+        ->prefix('api')
+        ->group(base_path('routes/api.php'));
     }
 }

resources/views/Admin/dashboardMapCuras.blade.php

@@ -1,25 +1,86 @@
 <x-layoutAdmin>
-    <div class="content-page">
+<div class="content-page">
      
         <div id="map" style="width: 100%; height: 500px;" ></div>
-<script>
+    {{-- <script>
-        var map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
+            var map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
-        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxZoom: 19,
+            maxZoom: 19,
 
-        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-    }).addTo(map);
+        }).addTo(map);
 
-    function popUp(f,l){
+        function popUp(f,l){
-    var out = [];
+        var out = [];
-    if (f.properties){
+        if (f.properties){
-        for(key in f.properties){
+            for(key in f.properties){
-            out.push(key+": "+f.properties[key]);
+                out.push(key+": "+f.properties[key]);
+            }
+            l.bindPopup(out.join("<br />"));
+        }
+        }
+            var jsonTest = new L.GeoJSON.AJAX(["{{ asset('/assets/map/gisProbolinggo.geojson') }}"],{onEachFeature:popUp}).addTo(map);
+    </script> --}}
+
+    <script>
+        let curasData = {};
+    
+        fetch("{{ url('/api/map') }}")
+            .then(res => res.json())
+            .then(data => {
+                data.forEach(item => {
+                    curasData[item.kecamatan] = item;
+                });
+    
+                loadMap(); // setelah data siap, jalankan ini
+            });
+    
+        function getColor(klasterWarna) {
+            return klasterWarna || '#cccccc'; // fallback
+        }
+    
+        function styleFeature(feature) {
+            let namaKecamatan = feature.properties.WADMKC;
+            let curas = curasData[namaKecamatan];
+    
+            return {
+                fillColor: curas ? getColor(curas.klaster) : '#cccccc',
+                weight: 1,
+                opacity: 1,
+                color: 'white',
+                fillOpacity: 0.7
+            };
+        }
+    
+        function popUp(feature, layer) {
+            let namaKecamatan = feature.properties.WADMKC;
+            let curas = curasData[namaKecamatan];
+    
+            let content = `<strong>${namaKecamatan}</strong><br/>`;
+            if (curas) {
+                content += `Jumlah Curas: ${curas.jumlah_curas}<br/>Klaster: ${curas.klaster}`;
+            } else {
+                content += `Data tidak tersedia`;
+            }
+    
+            layer.bindPopup(content);
+        }
+    
+        function loadMap() {
+            var map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
+    
+            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                maxZoom: 19,
+                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            }).addTo(map);
+    
+            new L.GeoJSON.AJAX(["{{ asset('/assets/map/gisProbolinggo.geojson') }}"], {
+                style: styleFeature,
+                onEachFeature: popUp
+            }).addTo(map);
         }
-        l.bindPopup(out.join("<br />"));
-    }
-}
-var jsonTest = new L.GeoJSON.AJAX(["{{ asset('/assets/map/gisProbolinggo.geojson') }}"],{onEachFeature:popUp}).addTo(map);
     </script>
-    </div>
+    
+
+</div>
 </x-layoutAdmin>

routes/api.php

@@ -0,0 +1,7 @@
+<?php
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Route;
+use App\Http\Controllers\MapController;
+
+Route::get('/map', [MapController::class, 'index']);