detail tps
This commit is contained in:
parent
496b186956
commit
b6a88fd2f8
|
|
@ -4,11 +4,68 @@
|
|||
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class SigController extends Controller
|
||||
class SIGController extends Controller
|
||||
{
|
||||
public function index()
|
||||
{
|
||||
$title = 'User SIG';
|
||||
return view('user.sig-tps', compact('title'));
|
||||
$tps = [
|
||||
[
|
||||
'id' => 1,
|
||||
'nama' => 'TPS Berbek',
|
||||
'jenis' => 'TPS',
|
||||
'alamat' => 'Kecamatan Berbek',
|
||||
'lat' => -7.5978,
|
||||
'lng' => 111.917
|
||||
],
|
||||
[
|
||||
'id' => 2,
|
||||
'nama' => 'TPS 3R Loceret',
|
||||
'jenis' => 'TPS 3R',
|
||||
'alamat' => 'Kecamatan Loceret',
|
||||
'lat' => -7.6280,
|
||||
'lng' => 111.910
|
||||
],
|
||||
[
|
||||
'id' => 3,
|
||||
'nama' => 'TPA Nganjuk',
|
||||
'jenis' => 'TPA',
|
||||
'alamat' => 'Kabupaten Nganjuk',
|
||||
'lat' => -7.6140,
|
||||
'lng' => 111.900
|
||||
]
|
||||
];
|
||||
|
||||
return view('user.sig-tps', compact('tps'));
|
||||
}
|
||||
|
||||
public function show($id)
|
||||
{
|
||||
$data = [
|
||||
1 => [
|
||||
'nama' => 'TPS Berbek',
|
||||
'jenis' => 'TPS',
|
||||
'alamat' => 'Kecamatan Berbek',
|
||||
'foto' => '/img/tps/berbek.jpg',
|
||||
'keterangan' => 'TPS aktif melayani wilayah Berbek'
|
||||
],
|
||||
2 => [
|
||||
'nama' => 'TPS 3R Loceret',
|
||||
'jenis' => 'TPS 3R',
|
||||
'alamat' => 'Kecamatan Loceret',
|
||||
'foto' => '/img/tps/loceret.jpg',
|
||||
'keterangan' => 'TPS dengan sistem 3R'
|
||||
],
|
||||
3 => [
|
||||
'nama' => 'TPA Nganjuk',
|
||||
'jenis' => 'TPA',
|
||||
'alamat' => 'Kabupaten Nganjuk',
|
||||
'foto' => '/img/tps/tpa-nganjuk.jpg',
|
||||
'keterangan' => 'Tempat Pemrosesan Akhir Kabupaten Nganjuk'
|
||||
]
|
||||
];
|
||||
|
||||
return view('user.detail-tps', [
|
||||
'tps' => $data[$id]
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
@extends('user.template')
|
||||
|
||||
@section('content')
|
||||
<!-- 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">Detail TPS</h1>
|
||||
<nav class="breadcrumbs">
|
||||
<ol>
|
||||
<li><a href="index.html">Beranda</a></li>
|
||||
<li class="current">Sebaran TPS</li>
|
||||
<li class="current">Detail TPS</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</div><!-- End Page Title -->
|
||||
|
||||
<section id="about" class="about section" style="padding-top: 0;">
|
||||
<div class="container" data-aos="fade-up">
|
||||
|
||||
<div class="row g-4 g-lg-5" data-aos="fade-up" data-aos-delay="200">
|
||||
|
||||
<div class="col-lg-5">
|
||||
<div class="about-img">
|
||||
<img src="{{ asset('assets/user/img/about-portrait.jpg') }}" class="img-fluid" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-7">
|
||||
<h3 class="pt-0 pt-lg-5">Sistem Informasi Geografis Tempat Pembuangan Sampah di Kabupaten Nganjuk</h3>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content">
|
||||
|
||||
<div class="tab-pane fade show active" id="about-tab1">
|
||||
|
||||
<p class="fst-italic">Sistem Informasi Geografis yang menampilkan visualisasi lokasi Tempat
|
||||
Pembuangan Sampah di Kabupaten Nganjuk secara mudah, cepat, dan interaktif.</p>
|
||||
|
||||
<div class="d-flex align-items-center mt-4">
|
||||
<i class="bi bi-check2"></i>
|
||||
<h4>Peta Interaktif Lokasi TPS</h4>
|
||||
</div>
|
||||
<p>Peta digital yang memudahkan pengguna menemukan lokasi TPS terdekat, lengkap dengan tampilan
|
||||
yang intuitif sehingga informasi dapat diakses dengan cepat dan jelas.</p>
|
||||
|
||||
<div class="d-flex align-items-center mt-4">
|
||||
<i class="bi bi-check2"></i>
|
||||
<h4>Informasi TPS Lengkap</h4>
|
||||
</div>
|
||||
<p>Menyajikan berbagai informasi penting seperti kapasitas, kondisi, status, hingga jenis
|
||||
pengelolaan TPS, sehingga pengguna dapat memahami keadaan TPS secara menyeluruh.</p>
|
||||
|
||||
<div class="d-flex align-items-center mt-4">
|
||||
<i class="bi bi-check2"></i>
|
||||
<h4>Layanan Aduan TPS</h4>
|
||||
</div>
|
||||
<p>Fitur yang memungkinkan masyarakat menyampaikan keluhan atau laporan terkait TPS dengan
|
||||
mudah, membantu pemerintah dalam memperbaiki serta meningkatkan pengelolaan sampah.</p>
|
||||
|
||||
</div><!-- End Tab 1 Content -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@endsection
|
||||
|
|
@ -1,121 +1,69 @@
|
|||
@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>
|
||||
|
||||
<!-- ================= 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>
|
||||
#mapTPS {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
<style>
|
||||
/* ================= MAP SECTION ================= */
|
||||
#call-to-action.call-to-action {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
/* JARAK KE FOOTER */
|
||||
#call-to-action.call-to-action.section {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 90px;
|
||||
}
|
||||
.popup-btn {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
padding: 6px 12px;
|
||||
background: #198754;
|
||||
color: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.map-wrapper {
|
||||
max-width: 1100px;
|
||||
width: 100%;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 6px 18px rgba(0,0,0,.15);
|
||||
}
|
||||
.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 -->
|
||||
|
||||
#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">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div id="mapTPS"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
/* ================= INIT MAP ================= */
|
||||
const map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
|
||||
<script>
|
||||
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);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap',
|
||||
maxZoom: 19
|
||||
}).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">
|
||||
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
|
||||
|
|
@ -124,89 +72,54 @@ className: '',
|
|||
<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
|
||||
iconSize: [32, 32],
|
||||
iconAnchor: [16, 32],
|
||||
popupAnchor: [0, -28]
|
||||
});
|
||||
}
|
||||
];
|
||||
|
||||
/* ================= MARKER ================= */
|
||||
dataTPS.forEach(item => {
|
||||
L.marker([item.lat, item.lng], { icon: item.icon })
|
||||
.addTo(map)
|
||||
.bindPopup(`
|
||||
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>
|
||||
<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>
|
||||
<small>${item.jenis}</small><br>
|
||||
<small>${item.alamat}</small><br>
|
||||
<a href="/tps/${item.id}" class="popup-btn">
|
||||
Lihat Detail
|
||||
</a>
|
||||
`);
|
||||
});
|
||||
|
||||
/* ================= 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>
|
||||
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
|
|
|||
|
|
@ -8,7 +8,11 @@
|
|||
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('/sig-tps', [SIGController::class, 'index'])
|
||||
->name('user.sig-tps');
|
||||
|
||||
Route::get('/tps/{id}', [SIGController::class, 'show'])
|
||||
->name('user.detail-tps');
|
||||
|
||||
Route::get('/', function () {
|
||||
return view('welcome');
|
||||
|
|
|
|||
Loading…
Reference in New Issue