From 02e8752a361a4eb1b554d34334efb1dbb5335621 Mon Sep 17 00:00:00 2001
From: Aleksander William <d1041231003@student.untan.ac.id>
Date: Tue, 9 Jun 2026 20:38:36 +0700
Subject: [PATCH] style: menghapus ikon zoom in dan out berlebih serta
 memperbaiki ikon basemap

---
 WebGISPovertyMap/script.js |  9 ++++----
 WebGISPovertyMap/style.css | 44 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/WebGISPovertyMap/script.js b/WebGISPovertyMap/script.js
index 2ecda7d..a9ae93f 100644
--- a/WebGISPovertyMap/script.js
+++ b/WebGISPovertyMap/script.js
@@ -21,7 +21,8 @@ var darkMap = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y
 var map = L.map('map', {
     center: [-0.0227, 109.3340], // Titik tengah peta (Pontianak)
     zoom: 13,
-    layers: [osm] // Basemap default yang langsung aktif saat web dibuka
+    layers: [osm], // Basemap default yang langsung aktif saat web dibuka
+    zoomControl: false
 });
 
 // 3. Gabungkan Basemap ke dalam satu Grup Objek
@@ -31,12 +32,12 @@ var baseMaps = {
     "Mode Gelap (Dark)": darkMap
 };
 
-// 4. Tambahkan Tombol Kontrol Layer ke Kanan Atas Peta
-L.control.layers(baseMaps).addTo(map);
-
 // Zoom control di kanan bawah (lebih bersih)
 L.control.zoom({ position: 'bottomright' }).addTo(map);
 
+// Tambahkan Tombol Kontrol Layer ke Bawah Kanan Peta
+L.control.layers(baseMaps, null, { position: 'bottomright' }).addTo(map);
+
 // Custom pane initialization removed
 
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
diff --git a/WebGISPovertyMap/style.css b/WebGISPovertyMap/style.css
index f65abed..fe7cb35 100644
--- a/WebGISPovertyMap/style.css
+++ b/WebGISPovertyMap/style.css
@@ -2380,4 +2380,48 @@ body {
 .leaflet-popup-close-button {
     color: #ffffff !important;
     padding: 4px 8px !important;
+}
+
+/* =========================================================
+   CUSTOM LAYERS CONTROL - KHUSUS KANAN BAWAH SAJA
+============================================================ */
+
+/* Menargetkan tombol Basemap HANYA yang berada di pojok kanan bawah */
+.leaflet-bottom.leaflet-right .leaflet-control-layers-toggle {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3V6z'%3E%3C/path%3E%3Cline x1='9' y1='3' x2='9' y2='21'%3E%3C/line%3E%3Cline x1='15' y1='6' x2='15' y2='24'%3E%3C/line%3E%3C/svg%3E") !important;
+    background-color: #1e2130 !important;
+
+    background-size: 18px 18px !important;
+
+    width: 30px !important;
+
+    height: 30px !important;
+
+
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    border-radius: 8px !important;
+    /* Jika tombol zoom Anda kotak tajam, ubah ini jadi 4px atau 2px */
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
+    transition: background-color 0.2s ease;
+}
+
+/* Efek hover khusus tombol di kanan bawah */
+.leaflet-bottom.leaflet-right .leaflet-control-layers-toggle:hover {
+    background-color: #2a2d3d !important;
+}
+
+/* Styling panel pop-up pilihan peta (hanya di kanan bawah) */
+.leaflet-bottom.leaflet-right .leaflet-control-layers {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
+    border: 1px solid rgba(255, 255, 255, 0.05) !important;
+    border-radius: 12px !important;
+    background-color: #1e2130 !important;
+    color: #f8fafc !important;
+    padding: 6px !important;
+}
+
+.leaflet-bottom.leaflet-right .leaflet-control-layers-list {
+    padding: 4px !important;
 }
\ No newline at end of file