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

landing page-sebaran tps

This commit is contained in:
rahmagustin 2026-01-21 11:14:10 +07:00
parent 32d581d5a4
commit 1246e673ba
2 changed files with 66 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
resources/views/user/index.blade.php
View File

@ -202,12 +202,14 @@
</section>
<!-- /Services Section -->
<!-- Call To Action Section -->
{{-- Leaflet CSS & JS --}}
<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;
margin: 0 !important;
@ -225,52 +227,92 @@
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
position: relative;
}
#mapTPS {
width: 100%;
height: 450px;
position: relative;
z-index: 1;
}
.leaflet-popup-content-wrapper {
border-radius: 14px !important;
}
/* Legend */
/* =============================
FIX LEAFLET VS NAVBAR
============================= */
header,
.navbar,
#header {
position: sticky;
top: 0;
z-index: 1000;
background: #fff;
}
/* paksa semua control leaflet turun dari navbar */
.leaflet-top {
top: 0px !important;
/* SESUAIKAN TINGGI NAVBAR */
z-index: 400 !important;
}
.leaflet-bottom {
bottom: 0px !important;
}
/* =============================
Legend
============================= */
.legend {
background: white;
padding: 10px;
border-radius: 8px;
padding: 10px 12px;
border-radius: 10px;
line-height: 18px;
color: #333;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
font-size: 14px;
}
.legend i {
width: 18px;
height: 18px;
width: 16px;
height: 16px;
float: left;
margin-right: 8px;
opacity: 0.9;
opacity: 1;
}
</style>
<section id="call-to-action" class="call-to-action section">
<!-- SECTION TITLE -->
<div class="section-title" data-aos="fade-up">
<h2>Peta Sebaran TPS</h2>
<p>Sistem Informasi Geografis Tempat Pembuangan Sampah</p>
</div>
<!-- MAP -->
<div class="container" data-aos="fade-up">
<div class="map-wrapper">
<div id="mapTPS"></div>
</div>
</div>
</section>
<script>
// =============================
// INIT MAP
// =============================
var map = L.map('mapTPS').setView([-7.6078, 111.903], 12);
var map = L.map('mapTPS', {
zoomControl: true
}).setView([-7.6078, 111.903], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: "Leaflet | © OpenStreetMap contributors",
attribution: "© OpenStreetMap contributors",
maxZoom: 19
}).addTo(map);
@ -291,7 +333,7 @@ function markerIcon(color) {
var iconTPS = markerIcon('green'); // TPS
var iconTPS3R = markerIcon('blue'); // TPS 3R
var iconTPA = markerIcon('red'); // TPA
var iconDefault = markerIcon('grey');
var iconDefault = markerIcon('black');
// =============================
// DATA TPS DARI DATABASE
@ -299,17 +341,16 @@ function markerIcon(color) {
var tpsData = @json($lokasiTps);
tpsData.forEach(function(tps) {
if (tps.latitude && tps.longitude) {
let iconKategori = iconDefault;
// SESUAIKAN ID KATEGORI
if (tps.kategori_tps_id == 1) {
if (tps.kategori_tps_id == 3) {
iconKategori = iconTPS;
} else if (tps.kategori_tps_id == 2) {
} else if (tps.kategori_tps_id == 5) {
iconKategori = iconTPS3R;
} else if (tps.kategori_tps_id == 3) {
} else if (tps.kategori_tps_id == 6) {
iconKategori = iconTPA;
}
@ -318,29 +359,29 @@ function markerIcon(color) {
})
.addTo(map)
.bindPopup(`
<div style="min-width:200px">
<strong>${tps.nama_tps}</strong><br>
${tps.alamat_tps ?? ''}<br>
<small>Status: ${tps.status_tps ?? '-'}</small>
</div>
`);
<div style="min-width:200px">
<strong>${tps.nama_tps}</strong><br>
${tps.alamat_tps ?? '-'}<br>
<small>Status: ${tps.status_tps ?? '-'}</small>
</div>
`);
}
});
// =============================
// LEGEND PETA
// LEGEND
// =============================
var legend = L.control({
position: "bottomright"
position: "bottomleft"
});
legend.onAdd = function() {
var div = L.DomUtil.create("div", "legend");
div.innerHTML = `
<strong>Kategori TPS</strong><br>
<i style="background:green"></i> TPS<br>
<i style="background:blue"></i> TPS 3R<br>
<i style="background:red"></i> TPA
<i style="background:#198754"></i> TPS<br>
<i style="background:#0d6efd"></i> TPS 3R<br>
<i style="background:#dc3545"></i> TPA
`;
return div;
};
@ -349,7 +390,6 @@ function markerIcon(color) {
</script>
<!-- Contact Section -->
<section id="contact" class="contact section">

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

@ -127,33 +127,6 @@
</div>
</div>
</div>
<div class="copyright text-center">
<div class="container d-flex flex-column flex-lg-row justify-content-center justify-content-lg-between align-items-center">
<div class="d-flex flex-column align-items-center align-items-lg-start">
<div>
© Copyright <strong><span>MyWebsite</span></strong>. All Rights Reserved
</div>
<div class="credits">
<!-- All the links in the footer should remain intact. -->
<!-- You can delete the links only if you purchased the pro version. -->
<!-- Licensing information: https://bootstrapmade.com/license/ -->
<!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/herobiz-bootstrap-business-template/ -->
Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a> Distributed by <a href="https://themewagon.com">ThemeWagon</a>
</div>
</div>
<div class="social-links order-first order-lg-last mb-3 mb-lg-0">
<a href=""><i class="bi bi-twitter-x"></i></a>
<a href=""><i class="bi bi-facebook"></i></a>
<a href=""><i class="bi bi-instagram"></i></a>
<a href=""><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
</footer>
<!-- Scroll Top -->