landing page-sebaran tps

resources/views/user/index.blade.php

@@ -202,12 +202,14 @@
     </section>
     <!-- /Services Section -->
 
-    <!-- Call To Action Section -->
     {{-- Leaflet CSS & JS --}}
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 
     <style>
+        /* =============================
+           MAP SECTION
+           ============================= */
         #call-to-action.call-to-action {
             padding: 0 !important;
             margin: 0 !important;
@@ -225,52 +227,92 @@
             border-radius: 12px;
             overflow: hidden;
             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+            position: relative;
         }
 
         #mapTPS {
             width: 100%;
             height: 450px;
+            position: relative;
+            z-index: 1;
         }
 
         .leaflet-popup-content-wrapper {
             border-radius: 14px !important;
         }
 
-        /* Legend */
+        /* =============================
+           FIX LEAFLET VS NAVBAR
+           ============================= */
+        header,
+        .navbar,
+        #header {
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            background: #fff;
+        }
+
+        /* paksa semua control leaflet turun dari navbar */
+        .leaflet-top {
+            top: 0px !important;
+            /* SESUAIKAN TINGGI NAVBAR */
+            z-index: 400 !important;
+        }
+
+        .leaflet-bottom {
+            bottom: 0px !important;
+        }
+
+        /* =============================
+           Legend
+           ============================= */
         .legend {
             background: white;
-            padding: 10px;
+            padding: 10px 12px;
-            border-radius: 8px;
+            border-radius: 10px;
             line-height: 18px;
             color: #333;
             box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+            font-size: 14px;
         }
 
         .legend i {
-            width: 18px;
+            width: 16px;
-            height: 18px;
+            height: 16px;
             float: left;
             margin-right: 8px;
-            opacity: 0.9;
+            opacity: 1;
         }
     </style>
 
     <section id="call-to-action" class="call-to-action section">
+
+        <!-- SECTION TITLE -->
+        <div class="section-title" data-aos="fade-up">
+            <h2>Peta Sebaran TPS</h2>
+            <p>Sistem Informasi Geografis Tempat Pembuangan Sampah</p>
+        </div>
+
+        <!-- MAP -->
         <div class="container" data-aos="fade-up">
             <div class="map-wrapper">
                 <div id="mapTPS"></div>
             </div>
         </div>
+
     </section>
 
     <script>
         // =============================
         // INIT MAP
         // =============================
-        var map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
+        var map = L.map('mapTPS', {
+            zoomControl: true
+        }).setView([-7.6078, 111.903], 12);
 
         L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: "Leaflet | © OpenStreetMap contributors",
+            attribution: "© OpenStreetMap contributors",
             maxZoom: 19
         }).addTo(map);
 
@@ -291,7 +333,7 @@ function markerIcon(color) {
         var iconTPS = markerIcon('green'); // TPS
         var iconTPS3R = markerIcon('blue'); // TPS 3R
         var iconTPA = markerIcon('red'); // TPA
-        var iconDefault = markerIcon('grey');
+        var iconDefault = markerIcon('black');
 
         // =============================
         // DATA TPS DARI DATABASE
@@ -299,17 +341,16 @@ function markerIcon(color) {
         var tpsData = @json($lokasiTps);
 
         tpsData.forEach(function(tps) {
-
             if (tps.latitude && tps.longitude) {
 
                 let iconKategori = iconDefault;
 
                 // SESUAIKAN ID KATEGORI
-                if (tps.kategori_tps_id == 1) {
+                if (tps.kategori_tps_id == 3) {
                     iconKategori = iconTPS;
-                } else if (tps.kategori_tps_id == 2) {
+                } else if (tps.kategori_tps_id == 5) {
                     iconKategori = iconTPS3R;
-                } else if (tps.kategori_tps_id == 3) {
+                } else if (tps.kategori_tps_id == 6) {
                     iconKategori = iconTPA;
                 }
 
@@ -320,7 +361,7 @@ function markerIcon(color) {
                     .bindPopup(`
                 <div style="min-width:200px">
                     <strong>${tps.nama_tps}</strong><br>
-                        ${tps.alamat_tps ?? ''}<br>
+                    ${tps.alamat_tps ?? '-'}<br>
                     <small>Status: ${tps.status_tps ?? '-'}</small>
                 </div>
             `);
@@ -328,19 +369,19 @@ function markerIcon(color) {
         });
 
         // =============================
-        // LEGEND PETA
+        // LEGEND
         // =============================
         var legend = L.control({
-            position: "bottomright"
+            position: "bottomleft"
         });
 
         legend.onAdd = function() {
             var div = L.DomUtil.create("div", "legend");
             div.innerHTML = `
             <strong>Kategori TPS</strong><br>
-            <i style="background:green"></i> TPS<br>
+            <i style="background:#198754"></i> TPS<br>
-            <i style="background:blue"></i> TPS 3R<br>
+            <i style="background:#0d6efd"></i> TPS 3R<br>
-            <i style="background:red"></i> TPA
+            <i style="background:#dc3545"></i> TPA
         `;
             return div;
         };
@@ -349,7 +390,6 @@ function markerIcon(color) {
     </script>
 
 
-
     <!-- Contact Section -->
     <section id="contact" class="contact section">
 

resources/views/user/template.blade.php

@@ -127,33 +127,6 @@
                 </div>
             </div>
         </div>
-
-        <div class="copyright text-center">
-            <div class="container d-flex flex-column flex-lg-row justify-content-center justify-content-lg-between align-items-center">
-
-                <div class="d-flex flex-column align-items-center align-items-lg-start">
-                    <div>
-                        © Copyright <strong><span>MyWebsite</span></strong>. All Rights Reserved
-                    </div>
-                    <div class="credits">
-                        <!-- All the links in the footer should remain intact. -->
-                        <!-- You can delete the links only if you purchased the pro version. -->
-                        <!-- Licensing information: https://bootstrapmade.com/license/ -->
-                        <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/herobiz-bootstrap-business-template/ -->
-                        Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> Distributed by <a href="https://themewagon.com">ThemeWagon</a>
-                    </div>
-                </div>
-
-                <div class="social-links order-first order-lg-last mb-3 mb-lg-0">
-                    <a href=""><i class="bi bi-twitter-x"></i></a>
-                    <a href=""><i class="bi bi-facebook"></i></a>
-                    <a href=""><i class="bi bi-instagram"></i></a>
-                    <a href=""><i class="bi bi-linkedin"></i></a>
-                </div>
-
-            </div>
-        </div>
-
     </footer>
 
     <!-- Scroll Top -->