feat(dashboard): change layer map to googleHybrid

app/Http/Controllers/DashboardController.php

@@ -19,7 +19,9 @@ public function admin()
             $query->select('indicator_id')->from('rule');
         })->count();
         $rulesCount = Rule::count();
-        return view('dashboard.admin', compact('userCount', 'landCount', 'indicatorCount', 'rulesCount'));
+
+        $evaluations = Evaluation::with('land.detailLands')->get();
+        return view('dashboard.admin', compact('userCount', 'landCount', 'indicatorCount', 'rulesCount', 'evaluations'));
     }
 
     public function petugas()

public/assets/js/pages/customJs/dashboard/admin.js

@@ -0,0 +1,48 @@
+var map, googleHybrid, marker, polygon;
+
+let evaluationElement = document.getElementById("evaluations");
+let evaluation = JSON.parse(evaluationElement.dataset.evaluations);
+
+document.addEventListener("DOMContentLoaded", function () {
+    initMap();
+    map.invalidateSize();
+    setEvaluationToMap();
+});
+
+function initMap() {
+    map = L.map("map", {
+        attributionControl: false,
+    }).setView([-8.159774548190976, 113.72305183874593], 10);
+
+    googleHybrid = L.tileLayer(
+        "http://{s}.google.com/vt?lyrs=y&x={x}&y={y}&z={z}",
+        {
+            maxZoom: 20,
+            subdomains: ["mt0", "mt1", "mt2", "mt3"],
+        }
+    ).addTo(map);
+}
+
+function setEvaluationToMap() {
+    evaluation.forEach((evaluation) => {
+        let coordinates = evaluation.land.detail_lands.map((detail) => {
+            return [detail.lat, detail.lng];
+        });
+
+        let cfValue = evaluation.cf_value * 100;
+
+        polygon = L.polygon(coordinates, {
+            color: "blue",
+            fillColor: "blue",
+            fillOpacity: 0.5,
+        }).addTo(map);
+
+        marker = L.marker(coordinates[0])
+            .addTo(map)
+            .bindPopup(
+                `<div class="text-center font-semibold"><b> Hasil presentase CF pada lahan <br /> ${
+                    evaluation.land.owner
+                }</br>${cfValue.toFixed(2)} %</b></div>`
+            );
+    });
+}

public/assets/js/pages/customJs/dashboard/petugas.js

@@ -1,13 +1,14 @@
-var map, googleSat, marker, polygon;
+var map, googleHybrid, marker, polygon;
 
 let evaluationElement = document.getElementById("evaluations");
 let evaluation = JSON.parse(evaluationElement.dataset.evaluations);
 
 document.addEventListener("DOMContentLoaded", function () {
-    initMap();
+    if (evaluation.length > 0) {
-    map.invalidateSize();
+        initMap();
-    console.log(evaluation);
+        map.invalidateSize();
-    setEvaluationToMap();
+        setEvaluationToMap();
+    }
 });
 
 function initMap() {
@@ -15,8 +16,8 @@ function initMap() {
         attributionControl: false,
     }).setView([-8.172495095862395, 113.69876818661332], 10);
 
-    googleSat = L.tileLayer(
+    googleHybrid = L.tileLayer(
-        "http://{s}.google.com/vt?lyrs=s&x={x}&y={y}&z={z}",
+        "http://{s}.google.com/vt?lyrs=y&x={x}&y={y}&z={z}",
         {
             maxZoom: 20,
             subdomains: ["mt0", "mt1", "mt2", "mt3"],
@@ -31,7 +32,6 @@ function setEvaluationToMap() {
         });
 
         let cfValue = evaluation.cf_value * 100;
-        console.log(cfValue.toFixed(2));
 
         polygon = L.polygon(coordinates, {
             color: "blue",

resources/views/dashboard/admin.blade.php

@@ -124,6 +124,7 @@
                         </div>
                         <div class="card-body">
                             <div id="map" style="height: 400px;"></div>
+                            <input type="hidden" id="evaluations" data-evaluations="{{ $evaluations }}">
                         </div>
                     </div>
                 </div>
@@ -135,15 +136,6 @@
     <!-- End Page-content -->
 
     @push('other-js')
-        <script>
+        <script src="{{ asset('assets/js/pages/customJs/dashboard/admin.js') }}"></script>
-            const map = L.map('map', {
-                attributionControl: false,
-            }).setView([-8.172495095862395, 113.69876818661332], 10);
-
-            const googleSat = L.tileLayer('http://{s}.google.com/vt?lyrs=s&x={x}&y={y}&z={z}', {
-                maxZoom: 20,
-                subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
-            }).addTo(map);
-        </script>
     @endpush
 @endsection

resources/views/dashboard/petugas.blade.php

@@ -79,7 +79,13 @@
                         <h4 class="card-title mb-0">Peta Lahan</h4>
                     </div>
                     <div class="card-body">
-                        <div id="map" style="height: 400px;"></div>
+                        @if ($evaluations->isEmpty())
+                            <div class="text-center">
+                                <h6 class="text-muted">Belum ada penilaian</h6>
+                            </div>
+                        @else
+                            <div id="map" style="height: 400px;"></div>
+                        @endif
                         <input type="hidden" id="evaluations" data-evaluations="{{ $evaluations }}">
                     </div>
                 </div>