From 496b1869569e6223c1d265a6e62f6aa8733d44d3 Mon Sep 17 00:00:00 2001
From: rahmagustin <e41220949@student.polije.ac.id>
Date: Mon, 22 Dec 2025 22:07:44 +0700
Subject: [PATCH] sebaran tps

---
 app/Http/Controllers/SigController.php  |  14 ++
 resources/views/user/sig-tps.blade.php  | 205 ++++++++++++++++++++++++
 resources/views/user/template.blade.php |   2 +-
 routes/web.php                          |   2 +
 4 files changed, 222 insertions(+), 1 deletion(-)
 create mode 100644 app/Http/Controllers/SigController.php

diff --git a/app/Http/Controllers/SigController.php b/app/Http/Controllers/SigController.php
new file mode 100644
index 0000000..619a4c4
--- /dev/null
+++ b/app/Http/Controllers/SigController.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+
+class SigController extends Controller
+{
+    public function index()
+    {
+        $title = 'User SIG';
+        return view('user.sig-tps', compact('title'));
+    }
+}
diff --git a/resources/views/user/sig-tps.blade.php b/resources/views/user/sig-tps.blade.php
index 64effd1..c4847bb 100644
--- a/resources/views/user/sig-tps.blade.php
+++ b/resources/views/user/sig-tps.blade.php
@@ -2,6 +2,211 @@
 
 @section('content')
 
+<!-- ================= LEAFLET ================= -->
+<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;
+    }
+
+    /* JARAK KE FOOTER */
+    #call-to-action.call-to-action.section {
+        margin-top: 40px;
+        margin-bottom: 90px;
+    }
+
+    .map-wrapper {
+        max-width: 1100px;
+        width: 100%;
+        border-radius: 14px;
+        overflow: hidden;
+        box-shadow: 0 6px 18px rgba(0,0,0,.15);
+    }
+
+    #mapTPS {
+        width: 100%;
+        height: 450px;
+    }
+
+    /* FIX Z-INDEX */
+    .leaflet-top,
+    .leaflet-bottom {
+        z-index: 400 !important;
+    }
+
+    #header {
+        z-index: 1000 !important;
+        position: sticky;
+        top: 0;
+    }
+
+    /* POPUP */
+    .leaflet-popup-content-wrapper {
+        border-radius: 12px;
+    }
+
+    /* ================= LEGEND ================= */
+    .map-legend {
+        background: #fff;
+        padding: 10px 14px;
+        border-radius: 10px;
+        box-shadow: 0 4px 14px rgba(0,0,0,.15);
+        font-size: 13px;
+        line-height: 1.6;
+    }
+
+    .map-legend h6 {
+        margin: 0 0 6px 0;
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 4px;
+    }
+
+    .legend-color {
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+    }
+</style>
+
+<!-- ================= PAGE TITLE ================= -->
+<div class="page-title">
+    <div class="container d-lg-flex justify-content-between align-items-center">
+        <h1 class="mb-2 mb-lg-0">Sebaran TPS Kabupaten Nganjuk</h1>
+        <nav class="breadcrumbs">
+            <ol>
+                <li><a href="/">Beranda</a></li>
+                <li class="current">Sebaran TPS</li>
+            </ol>
+        </nav>
+    </div>
+</div>
+
+<!-- ================= MAP SECTION ================= -->
+<section id="call-to-action" class="call-to-action section">
+    <div class="container d-flex justify-content-center">
+        <div class="map-wrapper">
+            <div id="mapTPS"></div>
+        </div>
+    </div>
+</section>
+
+<script>
+    /* ================= INIT MAP ================= */
+    const map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: "© OpenStreetMap"
+    }).addTo(map);
+
+    /* ================= PIN MODERN (AMAN) ================= */
+    function pinIcon(color) {
+        return L.divIcon({
+            className: '',
+            html: `
+                <svg width="32" height="32" viewBox="0 0 24 24"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path fill="${color}"
+                        d="M12 2C8.13 2 5 5.13 5 9
+                        c0 5.25 7 13 7 13
+                        s7-7.75 7-13
+                        c0-3.87-3.13-7-7-7z"/>
+                    <circle cx="12" cy="9" r="2.5" fill="white"/>
+                </svg>
+            `,
+            iconSize: [32, 32],
+            iconAnchor: [16, 32],
+            popupAnchor: [0, -28]
+        });
+    }
+
+    const iconTPS   = pinIcon('#198754'); // hijau
+    const iconTPS3R = pinIcon('#0d6efd'); // biru
+    const iconTPA   = pinIcon('#dc3545'); // merah
+
+    /* ================= DATA TPS ================= */
+    const dataTPS = [
+        {
+            nama: "TPS Berbek",
+            jenis: "TPS",
+            alamat: "Kecamatan Berbek",
+            lat: -7.5978,
+            lng: 111.917,
+            icon: iconTPS
+        },
+        {
+            nama: "TPS 3R Loceret",
+            jenis: "TPS 3R",
+            alamat: "Kecamatan Loceret",
+            lat: -7.6280,
+            lng: 111.910,
+            icon: iconTPS3R
+        },
+        {
+            nama: "TPA Nganjuk",
+            jenis: "TPA",
+            alamat: "Kabupaten Nganjuk",
+            lat: -7.6140,
+            lng: 111.900,
+            icon: iconTPA
+        }
+    ];
+
+    /* ================= MARKER ================= */
+    dataTPS.forEach(item => {
+        L.marker([item.lat, item.lng], { icon: item.icon })
+            .addTo(map)
+            .bindPopup(`
+                <strong>${item.nama}</strong><br>
+                <b>Jenis:</b> ${item.jenis}<br>
+                <b>Alamat:</b> ${item.alamat}<br>
+                <button style="
+                    margin-top:6px;
+                    padding:6px 12px;
+                    background:#198754;
+                    border:none;
+                    color:#fff;
+                    border-radius:6px;
+                    font-size:13px;
+                    cursor:pointer;
+                ">Lihat Detail</button>
+            `);
+    });
+
+    /* ================= LEGEND ================= */
+    const legend = L.control({ position: 'bottomleft' });
+
+    legend.onAdd = function () {
+        const div = L.DomUtil.create('div', 'map-legend');
+        div.innerHTML = `
+            <h6>Keterangan</h6>
+            <div class="legend-item">
+                <span class="legend-color" style="background:#198754;"></span>
+                TPS
+            </div>
+            <div class="legend-item">
+                <span class="legend-color" style="background:#0d6efd;"></span>
+                TPS 3R
+            </div>
+            <div class="legend-item">
+                <span class="legend-color" style="background:#dc3545;"></span>
+                TPA
+            </div>
+        `;
+        return div;
+    };
+
+    legend.addTo(map);
+</script>
 
 @endsection
diff --git a/resources/views/user/template.blade.php b/resources/views/user/template.blade.php
index 985be36..8537892 100644
--- a/resources/views/user/template.blade.php
+++ b/resources/views/user/template.blade.php
@@ -51,7 +51,7 @@
                                     <li><a href="{{ route('user.about-tps') }}">TPA</a></li>
                                 </ul>
                             </li>
-                    <li><a href="#services">Sebaran TPS</a></li>
+                    <li><a href="{{ route('user.sig-tps') }}">Sebaran TPS</a></li>
                     <li><a href="#portfolio">Aduan TPS</a></li>
                     <li><a href="#team">Kontak</a></li>
                 </ul>
diff --git a/routes/web.php b/routes/web.php
index 01b875c..7f09bec 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -1,5 +1,6 @@
 <?php
 
+use App\Http\Controllers\SigController;
 use App\Http\Controllers\AboutController;
 use App\Http\Controllers\IndexController;
 use Illuminate\Support\Facades\Route;
@@ -7,6 +8,7 @@
 Route::get('/index', [IndexController::class, 'index'])->name('user.index');
 Route::get('/about', [AboutController::class, 'index'])->name('user.about');
 Route::get('/about-tps', [AboutController::class, 'tps'])->name('user.about-tps');
+Route::get('/sig-tps', [SigController::class, 'index'])->name('user.sig-tps');
 
 Route::get('/', function () {
     return view('welcome');