Imagesbyolofsson.se/PublicCloud
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Karta: plus/minus-knappar för zoom

Browse Source 
Leaflet zoom-kontroll uppe till vänster i kartan, stylad som glasrutorna,
med svenska titlar (Zooma in / Zooma ut).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Linus Olofsson
2026-09-24 20:58:12 +02:00
co-authored by Claude Opus 5.5
parent dde15001d4
commit 5adc31cff2
1 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/public/index.html
+9
View File
@@ -73,6 +73,14 @@
#map { height: clamp(110px, 22vh, 270px); border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: #1b2030; }
#map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.5); }
#map .leaflet-control-attribution { background: rgba(10,14,28,.6); color: rgba(255,255,255,.7); font-size: 10px; }
/* zoom buttons in the same glass style as the panels */
#map .leaflet-bar { border: 1px solid rgba(255,255,255,.28); border-radius: 8px; overflow: hidden; box-shadow: none; }
#map .leaflet-bar a { width: 32px; height: 32px; line-height: 30px; font-size: 20px; font-weight: 400;
background: rgba(10,14,28,.62); color: #fff; border-bottom: 1px solid rgba(255,255,255,.2);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#map .leaflet-bar a:last-child { border-bottom: 0; }
#map .leaflet-bar a:hover { background: rgba(40,48,70,.85); color: #fff; }
#map .leaflet-bar a.leaflet-disabled { color: rgba(255,255,255,.35); background: rgba(10,14,28,.62); }
#map .leaflet-control-attribution a { color: #9cc3ff; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; justify-content: center; }
.panel button { font: inherit; font-size: .9em; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
@@ -861,6 +869,7 @@
function initMap() {
if (!window.L || map) return;
map = L.map('map', { zoomControl: false, scrollWheelZoom: false }).setView([LAT, LNG], 11);
L.control.zoom({ position: 'topleft', zoomInTitle: 'Zooma in', zoomOutTitle: 'Zooma ut' }).addTo(map); // + / − buttons
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map);
marker = L.circleMarker([LAT, LNG], { radius: 7, color: '#fff', weight: 2, fillColor: '#ffcf5c', fillOpacity: .9 }).addTo(map);