TIF_E41211408_DaffaFauziRahman
/
TIF_E41211408
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update Landing

This commit is contained in:
daffarahman11 2025-04-23 22:56:30 +07:00
parent 7811ae4212
commit 145d8ea2a8
5 changed files with 226 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Controllers/LandingController.php
View File

@ -11,7 +11,7 @@ class LandingController extends Controller
{ {
public function index() public function index()
{ {
$klasters = Klaster::all(); $klasters = Klaster::orderBy('id', 'desc')->get();
$updateCuras = Curas::latest('updated_at')->first(); $updateCuras = Curas::latest('updated_at')->first();
$tanggalCuras = $updateCuras->updated_at->translatedFormat('d F Y'); $tanggalCuras = $updateCuras->updated_at->translatedFormat('d F Y');
$updateCuranmor = Curanmor::latest('updated_at')->first(); $updateCuranmor = Curanmor::latest('updated_at')->first();

BIN
public/assets/assetLanding/images/logo-white2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

2
resources/views/Admin/dashboardDetailCuranmor.blade.php
View File

@ -30,7 +30,7 @@
<th>Nama Kecamatan</th> <th>Nama Kecamatan</th>
<th>Tambahan Kasus Curanmor</th> <th>Tambahan Kasus Curanmor</th>
<th>Total Curanmor Per Kecamatan</th> <th>Total Curanmor Per Kecamatan</th>
<th>Hapus Update Kasus</th> <th>Batalkan Update Kasus</th>
</tr> </tr>
</thead> </thead>
<tbody class="ligth-body"> <tbody class="ligth-body">

2
resources/views/Admin/dashboardDetailCuras.blade.php
View File

@ -30,7 +30,7 @@
<th>Nama Kecamatan</th> <th>Nama Kecamatan</th>
<th>Tambahan Kasus Curas</th> <th>Tambahan Kasus Curas</th>
<th>Total Curas Per Kecamatan</th> <th>Total Curas Per Kecamatan</th>
<th>Hapus Update Kasus</th> <th>Batalkan Update Kasus</th>
</tr> </tr>
</thead> </thead>
<tbody class="ligth-body"> <tbody class="ligth-body">

424
resources/views/landing.blade.php
View File

@ -24,87 +24,86 @@
<!-- Responsive CSS --> <!-- Responsive CSS -->
<link rel="stylesheet" href="{{ asset('assets/assetLanding/css/responsive.css') }}" /> <link rel="stylesheet" href="{{ asset('assets/assetLanding/css/responsive.css') }}" />
<style> <style>
#map { #map {
position: relative; /* bukan absolute atau fixed */ position: relative; /* bukan absolute atau fixed */
z-index: 0; /* pastikan ini lebih rendah dari header atau layout */ z-index: 0; /* pastikan ini lebih rendah dari header atau layout */
} }
.progressbar { .progressbar {
text-align: center; text-align: center;
margin: 20px; /* Tambahkan jarak antar progressbar */ margin: 20px; /* Tambahkan jarak antar progressbar */
} }
.circle-outer { .circle-outer {
width: 150px; width: 150px;
height: 150px; height: 150px;
border-radius: 50%; border-radius: 50%;
background-color: #35e1a4; background-color: #35e1a4;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
} }
.circle-inner { .circle-inner {
width: 110px; width: 110px;
height: 110px; height: 110px;
border-radius: 50%; border-radius: 50%;
background-color: #2980b9; background-color: #2980b9;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: white; color: white;
font-size: 32px; font-size: 32px;
font-weight: bold; font-weight: bold;
} }
.iq-progress-bar-text { .iq-progress-bar-text {
margin-top: 15px; margin-top: 15px;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #333; color: #333;
} }
.map-legend { .map-legend {
position: absolute; position: absolute;
background: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.8);
padding: 10px 15px; padding: 10px 15px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2); box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 1000; z-index: 1000;
max-width: 400px; max-width: 400px;
} }
.top-right { .top-right {
top: 20px; top: 20px;
right: 20px; right: 20px;
} }
.top-left { .top-left {
bottom: 20px; bottom: 20px;
left: 20px; left: 20px;
} }
.legend-item { .legend-item {
display: flex; display: flex;
align-items: center; align-items: left;
margin-bottom: 5px;
}
.legend-color { margin-bottom: 5px;
width: 20px; }
height: 20px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #ccc;
}
.legend-label {
font-size: 14px;
color: #333;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #ccc;
}
.legend-label {
font-size: 14px;
color: #333;
}
</style> </style>
</head> </head>
<body> <body>
@ -127,7 +126,7 @@
<!-- menu logo --> <!-- menu logo -->
<ul class="menu-logo"> <ul class="menu-logo">
<li> <li>
<a href="index.html" <a href="/"
><img ><img
src="{{ asset('assets/assetLanding/images/logo.png') }}" src="{{ asset('assets/assetLanding/images/logo.png') }}"
alt="logo" alt="logo"
@ -1235,7 +1234,7 @@ class="img-fluid wow fadeInLeft"
</div> </div>
<div class="media-body ml-3"> <div class="media-body ml-3">
<h5 class="mt-0 mb-2 iq-fw-8"> <h5 class="mt-0 mb-2 iq-fw-8">
<a href="service-detail.html">Curas ( Pencurian Dengan Kekerasan )</a> <a href="">Curas ( Pencurian Dengan Kekerasan )</a>
</h5> </h5>
<p class="mb-0"> <p class="mb-0">
Pencurian dengan Kekerasan atau yang sering disebut Curas, merupakan salah satu tindak pidana pencurian yang dalam prakteknya melakukan kekerasan secara fisik maupun ancaman kepada korbannya. Salah satu contoh Curas yaitu Begal Pencurian dengan Kekerasan atau yang sering disebut Curas, merupakan salah satu tindak pidana pencurian yang dalam prakteknya melakukan kekerasan secara fisik maupun ancaman kepada korbannya. Salah satu contoh Curas yaitu Begal
@ -1250,7 +1249,7 @@ class="img-fluid wow fadeInLeft"
</div> </div>
<div class="media-body ml-3"> <div class="media-body ml-3">
<h5 class="mt-0 mb-2 iq-fw-8"> <h5 class="mt-0 mb-2 iq-fw-8">
<a href="service-detail.html">Curanmor ( Pencurian Kendaraan Bermotor )</a> <a href="">Curanmor ( Pencurian Kendaraan Bermotor )</a>
</h5> </h5>
<p class="mb-0"> <p class="mb-0">
Pencurian Kendaraan Bermotor atau yang sering disebut Curanmor, merupakan salah satu tindak pidana pencurian yang sasaran utamanya yaitu kendaraan bermotor, seperti Motor dan Mobil Pencurian Kendaraan Bermotor atau yang sering disebut Curanmor, merupakan salah satu tindak pidana pencurian yang sasaran utamanya yaitu kendaraan bermotor, seperti Motor dan Mobil
@ -1306,7 +1305,7 @@ class="img-fluid iqwork-right animateme"
<p class="mt-5 text-uppercase text-white iq-fw-3 iq-ls-3"> <p class="mt-5 text-uppercase text-white iq-fw-3 iq-ls-3">
Meet the team Meet the team
</p> </p>
<h2 class="title text-white iq-fw-8">Our Best Team</h2> <h2 class="title text-white iq-fw-8">Our Team Dev</h2>
</div> </div>
</div> </div>
</div> </div>
@ -1324,7 +1323,7 @@ class="img-fluid rounded-circle"
<a class="team-plus" href="#"><i class="fas fa-plus"></i></a> <a class="team-plus" href="#"><i class="fas fa-plus"></i></a>
<div class="team-info"> <div class="team-info">
<h6 class="mb-0 text-white"> <h6 class="mb-0 text-white">
<a href="/">Daffa Fauzi Rahman</a> <a href="">Daffa Fauzi Rahman</a>
</h6> </h6>
<span class="mb-0 text-white text-gray iq-fw-4" <span class="mb-0 text-white text-gray iq-fw-4"
>WEB DEVELOPER</span >WEB DEVELOPER</span
@ -1337,16 +1336,16 @@ class="img-fluid rounded-circle"
</p> </p>
<ul class="list-inline"> <ul class="list-inline">
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#"><i class="fab fa-facebook-f"></i></a> <a href="https://www.facebook.com/share/16Z8J2DEYz/" target="_blank"><i class="fab fa-facebook-f"></i></a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#"><i class="fab fa-twitter"></i></a> <a href="#sectionOurTeam"><i class="fab fa-twitter"></i></a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#"><i class="fab fa-linkedin-in"></i></a> <a target="_blank" href="https://www.linkedin.com/in/daffa-fauzi-rahman?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app"><i class="fab fa-linkedin-in"></i></a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#"><i class="fab fa-instagram"></i></a> <a target="_blank" href="https://www.instagram.com/daff_rahman11?igsh=MWd2dG9jZ2ZpYm9rdQ=="><i class="fab fa-instagram"></i></a>
</li> </li>
</ul> </ul>
</div> </div>
@ -1365,7 +1364,7 @@ class="img-fluid rounded-circle"
<a class="team-plus" href="#"><i class="fas fa-plus"></i></a> <a class="team-plus" href="#"><i class="fas fa-plus"></i></a>
<div class="team-info"> <div class="team-info">
<h6 class="mb-0 text-white"> <h6 class="mb-0 text-white">
<a href="team-detail.html">Bety Etikasari</a> <a href="">Bety Etikasari</a>
</h6> </h6>
<span class="mb-0 text-white text-gray iq-fw-4" <span class="mb-0 text-white text-gray iq-fw-4"
>PEMBIMBING</span >PEMBIMBING</span
@ -1378,16 +1377,16 @@ class="img-fluid rounded-circle"
</p> </p>
<ul class="list-inline"> <ul class="list-inline">
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#sectionOurTeam"><i class="fab fa-facebook-f"></i></a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#"><i class="fab fa-twitter"></i></a> <a href="#sectionOurTeam"><i class="fab fa-twitter"></i></a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#sectionOurTeam"><i class="fab fa-linkedin-in"></i></a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#"><i class="fab fa-instagram"></i></a> <a href="#sectionOurTeam"><i class="fab fa-instagram"></i></a>
</li> </li>
</ul> </ul>
</div> </div>
@ -1406,7 +1405,7 @@ class="img-fluid rounded-circle"
<a class="team-plus" href="#"><i class="fas fa-plus"></i></a> <a class="team-plus" href="#"><i class="fas fa-plus"></i></a>
<div class="team-info"> <div class="team-info">
<h6 class="mb-0 text-white"> <h6 class="mb-0 text-white">
<a href="team-detail.html">Dia Bitari Mei Yuana</a> <a href="">Dia Bitari Mei Yuana</a>
</h6> </h6>
<span class="mb-0 text-white text-gray iq-fw-4" <span class="mb-0 text-white text-gray iq-fw-4"
>KETUA PENGUJI</span >KETUA PENGUJI</span
@ -1419,16 +1418,16 @@ class="img-fluid rounded-circle"
</p> </p>
<ul class="list-inline"> <ul class="list-inline">
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#sectionOurTeam"><i class="fab fa-facebook-f"></i></a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#"><i class="fab fa-twitter"></i></a> <a href="#sectionOurTeam"><i class="fab fa-twitter"></i></a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#"><i class="fab fa-linkedin-in"></i></a> <a href="#sectionOurTeam"><i class="fab fa-linkedin-in"></i></a>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<a href="#"><i class="fab fa-instagram"></i></a> <a href="#sectionOurTeam"><i class="fab fa-instagram"></i></a>
</li> </li>
</ul> </ul>
</div> </div>
@ -1497,7 +1496,7 @@ class="tab-pane show active"
@foreach ($klasters as $klaster) @foreach ($klasters as $klaster)
<div class="legend-item"> <div class="legend-item">
<span class="legend-color" style="background-color: {{ $klaster->warna }};"></span> <span class="legend-color" style="background-color: {{ $klaster->warna }};"></span>
<span class="legend-label">{{ $klaster->nama_klaster }}</span> <span class="legend-label">Daerah {{ $klaster->nama_klaster }}</span>
</div> </div>
@endforeach @endforeach
</div> </div>
@ -1507,12 +1506,13 @@ class="tab-pane show active"
<div class="legend-item"> <div class="legend-item">
<span class="legend-label">Menggunakan Data POLRES Kab. Probolinggo</span> <span class="legend-label">Menggunakan Data POLRES Kab. Probolinggo</span>
</div> </div>
<div class="legend-item"> <div class="legend-item" id="update-curas">
<span class="legend-label">Upadate terakhir data Curas : {{ $tanggalCuras }}</span> <span class="legend-label">Update Terakhir Data Curas : {{ $tanggalCuras }}</span>
</div> </div>
<div class="legend-item"> <div class="legend-item" id="update-curanmor" style="display: none;">
<span class="legend-label">Upadate terakhir data Curanmor : {{ $tanggalCuranmor }}</span> <span class="legend-label">Update Terakhir Data Curanmor : {{ $tanggalCuranmor }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -1529,8 +1529,8 @@ class="tab-pane show active"
</section> </section>
<!-- Pricing END --> <!-- Pricing END -->
<!-- Our Blog --> <!-- BERITA -->
<section class="iq-blogs position-relative pb-xl-0 iq-rmt-40"> {{-- <section class="iq-blogs position-relative pb-xl-0 iq-rmt-40">
<div class="container"> <div class="container">
<div class="col-sm-12 text-center"> <div class="col-sm-12 text-center">
<div class="section-title"> <div class="section-title">
@ -1566,10 +1566,10 @@ class="img-fluid"
<div class="blog-detail"> <div class="blog-detail">
<a <a
class="main-color iq-fw-8" class="main-color iq-fw-8"
href="blog-details-left-sidebar.html" href=""
>Kasus Curas</a >Kasus Curas</a
> >
<a href="blog-details-left-sidebar.html"> <a href="">
<h5 class="mt-1 iq-fw-8">Pegawai Garmen Terbegal Saat Pulang di Maron</h5> <h5 class="mt-1 iq-fw-8">Pegawai Garmen Terbegal Saat Pulang di Maron</h5>
</a> </a>
<p class="mb-0"> <p class="mb-0">
@ -1601,10 +1601,10 @@ class="img-fluid"
<div class="blog-detail"> <div class="blog-detail">
<a <a
class="main-color iq-fw-8" class="main-color iq-fw-8"
href="blog-details-left-sidebar.html" href=""
>Kasus Curas</a >Kasus Curas</a
> >
<a href="blog-details-left-sidebar.html"> <a href="">
<h5 class="mt-1 iq-fw-8">Pegawai Garmen Terbegal Saat Pulang di Maron</h5> <h5 class="mt-1 iq-fw-8">Pegawai Garmen Terbegal Saat Pulang di Maron</h5>
</a> </a>
<p class="mb-0"> <p class="mb-0">
@ -1636,10 +1636,10 @@ class="img-fluid"
<div class="blog-detail"> <div class="blog-detail">
<a <a
class="main-color iq-fw-8" class="main-color iq-fw-8"
href="blog-details-left-sidebar.html" href=""
>Kasus Curas</a >Kasus Curas</a
> >
<a href="blog-details-left-sidebar.html"> <a href="">
<h5 class="mt-1 iq-fw-8">Pegawai Garmen Terbegal Saat Pulang di Maron</h5> <h5 class="mt-1 iq-fw-8">Pegawai Garmen Terbegal Saat Pulang di Maron</h5>
</a> </a>
<p class="mb-0"> <p class="mb-0">
@ -1671,10 +1671,10 @@ class="img-fluid"
<div class="blog-detail"> <div class="blog-detail">
<a <a
class="main-color iq-fw-8" class="main-color iq-fw-8"
href="blog-details-left-sidebar.html" href=""
>Kasus Curas</a >Kasus Curas</a
> >
<a href="blog-details-left-sidebar.html"> <a href="">
<h5 class="mt-1 iq-fw-8">Pegawai Garmen Terbegal Saat Pulang di Maron</h5> <h5 class="mt-1 iq-fw-8">Pegawai Garmen Terbegal Saat Pulang di Maron</h5>
</a> </a>
<p class="mb-0"> <p class="mb-0">
@ -1706,10 +1706,10 @@ class="img-fluid"
<div class="blog-detail"> <div class="blog-detail">
<a <a
class="main-color iq-fw-8" class="main-color iq-fw-8"
href="blog-details-left-sidebar.html" href=""
>Kasus Curas</a >Kasus Curas</a
> >
<a href="blog-details-left-sidebar.html"> <a href="">
<h5 class="mt-1 iq-fw-8">Pegawai Garmen Terbegal Saat Pulang di Maron</h5> <h5 class="mt-1 iq-fw-8">Pegawai Garmen Terbegal Saat Pulang di Maron</h5>
</a> </a>
<p class="mb-0"> <p class="mb-0">
@ -1733,8 +1733,8 @@ class="img-fluid rounded-circle mr-3 user-img"
</div> </div>
</div> </div>
</div> </div>
</section> </section> --}}
<!-- Our Blog END --> <!-- BERITA END -->
</div> </div>
<footer class="footer-two"> <footer class="footer-two">
<img src="{{ asset('assets/assetLanding/images/footer/1.jpg') }}" class="img-fluid footer-one" alt="image" /> <img src="{{ asset('assets/assetLanding/images/footer/1.jpg') }}" class="img-fluid footer-one" alt="image" />
@ -1743,22 +1743,24 @@ class="img-fluid rounded-circle mr-3 user-img"
<div class="row no-gutters"> <div class="row no-gutters">
<div class="col-lg-4 col-md-5"> <div class="col-lg-4 col-md-5">
<div class="iq-footer-logo"> <div class="iq-footer-logo">
<a href="index.html" <a href="/"
><img >
src="{{ asset('assets/assetLanding/images/logo-white.png') }}" <img
class="img-fluid mb-4" src="{{ asset('assets/assetLanding/images/logo.png') }}"
class="img-fluid mb-2"
alt="image" alt="image"
/></a>
<p class="footer-info text-white"> />
Contrary to popular belief, Lorem Ipsum is not simply random </a>
text. <p class="footer-info text-white mt-0">
Cek Tingkat Curas dan Curanmor di daerahmu
</p> </p>
<a class="slide-button button" href="contact-us.html"> <a class="slide-button button" href="">
<div class="first"> <div class="first">
contact us <i class="fas fa-angle-right"></i> Hubungi Kami<i class="fas fa-angle-right"></i>
</div> </div>
<div class="second"> <div class="second">
contact us <i class="fas fa-angle-right"></i> Hubungi Kami<i class="fas fa-angle-right"></i>
</div> </div>
</a> </a>
</div> </div>
@ -1790,7 +1792,7 @@ class="form-control position-relative subscription-email"
> >
</li> </li>
<li> <li>
<a href="#" class="text-uppercase" <a href="https://www.linkedin.com/in/daffa-fauzi-rahman?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app" target="blank" class="text-uppercase"
><i class="fab fa-linkedin iq-fw-6 pr-3"></i>linkedin</a ><i class="fab fa-linkedin iq-fw-6 pr-3"></i>linkedin</a
> >
</li> </li>
@ -1799,7 +1801,7 @@ class="form-control position-relative subscription-email"
</div> </div>
<div class="col-lg-3 col-md-12"> <div class="col-lg-3 col-md-12">
<div class="footer-link"> <div class="footer-link">
<h5 class="text-white">Navigation.</h5> <h5 class="text-white">Navigasi </h5>
<ul class="list-inline"> <ul class="list-inline">
<li class="list-item"> <li class="list-item">
<a href="#home">Home</a> <a href="#home">Home</a>
@ -1815,7 +1817,7 @@ class="form-control position-relative subscription-email"
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<div class="footer-copyright text-center iq-fw-3"> <div class="footer-copyright text-center iq-fw-3">
Develop By : Daffa Rahman | Designed By : Markethon Develop By : <a target="blank" href="https://www.linkedin.com/in/daffa-fauzi-rahman?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app">Daffa Rahman</a> | Designed By : <a target="blank" href="https://markethon.co/" >Markethon</a>
</div> </div>
</div> </div>
</div> </div>
@ -1915,7 +1917,7 @@ function animatePercentage(id, end, duration) {
const target = parseInt(circle.getAttribute('data-percent')); const target = parseInt(circle.getAttribute('data-percent'));
animatePercentage(`percentage${index + 1}`, target, 5000); animatePercentage(`percentage${index + 1}`, target, 5000);
}); });
</script> </script>
@ -1973,100 +1975,120 @@ function animatePercentage(id, end, duration) {
}); /*ready*/ }); /*ready*/
</script> </script>
<script> <script>
let map; let map;
let geoLayer; let geoLayer;
let curasData = {}; let curasData = {};
let apiUrl = "{{ url('/api/map/curas') }}"; // default let apiUrl = "{{ url('/api/map/curas') }}"; // default
function fetchAndLoadMap(url, titleText) { function fetchAndLoadMap(url, titleText) {
fetch(url) fetch(url)
.then(res => res.json()) .then(res => res.json())
.then(data => { .then(data => {
// reset data // reset data
curasData = {}; curasData = {};
data.forEach(item => { data.forEach(item => {
curasData[item.kecamatan.toLowerCase().trim()] = item; curasData[item.kecamatan.toLowerCase().trim()] = item;
});
// hapus layer lama
if (geoLayer) {
geoLayer.remove();
}
// buat layer baru
geoLayer = new L.GeoJSON.AJAX(["{{ asset('assets/map/gisProbolinggo.geojson') }}"], {
style: styleFeature,
onEachFeature: popUp
});
geoLayer.addTo(map);
// ubah judul jika ada
const mapTitle = document.querySelector('.card-title');
if (mapTitle) mapTitle.textContent = titleText;
}); });
// hapus layer lama
if (geoLayer) {
geoLayer.remove();
}
// buat layer baru
geoLayer = new L.GeoJSON.AJAX(["{{ asset('assets/map/gisProbolinggo.geojson') }}"], {
style: styleFeature,
onEachFeature: popUp
});
geoLayer.addTo(map);
// ubah judul jika ada
const mapTitle = document.querySelector('.card-title');
if (mapTitle) mapTitle.textContent = titleText;
});
}
function getColor(warna) {
return warna || '#cccccc';
}
function styleFeature(feature) {
let namaKecamatan = feature.properties.WADMKC.toLowerCase().trim();
let data = curasData[namaKecamatan];
return {
fillColor: data ? getColor(data.warna) : '#cccccc',
weight: 1,
opacity: 1,
color: 'white',
fillOpacity: 0.7
};
}
function popUp(feature, layer) {
let namaKecamatan = feature.properties.WADMKC.toLowerCase().trim();
let data = curasData[namaKecamatan];
let content = `<strong>Kecamatan ${feature.properties.WADMKC}</strong><br/><br/>`;
if (data) {
if ('jumlah_curas' in data) {
content += `Jumlah Curas : ${data.jumlah_curas}<br/>Kategori : ${data.klaster}`;
} else if ('jumlah_curanmor' in data) {
content += `Jumlah Curanmor : ${data.jumlah_curanmor}<br/>Kategori : ${data.klaster}`;
}
} else {
content += `Data tidak tersedia`;
} }
layer.bindPopup(content); function getColor(warna) {
} return warna || '#cccccc';
}
function loadInitialMap() { function styleFeature(feature) {
map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10); let namaKecamatan = feature.properties.WADMKC.toLowerCase().trim();
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { let data = curasData[namaKecamatan];
maxZoom: 19, return {
attribution: '&copy; OpenStreetMap' fillColor: data ? getColor(data.warna) : '#cccccc',
}).addTo(map); weight: 1,
opacity: 1,
color: 'white',
fillOpacity: 0.7
};
}
// Load default function popUp(feature, layer) {
fetchAndLoadMap(apiUrl, 'Pemetaan Curas Kab Probolinggo'); let namaKecamatan = feature.properties.WADMKC.toLowerCase().trim();
} let data = curasData[namaKecamatan];
document.addEventListener('DOMContentLoaded', () => { let content = `<strong>Kecamatan ${feature.properties.WADMKC}</strong><br/><br/>`;
loadInitialMap(); if (data) {
if ('jumlah_curas' in data) {
content += `Jumlah Curas : ${data.jumlah_curas}<br/>Kategori : ${data.klaster}`;
} else if ('jumlah_curanmor' in data) {
content += `Jumlah Curanmor : ${data.jumlah_curanmor}<br/>Kategori : ${data.klaster}`;
}
} else {
content += `Data tidak tersedia`;
}
layer.bindPopup(content);
}
function loadInitialMap() {
map = L.map('map').setView([-7.843271790154591, 113.2990930356143], 10);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; OpenStreetMap'
}).addTo(map);
// Load default
fetchAndLoadMap(apiUrl, 'Pemetaan Curas Kab Probolinggo');
}
document.addEventListener('DOMContentLoaded', () => {
loadInitialMap();
document.getElementById('btn-curas').addEventListener('click', (e) => {
e.preventDefault();
fetchAndLoadMap("{{ url('/api/map/curas') }}", "Pemetaan Curas Kab Probolinggo");
});
document.getElementById('btn-curanmor').addEventListener('click', (e) => {
e.preventDefault();
fetchAndLoadMap("{{ url('/api/map/curanmor') }}", "Pemetaan Curanmor Kab Probolinggo");
});
});
</script>
<script>
document.getElementById('btn-curas').addEventListener('click', (e) => { document.getElementById('btn-curas').addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
fetchAndLoadMap("{{ url('/api/map/curas') }}", "Pemetaan Curas Kab Probolinggo"); fetchAndLoadMap("{{ url('/api/map/curas') }}", "Pemetaan Curas Kab Probolinggo");
// Tampilkan info update curas, sembunyikan curanmor
document.getElementById('update-curas').style.display = 'block';
document.getElementById('update-curanmor').style.display = 'none';
}); });
document.getElementById('btn-curanmor').addEventListener('click', (e) => { document.getElementById('btn-curanmor').addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
fetchAndLoadMap("{{ url('/api/map/curanmor') }}", "Pemetaan Curanmor Kab Probolinggo"); fetchAndLoadMap("{{ url('/api/map/curanmor') }}", "Pemetaan Curanmor Kab Probolinggo");
// Tampilkan info update curanmor, sembunyikan curas
document.getElementById('update-curas').style.display = 'none';
document.getElementById('update-curanmor').style.display = 'block';
}); });
}); </script>
</script>
</body> </body>