126 lines
3.6 KiB
PHP
126 lines
3.6 KiB
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>
|
|
#mapTPS {
|
|
width: 100%;
|
|
height: 450px;
|
|
border-radius: 14px;
|
|
box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
|
|
}
|
|
|
|
.leaflet-popup-content-wrapper {
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.popup-btn {
|
|
display: inline-block;
|
|
margin-top: 8px;
|
|
padding: 6px 12px;
|
|
background: #198754;
|
|
color: #fff;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.popup-btn:hover {
|
|
background: #157347;
|
|
color: #fff;
|
|
}
|
|
</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 di Kabupaten Nganjuk</h1>
|
|
<nav class="breadcrumbs">
|
|
<ol>
|
|
<li><a href="index.html">Beranda</a></li>
|
|
<li class="current">Sebaran TPS</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
</div><!-- End Page Title -->
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<div id="mapTPS"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
const map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap',
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
function pinIcon(color) {
|
|
return L.divIcon({
|
|
className: '',
|
|
html: `
|
|
<svg width="32" height="32" viewBox="0 0 24 24">
|
|
<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 dataTPS = [{
|
|
id: 1,
|
|
nama: "TPS Berbek",
|
|
jenis: "TPS",
|
|
alamat: "Kecamatan Berbek",
|
|
lat: -7.5978,
|
|
lng: 111.917,
|
|
icon: pinIcon('#198754')
|
|
},
|
|
{
|
|
id: 2,
|
|
nama: "TPS 3R Loceret",
|
|
jenis: "TPS 3R",
|
|
alamat: "Kecamatan Loceret",
|
|
lat: -7.6280,
|
|
lng: 111.910,
|
|
icon: pinIcon('#0d6efd')
|
|
},
|
|
{
|
|
id: 3,
|
|
nama: "TPA Nganjuk",
|
|
jenis: "TPA",
|
|
alamat: "Kabupaten Nganjuk",
|
|
lat: -7.6140,
|
|
lng: 111.900,
|
|
icon: pinIcon('#dc3545')
|
|
}
|
|
];
|
|
|
|
dataTPS.forEach(item => {
|
|
L.marker([item.lat, item.lng], {
|
|
icon: item.icon
|
|
})
|
|
.addTo(map)
|
|
.bindPopup(`
|
|
<strong>${item.nama}</strong><br>
|
|
<small>${item.jenis}</small><br>
|
|
<small>${item.alamat}</small><br>
|
|
<a href="/tps/${item.id}" class="popup-btn">
|
|
Lihat Detail
|
|
</a>
|
|
`);
|
|
});
|
|
</script>
|
|
@endsection
|