TIF_NGANJUK_E41220949/resources/views/user/sig-tps.blade.php

@extends('user.template')

@section('content')
<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>
    header, .navbar, #header {
        position: sticky;
        top: 0;
        z-index: 2000 !important;
        background: #fff;
    }

    .leaflet-top,
    .leaflet-bottom,
    .leaflet-control {
        z-index: 400 !important;
    }

    #mapTPS {
        width: 100%;
        height: 450px;
        border-radius: 12px;
        box-shadow: 0 6px 20px rgba(0,0,0,.12);
    }

    .map-filter {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 12px;
        align-items: center;
    }

    .map-info {
        font-size: 14px;
        color: #555;
    }

    .legend {
        background: #fff;
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 14px;
        box-shadow: 0 2px 12px rgba(0,0,0,.15);
        line-height: 18px;
    }

    .legend i {
        width: 16px;
        height: 16px;
        float: left;
        margin-right: 8px;
    }
</style>

<div class="page-title">
    <div class="container d-lg-flex justify-content-between align-items-center">
        <h1>Sebaran TPS di Kabupaten Nganjuk</h1>
        <nav class="breadcrumbs">
            <ol>
                <li><a href="/">Beranda</a></li>
                <li class="current">Sebaran TPS</li>
            </ol>
        </nav>
    </div>
</div>

<section class="section">
    <div class="container">

        <!-- INFO & BUTTON -->
        <div class="map-filter">
            <div class="map-info">
                Klik tombol di samping untuk menemukan <b>TPS terdekat</b> dari lokasi Anda saat ini.
            </div>

            <button id="btnLokasi" class="btn btn-primary btn-sm">
                Cari TPS Terdekat
            </button>
        </div>

        <div id="mapTPS"></div>
    </div>
</section>

<script>
/* =============================
   INIT MAP
============================= */
var 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);

/* =============================
   ICON TPS
============================= */
function icon(color) {
    return new L.Icon({
        iconUrl: `https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-${color}.png`,
        shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34]
    });
}

var iconTPS   = icon('green');
var iconTPS3R = icon('blue');
var iconTPA   = icon('red');
var iconNear  = icon('yellow');

/* =============================
   DATA TPS
============================= */
var tpsData = @json($tps);
var markers = [];

/* =============================
   MARKER TPS
============================= */
tpsData.forEach(tps => {
    if (!tps.latitude || !tps.longitude) return;

    let iconUse = iconTPS;
    if (tps.kategori_tps_id == 5) iconUse = iconTPS3R;
    if (tps.kategori_tps_id == 6) iconUse = iconTPA;

    let marker = L.marker([tps.latitude, tps.longitude], { icon: iconUse })
        .bindPopup(`
            <strong>${tps.nama_tps}</strong><br>
            <small>${tps.alamat_tps ?? '-'}</small><br>
            <span class="mt-1 badge bg-success">${tps.status_tps ?? '-'}</span>
            <hr style="margin:6px 0">
            <a href="/tps/${tps.id_tps}" style="font-size:13px">Detail TPS</a>
        `)
        .addTo(map);

    marker.tpsData = tps;
    markers.push(marker);
});

/* =============================
   LEGEND
============================= */
var legend = L.control({ position: 'bottomleft' });
legend.onAdd = function () {
    var div = L.DomUtil.create('div', 'legend');
    div.innerHTML = `
        <strong>Kategori TPS</strong><br>
        <i style="background:#198754"></i> TPS<br>
        <i style="background:#0d6efd"></i> TPS 3R<br>
        <i style="background:#dc3545"></i> TPA
    `;
    return div;
};
legend.addTo(map);

/* =============================
   HITUNG JARAK
============================= */
function getDistance(lat1, lon1, lat2, lon2) {
    const R = 6371;
    const dLat = (lat2-lat1) * Math.PI/180;
    const dLon = (lon2-lon1) * Math.PI/180;
    const a =
        Math.sin(dLat/2)**2 +
        Math.cos(lat1*Math.PI/180) *
        Math.cos(lat2*Math.PI/180) *
        Math.sin(dLon/2)**2;
    return R * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)));
}

/* =============================
   TPS TERDEKAT
============================= */
document.getElementById('btnLokasi').addEventListener('click', function () {

    if (!navigator.geolocation) {
        alert('Browser tidak mendukung GPS');
        return;
    }

    navigator.geolocation.getCurrentPosition(pos => {
        let userLat = pos.coords.latitude;
        let userLng = pos.coords.longitude;

        // LINGKARAN BIRU (USER)
        L.circleMarker([userLat, userLng], {
            radius: 8,
            color: '#0d6efd',
            fillColor: '#0d6efd',
            fillOpacity: 0.8
        }).addTo(map)
          .bindPopup('Lokasi Anda')
          .openPopup();

        let nearest = null;
        let minDist = Infinity;

        markers.forEach(m => {
            let tps = m.tpsData;
            let dist = getDistance(userLat, userLng, tps.latitude, tps.longitude);

            if (dist < minDist) {
                minDist = dist;
                nearest = m;
                nearest.distance = dist;
            }
        });

        if (nearest) {
            nearest.setIcon(iconNear);
            nearest.openPopup();
            map.setView(nearest.getLatLng(), 15);
        }
    });
});
</script>
@endsection