e41220949
/
TIF_NGANJUK_E41220949
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sebaran tps

This commit is contained in:
rahmagustin 2025-12-22 22:07:44 +07:00
parent 43ddde3e83
commit 496b186956
4 changed files with 222 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/Http/Controllers/SigController.php Normal file
View File

@ -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'));
}
}

205
resources/views/user/sig-tps.blade.php
View File

@ -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

2
resources/views/user/template.blade.php
View File

@ -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>

2
routes/web.php
View File

@ -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');