AleksanderWilliam/WebGIS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: menghapus ikon zoom in dan out berlebih serta memperbaiki ikon basemap

Browse Source
This commit is contained in:
Aleksander William
2026-06-09 20:38:36 +07:00
parent d7a38164ad
commit 02e8752a36
2 changed files with 49 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebGISPovertyMap/script.js
+5 -4
View File
@@ -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', {
WebGISPovertyMap/style.css
+44
View File
@@ -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;
}