detail tps
This commit is contained in:
parent
496b186956
commit
b6a88fd2f8
|
|
@ -4,11 +4,68 @@
|
||||||
|
|
||||||
use Illuminate\Http\Request;
|
use Illuminate\Http\Request;
|
||||||
|
|
||||||
class SigController extends Controller
|
class SIGController extends Controller
|
||||||
{
|
{
|
||||||
public function index()
|
public function index()
|
||||||
{
|
{
|
||||||
$title = 'User SIG';
|
$tps = [
|
||||||
return view('user.sig-tps', compact('title'));
|
[
|
||||||
|
'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')
|
@extends('user.template')
|
||||||
|
|
||||||
@section('content')
|
@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 ================= -->
|
<style>
|
||||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
|
#mapTPS {
|
||||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
width: 100%;
|
||||||
|
height: 450px;
|
||||||
|
border-radius: 14px;
|
||||||
|
box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
|
||||||
|
}
|
||||||
|
|
||||||
<style>
|
.leaflet-popup-content-wrapper {
|
||||||
/* ================= MAP SECTION ================= */
|
border-radius: 12px;
|
||||||
#call-to-action.call-to-action {
|
}
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* JARAK KE FOOTER */
|
.popup-btn {
|
||||||
#call-to-action.call-to-action.section {
|
display: inline-block;
|
||||||
margin-top: 40px;
|
margin-top: 8px;
|
||||||
margin-bottom: 90px;
|
padding: 6px 12px;
|
||||||
}
|
background: #198754;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
.map-wrapper {
|
.popup-btn:hover {
|
||||||
max-width: 1100px;
|
background: #157347;
|
||||||
width: 100%;
|
color: #fff;
|
||||||
border-radius: 14px;
|
}
|
||||||
overflow: hidden;
|
</style>
|
||||||
box-shadow: 0 6px 18px rgba(0,0,0,.15);
|
<!-- 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 {
|
<section class="section">
|
||||||
width: 100%;
|
<div class="container">
|
||||||
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 id="mapTPS"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/* ================= INIT MAP ================= */
|
const map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
|
||||||
const map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
|
|
||||||
|
|
||||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
maxZoom: 19,
|
attribution: '© OpenStreetMap',
|
||||||
attribution: "© OpenStreetMap"
|
maxZoom: 19
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
/* ================= PIN MODERN (AMAN) ================= */
|
function pinIcon(color) {
|
||||||
function pinIcon(color) {
|
return L.divIcon({
|
||||||
return L.divIcon({
|
className: '',
|
||||||
className: '',
|
html: `
|
||||||
html: `
|
<svg width="32" height="32" viewBox="0 0 24 24">
|
||||||
<svg width="32" height="32" viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill="${color}"
|
<path fill="${color}"
|
||||||
d="M12 2C8.13 2 5 5.13 5 9
|
d="M12 2C8.13 2 5 5.13 5 9
|
||||||
c0 5.25 7 13 7 13
|
c0 5.25 7 13 7 13
|
||||||
|
|
@ -124,89 +72,54 @@ className: '',
|
||||||
<circle cx="12" cy="9" r="2.5" fill="white"/>
|
<circle cx="12" cy="9" r="2.5" fill="white"/>
|
||||||
</svg>
|
</svg>
|
||||||
`,
|
`,
|
||||||
iconSize: [32, 32],
|
iconSize: [32, 32],
|
||||||
iconAnchor: [16, 32],
|
iconAnchor: [16, 32],
|
||||||
popupAnchor: [0, -28]
|
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 ================= */
|
const dataTPS = [{
|
||||||
dataTPS.forEach(item => {
|
id: 1,
|
||||||
L.marker([item.lat, item.lng], { icon: item.icon })
|
nama: "TPS Berbek",
|
||||||
.addTo(map)
|
jenis: "TPS",
|
||||||
.bindPopup(`
|
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>
|
<strong>${item.nama}</strong><br>
|
||||||
<b>Jenis:</b> ${item.jenis}<br>
|
<small>${item.jenis}</small><br>
|
||||||
<b>Alamat:</b> ${item.alamat}<br>
|
<small>${item.alamat}</small><br>
|
||||||
<button style="
|
<a href="/tps/${item.id}" class="popup-btn">
|
||||||
margin-top:6px;
|
Lihat Detail
|
||||||
padding:6px 12px;
|
</a>
|
||||||
background:#198754;
|
|
||||||
border:none;
|
|
||||||
color:#fff;
|
|
||||||
border-radius:6px;
|
|
||||||
font-size:13px;
|
|
||||||
cursor:pointer;
|
|
||||||
">Lihat Detail</button>
|
|
||||||
`);
|
`);
|
||||||
});
|
});
|
||||||
|
</script>
|
||||||
/* ================= 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
|
@endsection
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,11 @@
|
||||||
Route::get('/index', [IndexController::class, 'index'])->name('user.index');
|
Route::get('/index', [IndexController::class, 'index'])->name('user.index');
|
||||||
Route::get('/about', [AboutController::class, 'index'])->name('user.about');
|
Route::get('/about', [AboutController::class, 'index'])->name('user.about');
|
||||||
Route::get('/about-tps', [AboutController::class, 'tps'])->name('user.about-tps');
|
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 () {
|
Route::get('/', function () {
|
||||||
return view('welcome');
|
return view('welcome');
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue