772 lines
45 KiB
Plaintext
772 lines
45 KiB
Plaintext
@{
|
|
ViewData["Title"] = "BPS-RW Jakarta";
|
|
}
|
|
|
|
<!-- Hero Section -->
|
|
<section class="w-full h-[calc(100vh-5rem)] relative overflow-hidden">
|
|
<!-- Container -->
|
|
<div id="heroSlider" class="relative w-full h-full">
|
|
<!-- Content -->
|
|
<div class="hero-slide active absolute inset-0 w-full h-full transition-opacity duration-500">
|
|
<img src="/images/hero-bg.png" class="w-full h-full object-cover object-[75%_center] lg:object-center"
|
|
alt="Hero Background 1" />
|
|
<div class="absolute inset-0 flex items-center">
|
|
<div class="w-full mx-auto px-4 lg:px-28 xl:px-48">
|
|
<div class="w-full lg:w-1/2">
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4 lg:mb-6">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-base font-semibold font-jakarta">BPS-RW
|
|
Jakarta</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Title and Description -->
|
|
<h1 class="text-white text-4xl lg:text-6xl font-bold font-jakarta leading-tight mb-4 lg:mb-6">
|
|
Pengelolaan Sampah<br />Lingkup Rukun Warga
|
|
</h1>
|
|
<p
|
|
class="text-white/90 text-base lg:text-lg font-normal font-jakarta leading-relaxed mb-6 lg:mb-8">
|
|
Program dari Dinas Lingkungan Hidup Provinsi Jakarta yang bertujuan untuk mengoptimalkan
|
|
pengelolaan sampah berbasis komunitas di tingkat RW.
|
|
</p>
|
|
|
|
<!-- CTA Buttons -->
|
|
<div class="flex flex-col sm:flex-row gap-3 lg:gap-4 items-start">
|
|
<a href="#tentang"
|
|
class="inline-flex px-6 lg:px-8 py-2.5 lg:py-3 bg-white hover:bg-gray-100 rounded-full items-center justify-center gap-2 transition-all w-auto">
|
|
<span
|
|
class="text-primary-700 text-base lg:text-base font-semibold font-jakarta whitespace-nowrap">Pelajari
|
|
Selengkapnya</span>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M5 15L15 5" stroke="#1E602A" stroke-width="2" stroke-linecap="round"
|
|
stroke-linejoin="round" />
|
|
<path d="M6.875 5H15V13.125" stroke="#1E602A" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</a>
|
|
<a href="#kontak"
|
|
class="inline-flex px-6 lg:px-8 py-2.5 lg:py-3 bg- rounded-full border-2 border-white hover:bg-white/10 items-center justify-center transition-all w-auto">
|
|
<span class="text-white text-sm lg:text-base font-semibold font-jakarta whitespace-nowrap">Hubungi
|
|
Kami</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side icons (hidden on mobile) -->
|
|
<div
|
|
class="absolute right-8 lg:right-16 xl:right-24 top-1/2 transform -translate-y-1/2 z-20 hidden lg:flex flex-col gap-3">
|
|
<button
|
|
class="w-12 h-12 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center transition-all border border-white/30">
|
|
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
class="w-12 h-12 bg-white hover:bg-gray-100 rounded-full flex items-center justify-center transition-all shadow-lg">
|
|
<svg class="w-6 h-6 text-primary-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About BPS-RW Section -->
|
|
<section id="tentang" class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-white">
|
|
<div class="w-full mx-auto">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
|
|
<!-- Image Section -->
|
|
<div class="order-2 lg:order-1">
|
|
<div class="relative w-full h-[400px] lg:h-[500px]">
|
|
<img class="w-full h-full object-cover rounded-2xl shadow-lg" src="/images/about.png"
|
|
alt="Tentang BPS-RW" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Section -->
|
|
<div class="order-1 lg:order-2">
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-base font-semibold font-jakarta">Tentang Kami</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta mb-6">Tentang BPS-RW</h2>
|
|
<p class="text-slate-600 text-lg font-normal font-jakarta leading-relaxed"></p>
|
|
BPS-RW (Bidang Pengelolaan Sampah Lingkup Rukun Warga) adalah Program dari Dinas Lingkungan Hidup
|
|
Provinsi DKI Jakarta yang bertujuan untuk me pengelolaan sampah berbasis komunitas di tingkat RW.
|
|
Program ini hadir untuk meningkatkan kesadaran masyarakat dalam memilah, mengelola, serta mendaur ulang
|
|
sampah guna menciptakan lingkungan yang lebih bersih dan sehat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Statistics Section -->
|
|
<section class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 relative bg-green-950 overflow-hidden">
|
|
<!-- Background overlay -->
|
|
<div class="absolute inset-0 overflow-hidden">
|
|
<img src="/images/leaf.svg" class="w-full h-full object-cover opacity-20" alt="Background Pattern"
|
|
style="mix-blend-mode: overlay;" />
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="w-full mx-auto relative z-10">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
|
|
<!-- Left Content -->
|
|
<div>
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-base font-semibold font-jakarta">Statistik</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-white text-3xl lg:text-5xl font-bold font-jakarta mb-6">
|
|
Jumlah Rumah Memilah
|
|
</h2>
|
|
<p class="text-white/90 text-base lg:text-lg font-normal font-jakarta leading-relaxed">
|
|
Rumah Memilah adalah program dari BPSRW DKI Jakarta yang mendorong partisipasi aktif warga dalam
|
|
memilah sampah rumah tangga menjadi beberapa kategori.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Statistics Grid -->
|
|
<div class="grid grid-cols-2 gap-8">
|
|
<!-- Stat 1 -->
|
|
<div class="pl-3 lg:pl-6 border-l-4 border-white">
|
|
<div class="text-white text-3xl lg:text-5xl font-bold font-jakarta mb-2">1.522.356</div>
|
|
<div class="text-white/80 text-sm lg:text-lg font-normal font-jakarta">Jumlah Rumah</div>
|
|
</div>
|
|
|
|
<!-- Stat 2 -->
|
|
<div class="pl-3 lg:pl-6 border-l-4 border-white">
|
|
<div class="text-white text-3xl lg:text-5xl font-bold font-jakarta mb-2">2.755</div>
|
|
<div class="text-white/80 text-sm lg:text-lg font-normal font-jakarta">Jumlah RW</div>
|
|
</div>
|
|
|
|
<!-- Stat 3 -->
|
|
<div class="pl-3 lg:pl-6 border-l-4 border-white">
|
|
<div class="text-white text-3xl lg:text-5xl font-bold font-jakarta mb-2">203.511</div>
|
|
<div class="text-white/80 text-sm lg:text-lg font-normal font-jakarta">Rumah Memilah</div>
|
|
</div>
|
|
|
|
<!-- Stat 4 -->
|
|
<div class="pl-3 lg:pl-6 border-l-4 border-white">
|
|
<div class="text-white text-3xl lg:text-5xl font-bold font-jakarta mb-2">126.023</div>
|
|
<div class="text-white/80 text-sm lg:text-lg font-normal font-jakarta">Jumlah Nasabah</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- What is Rumah Memilah Section -->
|
|
<section class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-white">
|
|
<div class="w-full mx-auto">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-center">
|
|
<!-- Image Section -->
|
|
<div class="order-2 lg:order-1">
|
|
<div class="relative w-full h-[400px] lg:h-[500px]">
|
|
<img class="w-full h-full object-cover rounded-2xl shadow-lg" src="/images/hero-choosen.png"
|
|
alt="Rumah Memilah" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Section -->
|
|
<div class="order-1 lg:order-2">
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-base font-semibold font-jakarta">Rumah Memilah</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta mb-6">Apa Itu Rumah Memilah</h2>
|
|
<div class="text-slate-600 text-lg font-normal font-jakarta leading-relaxed space-y-4">
|
|
<p>
|
|
Rumah Memilah adalah program dari BPS RW DKI Jakarta yang mendorong partisipasi aktif warga
|
|
dalam memilah sampah rumah tangga menjadi beberapa kategori. Program ini bertujuan untuk
|
|
mengurangi volume sampah yang masuk ke TPA (Tempat Pembuangan Akhir) dan meningkatkan tingkat
|
|
daur ulang di Jakarta.
|
|
</p>
|
|
<p>
|
|
Dengan bergabung menjadi Rumah Memilah, Anda berkontribusi langsung pada kebersihan lingkungan
|
|
dan ekonomi sirkular di Jakarta, serta mendapatkan berbagai keuntungan menarik.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Regulation Section -->
|
|
<section id="pergub" class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-gray-100">
|
|
<div class="w-full mx-auto">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-start">
|
|
<!-- Content Section -->
|
|
<div>
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-sm font-semibold font-jakarta">Pergub DKI Jakarta</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta mb-8">Peraturan Gubernur DKI
|
|
Jakarta</h2>
|
|
|
|
<!-- Accordion Item 1 - Expanded -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 mb-4 overflow-hidden">
|
|
<button onclick="toggleAccordion('accordion1')"
|
|
class="w-full p-6 flex justify-between items-start text-left">
|
|
<div class="flex-1">
|
|
<h3 class="text-gray-900 text-2xl font-bold font-jakarta mb-1">No. 77 Tahun 2020</h3>
|
|
<p class="text-gray-600 text-base">Pengelolaan Sampah di Lingkungan RT/RW</p>
|
|
</div>
|
|
<svg id="accordion1-icon" class="w-6 h-6 text-gray-600 transform transition-transform"
|
|
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
<div id="accordion1" class="px-6 pb-6">
|
|
<p class="text-slate-600 text-base leading-relaxed mb-4">
|
|
Peraturan Gubernur Nomor 77 Tahun 2020 mengatur tentang pengelolaan sampah dari sumbernya
|
|
melalui peran aktif warga di tingkat RT dan RW, dengan tujuan mengurangi volume sampah yang
|
|
masuk ke TPA.
|
|
</p>
|
|
<div class="flex flex-wrap gap-2 mb-4">
|
|
<span class="px-3 py-1 bg-primary-50 rounded-full
|
|
font-medium inline-flex items-center gap-1">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M13 2H11.5V1.5C11.5 1.36739 11.4473 1.24021 11.3536 1.14645C11.2598 1.05268 11.1326 1 11 1C10.8674 1 10.7402 1.05268 10.6464 1.14645C10.5527 1.24021 10.5 1.36739 10.5 1.5V2H5.5V1.5C5.5 1.36739 5.44732 1.24021 5.35355 1.14645C5.25979 1.05268 5.13261 1 5 1C4.86739 1 4.74021 1.05268 4.64645 1.14645C4.55268 1.24021 4.5 1.36739 4.5 1.5V2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H13C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13V3C14 2.73478 13.8946 2.48043 13.7071 2.29289C13.5196 2.10536 13.2652 2 13 2ZM5.25 11.5C5.10166 11.5 4.95666 11.456 4.83332 11.3736C4.70999 11.2912 4.61386 11.1741 4.55709 11.037C4.50032 10.9 4.48547 10.7492 4.51441 10.6037C4.54335 10.4582 4.61478 10.3246 4.71967 10.2197C4.82456 10.1148 4.9582 10.0433 5.10368 10.0144C5.24917 9.98547 5.39997 10.0003 5.53701 10.0571C5.67406 10.1139 5.79119 10.21 5.8736 10.3333C5.95601 10.4567 6 10.6017 6 10.75C6 10.9489 5.92098 11.1397 5.78033 11.2803C5.63968 11.421 5.44891 11.5 5.25 11.5ZM8 11.5C7.85166 11.5 7.70666 11.456 7.58332 11.3736C7.45999 11.2912 7.36386 11.1741 7.30709 11.037C7.25032 10.9 7.23547 10.7492 7.26441 10.6037C7.29335 10.4582 7.36478 10.3246 7.46967 10.2197C7.57456 10.1148 7.7082 10.0433 7.85368 10.0144C7.99917 9.98547 8.14997 10.0003 8.28701 10.0571C8.42406 10.1139 8.54119 10.21 8.6236 10.3333C8.70601 10.4567 8.75 10.6017 8.75 10.75C8.75 10.9489 8.67098 11.1397 8.53033 11.2803C8.38968 11.421 8.19891 11.5 8 11.5ZM8 9C7.85166 9 7.70666 8.95601 7.58332 8.8736C7.45999 8.79119 7.36386 8.67406 7.30709 8.53701C7.25032 8.39997 7.23547 8.24917 7.26441 8.10368C7.29335 7.9582 7.36478 7.82456 7.46967 7.71967C7.57456 7.61478 7.7082 7.54335 7.85368 7.51441C7.99917 7.48547 8.14997 7.50032 8.28701 7.55709C8.42406 7.61386 8.54119 7.70999 8.6236 7.83332C8.70601 7.95666 8.75 8.10166 8.75 8.25C8.75 8.44891 8.67098 8.63968 8.53033 8.78033C8.38968 8.92098 8.19891 9 8 9ZM10.75 11.5C10.6017 11.5 10.4567 11.456 10.3333 11.3736C10.21 11.2912 10.1139 11.1741 10.0571 11.037C10.0003 10.9 9.98547 10.7492 10.0144 10.6037C10.0433 10.4582 10.1148 10.3246 10.2197 10.2197C10.3246 10.1148 10.4582 10.0433 10.6037 10.0144C10.7492 9.98547 10.9 10.0003 11.037 10.0571C11.1741 10.1139 11.2912 10.21 11.3736 10.3333C11.456 10.4567 11.5 10.6017 11.5 10.75C11.5 10.9489 11.421 11.1397 11.2803 11.2803C11.1397 11.421 10.9489 11.5 10.75 11.5ZM10.75 9C10.6017 9 10.4567 8.95601 10.3333 8.8736C10.21 8.79119 10.1139 8.67406 10.0571 8.53701C10.0003 8.39997 9.98547 8.24917 10.0144 8.10368C10.0433 7.9582 10.1148 7.82456 10.2197 7.71967C10.3246 7.61478 10.4582 7.54335 10.6037 7.51441C10.7492 7.48547 10.9 7.50032 11.037 7.55709C11.1741 7.61386 11.2912 7.70999 11.3736 7.83332C11.456 7.95666 11.5 8.10166 11.5 8.25C11.5 8.44891 11.421 8.63968 11.2803 8.78033C11.1397 8.92098 10.9489 9 10.75 9ZM13 5H3V3H4.5V3.5C4.5 3.63261 4.55268 3.75979 4.64645 3.85355C4.74021 3.94732 4.86739 4 5 4C5.13261 4 5.25979 3.94732 5.35355 3.85355C5.44732 3.75979 5.5 3.63261 5.5 3.5V3H10.5V3.5C10.5 3.63261 10.5527 3.75979 10.6464 3.85355C10.7402 3.94732 10.8674 4 11 4C11.1326 4 11.2598 3.94732 11.3536 3.85355C11.4473 3.75979 11.5 3.63261 11.5 3.5V3H13V5Z"
|
|
fill="#247332" />
|
|
</svg>
|
|
|
|
Ditetapkan: 13 Juli 2020
|
|
</span>
|
|
<span
|
|
class="px-3 py-1 bg-primary-50 rounded-full text-primary-700 text-sm font-medium inline-flex items-center gap-1">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M8 1.5C6.71442 1.5 5.45772 1.88122 4.3888 2.59545C3.31988 3.30968 2.48676 4.32484 1.99479 5.51256C1.50282 6.70028 1.37409 8.00721 1.6249 9.26809C1.8757 10.529 2.49477 11.6872 3.40381 12.5962C4.31285 13.5052 5.47104 14.1243 6.73192 14.3751C7.99279 14.6259 9.29973 14.4972 10.4874 14.0052C11.6752 13.5132 12.6903 12.6801 13.4046 11.6112C14.1188 10.5423 14.5 9.28558 14.5 8C14.4982 6.27665 13.8128 4.62441 12.5942 3.40582C11.3756 2.18722 9.72335 1.50182 8 1.5ZM10.8538 6.85375L7.35375 10.3538C7.30732 10.4002 7.25217 10.4371 7.19147 10.4623C7.13077 10.4874 7.06571 10.5004 7 10.5004C6.9343 10.5004 6.86923 10.4874 6.80853 10.4623C6.74783 10.4371 6.69269 10.4002 6.64625 10.3538L5.14625 8.85375C5.05243 8.75993 4.99972 8.63268 4.99972 8.5C4.99972 8.36732 5.05243 8.24007 5.14625 8.14625C5.24007 8.05243 5.36732 7.99972 5.5 7.99972C5.63268 7.99972 5.75993 8.05243 5.85375 8.14625L7 9.29313L10.1463 6.14625C10.1927 6.09979 10.2479 6.06294 10.3086 6.0378C10.3693 6.01266 10.4343 5.99972 10.5 5.99972C10.5657 5.99972 10.6308 6.01266 10.6915 6.0378C10.7521 6.06294 10.8073 6.09979 10.8538 6.14625C10.9002 6.1927 10.9371 6.24786 10.9622 6.30855C10.9873 6.36925 11.0003 6.4343 11.0003 6.5C11.0003 6.5657 10.9873 6.63075 10.9622 6.69145C10.9371 6.75214 10.9002 6.8073 10.8538 6.85375Z"
|
|
fill="#247332" />
|
|
</svg>
|
|
|
|
Status: Berlaku
|
|
</span>
|
|
<a href="#"
|
|
class="px-3 py-1 bg-primary-50 rounded-full text-primary-700 text-sm font-medium inline-flex items-center gap-1 hover:bg-gray-200 transition-colors">
|
|
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M12 7.5V11.5C12 11.6326 11.9473 11.7598 11.8536 11.8536C11.7598 11.9473 11.6326 12 11.5 12H0.5C0.367392 12 0.240215 11.9473 0.146447 11.8536C0.0526785 11.7598 0 11.6326 0 11.5V7.5C0 7.36739 0.0526785 7.24021 0.146447 7.14645C0.240215 7.05268 0.367392 7 0.5 7C0.632608 7 0.759785 7.05268 0.853553 7.14645C0.947321 7.24021 1 7.36739 1 7.5V11H11V7.5C11 7.36739 11.0527 7.24021 11.1464 7.14645C11.2402 7.05268 11.3674 7 11.5 7C11.6326 7 11.7598 7.05268 11.8536 7.14645C11.9473 7.24021 12 7.36739 12 7.5ZM5.64625 7.85375C5.69269 7.90024 5.74783 7.93712 5.80853 7.96228C5.86923 7.98744 5.93429 8.00039 6 8.00039C6.06571 8.00039 6.13077 7.98744 6.19147 7.96228C6.25217 7.93712 6.30731 7.90024 6.35375 7.85375L8.85375 5.35375C8.92376 5.28382 8.97144 5.1947 8.99076 5.09765C9.01009 5.00061 9.00019 4.90002 8.96231 4.8086C8.92443 4.71719 8.86029 4.63908 8.77799 4.58414C8.69569 4.5292 8.59895 4.49992 8.5 4.5H6.5V0.5C6.5 0.367392 6.44732 0.240215 6.35355 0.146447C6.25979 0.0526784 6.13261 0 6 0C5.86739 0 5.74021 0.0526784 5.64645 0.146447C5.55268 0.240215 5.5 0.367392 5.5 0.5V4.5H3.5C3.40105 4.49992 3.30431 4.5292 3.22201 4.58414C3.13971 4.63908 3.07556 4.71719 3.03769 4.8086C2.99981 4.90002 2.98991 5.00061 3.00924 5.09765C3.02856 5.1947 3.07624 5.28382 3.14625 5.35375L5.64625 7.85375Z"
|
|
fill="#247332" />
|
|
</svg>
|
|
|
|
Unduh PDF
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Accordion Item 2 - Collapsed -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<button onclick="toggleAccordion('accordion2')"
|
|
class="w-full p-6 flex justify-between items-start text-left">
|
|
<div class="flex-1">
|
|
<h3 class="text-gray-900 text-2xl font-bold font-jakarta mb-1">Pergub DKI Jakarta No.
|
|
77/2020</h3>
|
|
<p class="text-gray-600 text-base">Peraturan Gubernur Provins DKI Jakarta Nomor 77 Tahun
|
|
2020</p>
|
|
</div>
|
|
<svg id="accordion2-icon"
|
|
class="w-6 h-6 text-gray-600 transform transition-transform rotate-180" fill="none"
|
|
stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
<div id="accordion2" class="hidden px-6 pb-6">
|
|
<p class="text-slate-600 text-sm leading-relaxed">
|
|
Detail informasi tambahan tentang Peraturan Gubernur DKI Jakarta Nomor 77 Tahun 2020.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image Section -->
|
|
<div class="relative mt-10 w-full h-[400px] lg:h-[480px]">
|
|
<img class="w-full h-full object-cover rounded-2xl shadow-lg" src="/images/gubernur.png"
|
|
alt="Peraturan Gubernur" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- Location BPS RW Section -->
|
|
<section class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-white">
|
|
<div class="w-full mx-auto">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<!-- Badge -->
|
|
<div class="inline-flex px-4 py-2 bg-primary-25 rounded-full mb-4">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-2 h-2 bg-primary-700 rounded-full"></div>
|
|
<span class="text-primary-700 text-base font-semibold font-jakarta">Lokasi</span>
|
|
</div>
|
|
</div>
|
|
<h2 class="text-gray-900 text-3xl lg:text-4xl font-bold font-jakarta">Lokasi BPS RW</h2>
|
|
</div>
|
|
|
|
<!-- Gray Wrapper Container -->
|
|
<div class="bg-gray-100 rounded-2xl p-4">
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
|
|
<!-- Map Section -->
|
|
<div class="lg:col-span-3">
|
|
<div id="map" class="w-full h-[500px] bg-white rounded-xl overflow-hidden shadow-sm"></div>
|
|
</div>
|
|
|
|
<!-- Filter Section -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white p-5 rounded-xl shadow-sm h-[500px] overflow-y-auto">
|
|
<div class="flex justify-between items-center mb-5">
|
|
<h3 class="text-gray-900 text-base font-bold font-jakarta">Filter</h3>
|
|
<button onclick="clearFilters()"
|
|
class="text-red-500 text-xs font-semibold hover:underline">Clear All</button>
|
|
</div>
|
|
|
|
<!-- Jenis Lokasi Filter -->
|
|
<div class="mb-4">
|
|
<label for="jenisLokasi"
|
|
class="block text-gray-700 text-xs font-semibold font-jakarta mb-2">Jenis
|
|
Lokasi</label>
|
|
<select id="jenisLokasi"
|
|
class="w-full px-3 py-2 bg-gray-100 border border-gray-200 rounded-lg text-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
<option value="">Pilih jenis lokasi</option>
|
|
<option value="bps">TPS</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Wilayah Filter -->
|
|
<div class="mb-4">
|
|
<label for="wilayah"
|
|
class="block text-gray-700 text-xs font-semibold font-jakarta mb-2">Wilayah</label>
|
|
<select id="wilayah"
|
|
class="w-full px-3 py-2 bg-gray-100 border border-gray-200 rounded-lg text-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
<option value="">Pilih wilayah</option>
|
|
<option value="pusat">Jakarta Pusat</option>
|
|
<option value="utara">Jakarta Utara</option>
|
|
<option value="barat">Jakarta Barat</option>
|
|
<option value="selatan">Jakarta Selatan</option>
|
|
<option value="timur">Jakarta Timur</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Kecamatan Filter -->
|
|
<div class="mb-4">
|
|
<label for="kecamatan"
|
|
class="block text-gray-700 text-xs font-semibold font-jakarta mb-2">Kecamatan</label>
|
|
<select id="kecamatan"
|
|
class="w-full px-3 py-2 bg-gray-100 border border-gray-200 rounded-lg text-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
<option value="">Pilih kecamatan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Kelurahan Filter -->
|
|
<div class="mb-4">
|
|
<label for="kelurahan"
|
|
class="block text-gray-700 text-xs font-semibold font-jakarta mb-2">Kelurahan</label>
|
|
<select id="kelurahan"
|
|
class="w-full px-3 py-2 bg-gray-100 border border-gray-200 rounded-lg text-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
<option value="">Pilih kelurahan</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- RW Filter -->
|
|
<div class="mb-5">
|
|
<label for="rw"
|
|
class="block text-gray-700 text-xs font-semibold font-jakarta mb-2">RW</label>
|
|
<select id="rw"
|
|
class="w-full px-3 py-2 bg-gray-100 border border-gray-200 rounded-lg text-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-green-500">
|
|
<option value="">Pilih RW</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Filter Button -->
|
|
<button onclick="applyFilters()"
|
|
class="w-full px-5 py-2.5 bg-primary-700 hover:bg-green-700 text-white text-center rounded-full text-sm font-semibold transition-colors">
|
|
Terapkan Filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Scroll to Top Button -->
|
|
<button id="scrollToTop"
|
|
class="fixed bottom-8 cursor-pointer
|
|
right-8 text-lg w-12 h-12 bg-primary-700 hover:bg-primary-800 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-300 opacity-0 invisible z-50">
|
|
<i class="ph ph-arrow-up text-2xl"></i>
|
|
</button>
|
|
|
|
<!-- Contact Section -->
|
|
@await Html.PartialAsync("_ContactSection")
|
|
|
|
|
|
@section Scripts {
|
|
<style>
|
|
/* Leaflet map custom styles */
|
|
#map {
|
|
z-index: 1;
|
|
}
|
|
|
|
.leaflet-popup-content-wrapper {
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.leaflet-popup-content {
|
|
margin: 1rem;
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
}
|
|
|
|
.leaflet-popup-content b {
|
|
color: #1E602A;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.custom-popup .leaflet-popup-close-button {
|
|
color: #6B7280;
|
|
font-size: 20px;
|
|
margin: 8px 8px;
|
|
}
|
|
</style>
|
|
<script>
|
|
// Scroll to Top Button
|
|
const scrollToTopBtn = document.getElementById('scrollToTop');
|
|
|
|
window.addEventListener('scroll', function() {
|
|
if (window.pageYOffset > 300) {
|
|
scrollToTopBtn.classList.remove('opacity-0', 'invisible');
|
|
scrollToTopBtn.classList.add('opacity-100', 'visible');
|
|
} else {
|
|
scrollToTopBtn.classList.remove('opacity-100', 'visible');
|
|
scrollToTopBtn.classList.add('opacity-0', 'invisible');
|
|
}
|
|
});
|
|
|
|
scrollToTopBtn.addEventListener('click', function() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: 'smooth'
|
|
});
|
|
});
|
|
|
|
// Smooth scrolling for anchor links
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Animation on scroll
|
|
const observerOptions = {
|
|
threshold: 0.1,
|
|
rootMargin: '0px 0px -50px 0px'
|
|
};
|
|
|
|
const observer = new IntersectionObserver(function (entries) {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('animate-fade-in');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe all sections
|
|
document.querySelectorAll('section').forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
|
|
// Accordion Toggle Function
|
|
function toggleAccordion(id) {
|
|
const content = document.getElementById(id);
|
|
const icon = document.getElementById(id + '-icon');
|
|
|
|
if (content.classList.contains('hidden')) {
|
|
content.classList.remove('hidden');
|
|
icon.classList.remove('rotate-180');
|
|
} else {
|
|
content.classList.add('hidden');
|
|
icon.classList.add('rotate-180');
|
|
}
|
|
}
|
|
|
|
// Leaflet Map
|
|
let map;
|
|
let markers = [];
|
|
let allLocations = [];
|
|
|
|
// Data lokasi BPS RW
|
|
const locationsData = [
|
|
{ lat: -6.1751, lng: 106.8650, name: 'TPS Menteng', wilayah: 'pusat', kecamatan: 'Menteng', kelurahan: 'Menteng', rw: '01', jenis: 'bps', alamat: 'Jl. Menteng Raya No.15 Menteng' },
|
|
{ lat: -6.1850, lng: 106.8550, name: 'TPS Gondangdia', wilayah: 'pusat', kecamatan: 'Menteng', kelurahan: 'Gondangdia', rw: '02', jenis: 'bps', alamat: 'Jl. Gondangdia Lama No.8 Gondangdia' },
|
|
{ lat: -6.2088, lng: 106.8456, name: 'TPS Petamburan', wilayah: 'pusat', kecamatan: 'Tanah Abang', kelurahan: 'Petamburan', rw: '01', jenis: 'bps', alamat: 'Jl. Petamburan IV No.22 Petamburan', telepon: '021-5734-1234' },
|
|
{ lat: -6.2150, lng: 106.8350, name: 'TPS Kebon Melati', wilayah: 'pusat', kecamatan: 'Tanah Abang', kelurahan: 'Kebon Melati', rw: '03', jenis: 'bps', alamat: 'Jl. Kebon Melati Raya No.45 Kebon Melati', telepon: '021-5734-5678' },
|
|
|
|
{ lat: -6.1215, lng: 106.7784, name: 'TPS Kelapa Gading Barat', wilayah: 'utara', kecamatan: 'Kelapa Gading', kelurahan: 'Kelapa Gading Barat', rw: '01', jenis: 'bps', alamat: 'Jl. Boulevard Barat No.10 Kelapa Gading', telepon: '021-4585-2345' },
|
|
{ lat: -6.1300, lng: 106.7850, name: 'TPS Kelapa Gading Timur', wilayah: 'utara', kecamatan: 'Kelapa Gading', kelurahan: 'Kelapa Gading Timur', rw: '05', jenis: 'bps', alamat: 'Jl. Boulevard Timur No.25 Kelapa Gading', telepon: '021-4585-6789' },
|
|
{ lat: -6.1385, lng: 106.8060, name: 'TPS Sunter Agung', wilayah: 'utara', kecamatan: 'Tanjung Priok', kelurahan: 'Sunter Agung', rw: '02', jenis: 'bps', alamat: 'Jl. Sunter Agung Raya No.18 Sunter', telepon: '021-6512-3456' },
|
|
{ lat: -6.1450, lng: 106.8150, name: 'TPS Sunter Jaya', wilayah: 'utara', kecamatan: 'Tanjung Priok', kelurahan: 'Sunter Jaya', rw: '04', jenis: 'bps', alamat: 'Jl. Sunter Jaya No.32 Sunter', telepon: '021-6512-7890' },
|
|
|
|
{ lat: -6.1744, lng: 106.7897, name: 'TPS Grogol', wilayah: 'barat', kecamatan: 'Grogol Petamburan', kelurahan: 'Grogol', rw: '03', jenis: 'bps', alamat: 'Jl. Grogol Raya No.55 Grogol', telepon: '021-5603-4567' },
|
|
{ lat: -6.1850, lng: 106.7800, name: 'TPS Tomang', wilayah: 'barat', kecamatan: 'Grogol Petamburan', kelurahan: 'Tomang', rw: '06', jenis: 'bps', alamat: 'Jl. Tomang Raya No.88 Tomang', telepon: '021-5603-8901' },
|
|
{ lat: -6.2000, lng: 106.7833, name: 'TPS Kebon Jeruk', wilayah: 'barat', kecamatan: 'Kebon Jeruk', kelurahan: 'Kebon Jeruk', rw: '02', jenis: 'bps', alamat: 'Jl. Perjuangan No.12 Kebon Jeruk', telepon: '021-5327-5678' },
|
|
{ lat: -6.2100, lng: 106.7750, name: 'TPS Sukabumi Utara', wilayah: 'barat', kecamatan: 'Kebon Jeruk', kelurahan: 'Sukabumi Utara', rw: '05', jenis: 'bps', alamat: 'Jl. Sukabumi Utara No.67 Kebon Jeruk', telepon: '021-5327-9012' },
|
|
|
|
{ lat: -6.2615, lng: 106.8106, name: 'TPS Melawai', wilayah: 'selatan', kecamatan: 'Kebayoran Baru', kelurahan: 'Melawai', rw: '01', jenis: 'bps', alamat: 'Jl. Melawai Raya No.20 Kebayoran Baru', telepon: '021-7234-6789' },
|
|
{ lat: -6.2700, lng: 106.8000, name: 'TPS Gunung', wilayah: 'selatan', kecamatan: 'Kebayoran Baru', kelurahan: 'Gunung', rw: '04', jenis: 'bps', alamat: 'Jl. Gunung Sahari No.35 Kebayoran Baru', telepon: '021-7234-0123' },
|
|
{ lat: -6.3000, lng: 106.8167, name: 'TPS Cilandak Barat', wilayah: 'selatan', kecamatan: 'Cilandak', kelurahan: 'Cilandak Barat', rw: '02', jenis: 'bps', alamat: 'Jl. Cilandak KKO No.14 Cilandak', telepon: '021-7501-7890' },
|
|
{ lat: -6.3100, lng: 106.8250, name: 'TPS Cilandak Timur', wilayah: 'selatan', kecamatan: 'Cilandak', kelurahan: 'Cilandak Timur', rw: '06', jenis: 'bps', alamat: 'Jl. Raya Cilandak No.28 Cilandak', telepon: '021-7501-1234' },
|
|
|
|
{ lat: -6.2250, lng: 106.9004, name: 'TPS Cakung Barat', wilayah: 'timur', kecamatan: 'Cakung', kelurahan: 'Cakung Barat', rw: '03', jenis: 'bps', alamat: 'Jl. Cakung Barat No.42 Cakung', telepon: '021-4603-5678' },
|
|
{ lat: -6.2350, lng: 106.9100, name: 'TPS Cakung Timur', wilayah: 'timur', kecamatan: 'Cakung', kelurahan: 'Cakung Timur', rw: '07', jenis: 'bps', alamat: 'Jl. Cakung Timur Raya No.56 Cakung', telepon: '021-4603-9012' },
|
|
{ lat: -6.2744, lng: 106.8750, name: 'TPS Pasar Rebo', wilayah: 'timur', kecamatan: 'Pasar Rebo', kelurahan: 'Pasar Rebo', rw: '01', jenis: 'bps', alamat: 'Jl. Raya Bogor No.78 Pasar Rebo', telepon: '021-8403-3456' },
|
|
{ lat: -6.2850, lng: 106.8850, name: 'TPS Cijantung', wilayah: 'timur', kecamatan: 'Pasar Rebo', kelurahan: 'Cijantung', rw: '05', jenis: 'bps', alamat: 'Jl. Cijantung Raya No.91 Pasar Rebo', telepon: '021-8403-7890' }
|
|
];
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
allLocations = locationsData;
|
|
|
|
// Init map on Jakarta
|
|
map = L.map('map').setView([-6.2088, 106.8456], 11);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
maxZoom: 19
|
|
}).addTo(map);
|
|
|
|
// Marker icon
|
|
const trashIcon = L.divIcon({
|
|
className: 'custom-trash-marker',
|
|
html: `
|
|
<div class="w-8 h-8 bg-[#247332] rounded-full flex items-center justify-center">
|
|
<svg width="9" height="11" viewBox="0 0 9 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0.666667 10.6667C0.666667 11.4 1.26667 12 2 12H7.33333C8.06667 12 8.66667 11.4 8.66667 10.6667V2.66667H0.666667V10.6667ZM9.33333 0.666667H7L6.33333 0H3L2.33333 0.666667H0V2H9.33333V0.666667Z" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
`,
|
|
iconSize: [32, 32],
|
|
iconAnchor: [16, 32],
|
|
popupAnchor: [0, -32]
|
|
});
|
|
|
|
// All markers to map
|
|
allLocations.forEach(location => {
|
|
const popupContent = `
|
|
<div class="w-[200px]">
|
|
<div class="text-[14px] font-bold text-gray-800 mb-4">
|
|
${location.name}
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="text-[14px] font-semibold text-gray-700 mb-1">
|
|
Alamat
|
|
</div>
|
|
<div class="text-[12px] text-gray-500 leading-[1.5]">
|
|
${location.alamat}
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="text-[14px] font-semibold text-gray-700 mb-1">
|
|
Nomor Telepon
|
|
</div>
|
|
<div class="text-[12px] text-gray-500 leading-[1.5]">
|
|
${location.telepon}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const marker = L.marker([location.lat, location.lng], { icon: trashIcon })
|
|
.addTo(map)
|
|
.bindPopup(popupContent, {
|
|
className: 'custom-popup'
|
|
});
|
|
markers.push({ marker: marker, data: location });
|
|
});
|
|
|
|
populateKecamatan();
|
|
|
|
document.getElementById('wilayah').addEventListener('change', function () {
|
|
populateKecamatan();
|
|
populateKelurahan();
|
|
populateRW();
|
|
});
|
|
|
|
document.getElementById('kecamatan').addEventListener('change', function () {
|
|
populateKelurahan();
|
|
populateRW();
|
|
});
|
|
|
|
document.getElementById('kelurahan').addEventListener('change', function () {
|
|
populateRW();
|
|
});
|
|
});
|
|
|
|
function populateKecamatan() {
|
|
const wilayah = document.getElementById('wilayah').value;
|
|
const kecamatanSelect = document.getElementById('kecamatan');
|
|
kecamatanSelect.innerHTML = '<option value="">Pilih kecamatan</option>';
|
|
|
|
if (!wilayah) return;
|
|
|
|
const kecamatans = [...new Set(allLocations
|
|
.filter(loc => loc.wilayah === wilayah)
|
|
.map(loc => loc.kecamatan))];
|
|
|
|
kecamatans.forEach(kec => {
|
|
const option = document.createElement('option');
|
|
option.value = kec;
|
|
option.textContent = kec;
|
|
kecamatanSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
function populateKelurahan() {
|
|
const wilayah = document.getElementById('wilayah').value;
|
|
const kecamatan = document.getElementById('kecamatan').value;
|
|
const kelurahanSelect = document.getElementById('kelurahan');
|
|
kelurahanSelect.innerHTML = '<option value="">Pilih kelurahan</option>';
|
|
|
|
if (!kecamatan) return;
|
|
|
|
const kelurahans = [...new Set(allLocations
|
|
.filter(loc => loc.wilayah === wilayah && loc.kecamatan === kecamatan)
|
|
.map(loc => loc.kelurahan))];
|
|
|
|
kelurahans.forEach(kel => {
|
|
const option = document.createElement('option');
|
|
option.value = kel;
|
|
option.textContent = kel;
|
|
kelurahanSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
function populateRW() {
|
|
const wilayah = document.getElementById('wilayah').value;
|
|
const kecamatan = document.getElementById('kecamatan').value;
|
|
const kelurahan = document.getElementById('kelurahan').value;
|
|
const rwSelect = document.getElementById('rw');
|
|
rwSelect.innerHTML = '<option value="">Pilih RW</option>';
|
|
|
|
if (!kelurahan) return;
|
|
|
|
const rws = [...new Set(allLocations
|
|
.filter(loc => loc.wilayah === wilayah && loc.kecamatan === kecamatan && loc.kelurahan === kelurahan)
|
|
.map(loc => loc.rw))];
|
|
|
|
rws.forEach(rw => {
|
|
const option = document.createElement('option');
|
|
option.value = rw;
|
|
option.textContent = 'RW ' + rw;
|
|
rwSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
// Filter functions
|
|
function applyFilters() {
|
|
const jenisLokasi = document.getElementById('jenisLokasi').value;
|
|
const wilayah = document.getElementById('wilayah').value;
|
|
const kecamatan = document.getElementById('kecamatan').value;
|
|
const kelurahan = document.getElementById('kelurahan').value;
|
|
const rw = document.getElementById('rw').value;
|
|
|
|
let visibleCount = 0;
|
|
let bounds = [];
|
|
|
|
// markers based on filters
|
|
markers.forEach(item => {
|
|
let show = true;
|
|
|
|
if (jenisLokasi && item.data.jenis !== jenisLokasi) {
|
|
show = false;
|
|
}
|
|
if (wilayah && item.data.wilayah !== wilayah) {
|
|
show = false;
|
|
}
|
|
if (kecamatan && item.data.kecamatan !== kecamatan) {
|
|
show = false;
|
|
}
|
|
if (kelurahan && item.data.kelurahan !== kelurahan) {
|
|
show = false;
|
|
}
|
|
if (rw && item.data.rw !== rw) {
|
|
show = false;
|
|
}
|
|
|
|
if (show) {
|
|
item.marker.addTo(map);
|
|
bounds.push([item.data.lat, item.data.lng]);
|
|
visibleCount++;
|
|
} else {
|
|
map.removeLayer(item.marker);
|
|
}
|
|
});
|
|
|
|
// Adjust map view to show all visible markers
|
|
if (bounds.length > 0) {
|
|
map.fitBounds(bounds, { padding: [50, 50] });
|
|
}
|
|
}
|
|
|
|
function clearFilters() {
|
|
document.getElementById('jenisLokasi').value = '';
|
|
document.getElementById('wilayah').value = '';
|
|
document.getElementById('kecamatan').value = '';
|
|
document.getElementById('kelurahan').value = '';
|
|
document.getElementById('rw').value = '';
|
|
|
|
// Reset dropdowns
|
|
document.getElementById('kecamatan').innerHTML = '<option value="">Pilih kecamatan</option>';
|
|
document.getElementById('kelurahan').innerHTML = '<option value="">Pilih kelurahan</option>';
|
|
document.getElementById('rw').innerHTML = '<option value="">Pilih RW</option>';
|
|
|
|
// Show all markers and reset map view
|
|
markers.forEach(item => {
|
|
item.marker.addTo(map);
|
|
});
|
|
|
|
map.setView([-6.2088, 106.8456], 11);
|
|
}
|
|
</script>
|
|
} |