Orfel-HermesAI-Bot/JGA-2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Karten-Legende einklappbar machen

Browse Source 
User-Report: Legende verdeckt die Karte unten rechts.

Fix für beide Map-Files (tourenplan.html + tourenplan-mit-tram.html):
- Default eingeklappt — nur Header sichtbar (~150x35px statt ~240x340px)
- Klick auf Header togglet open/close, Pfeil rotiert
- Body scrollbar bei max-height 280px (nicht mehr Viewport-überschreitend)
- disableClickPropagation + disableScrollPropagation damit Klicks
  im Legenden-Panel nicht als Map-Klicks interpretiert werden
  (vorher: Klick auf Header öffnete versehentlich Hotel-Popup)
- Font-size kompakter (12-13px statt 13-14px)
- tourenplan.html behält Layer-Toggle (Action/Fun/Sight-Filter),
  tourenplan-mit-tram.html nicht (ÖPNV-Filter ist eigenes Panel)
This commit is contained in:
Hermes AI Bot
2026-06-27 09:39:00 +00:00
parent 1a7f920515
commit e67022a3c1
2 changed files with 63 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tourenplan-mit-tram.html
+20 -29
View File
@@ -124,11 +124,15 @@
.layer-toggle { margin-top: 8px; padding-top: 6px; border-top: 1px solid #555; font-size: 12px; } .layer-toggle { margin-top: 8px; padding-top: 6px; border-top: 1px solid #555; font-size: 12px; }
.layer-toggle label { display: flex; align-items: center; gap: 6px; margin: 3px 0; cursor: pointer; user-select: none; color: #eee; } .layer-toggle label { display: flex; align-items: center; gap: 6px; margin: 3px 0; cursor: pointer; user-select: none; color: #eee; }
.layer-toggle input { cursor: pointer; } .layer-toggle input { cursor: pointer; }
.legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 240px; backdrop-filter: blur(8px); } .legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 220px; backdrop-filter: blur(8px); }
.legend h4 { margin: 0 0 8px 0; font-size: 14px; } .legend h4 { margin: 0; font-size: 13px; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .legend h4 .toggle { margin-left: auto; font-size: 10px; opacity: 0.6; transition: transform 0.2s; }
.legend .emoji { font-size: 18px; } .legend.open h4 .toggle { transform: rotate(180deg); }
.legend .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid white; } .legend .body { display: none; margin-top: 8px; max-height: 280px; overflow-y: auto; }
.legend.open .body { display: block; }
.legend .item { display: flex; align-items: center; gap: 6px; margin: 3px 0; font-size: 12px; }
.legend .emoji { font-size: 14px; }
.legend .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; flex-shrink: 0; }
.popup-content { font-family: -apple-system, BlinkMacSystemFont, sans-serif; min-width: 220px; } .popup-content { font-family: -apple-system, BlinkMacSystemFont, sans-serif; min-width: 220px; }
.popup-content .emoji-big { font-size: 28px; margin-right: 8px; } .popup-content .emoji-big { font-size: 28px; margin-right: 8px; }
.popup-content h3 { margin: 0 0 6px 0; font-size: 16px; color: #1a1a1a; } .popup-content h3 { margin: 0 0 6px 0; font-size: 16px; color: #1a1a1a; }
@@ -916,8 +920,9 @@ const legend = L.control({ position: 'bottomright' });
legend.onAdd = function() { legend.onAdd = function() {
const div = L.DomUtil.create('div', 'legend'); const div = L.DomUtil.create('div', 'legend');
div.innerHTML = ` div.innerHTML = `
<h4>🥳 JGA Prag Tourenplan</h4> <h4 onclick="this.parentElement.classList.toggle('open')">📍 Legende<span class="toggle">▼</span></h4>
<div class="item"><span class="dot" style="background:#4fc3f7;border-color:#ffd700;"></span>🏨 <strong>Hotel Uno (Basis)</strong></div> <div class="body">
<div class="item"><span class="dot" style="background:#4fc3f7;border-color:#ffd700;"></span>🏨 <strong>Hotel Uno</strong></div>
<div class="item"><span class="dot" style="background:#e91e63"></span>🔐 Escape Room</div> <div class="item"><span class="dot" style="background:#e91e63"></span>🔐 Escape Room</div>
<div class="item"><span class="dot" style="background:#ff9800"></span>🏎️ KartPlanet</div> <div class="item"><span class="dot" style="background:#ff9800"></span>🏎️ KartPlanet</div>
<div class="item"><span class="dot" style="background:#66bb6a"></span>⛳ Minigolf</div> <div class="item"><span class="dot" style="background:#66bb6a"></span>⛳ Minigolf</div>
@@ -928,31 +933,17 @@ legend.onAdd = function() {
<div class="item"><span class="dot" style="background:#ef5350"></span>🎨 Paintball</div> <div class="item"><span class="dot" style="background:#ef5350"></span>🎨 Paintball</div>
<div class="item"><span class="dot" style="background:#26c6da"></span>🔫 Lasertag</div> <div class="item"><span class="dot" style="background:#26c6da"></span>🔫 Lasertag</div>
<div class="item"><span class="dot" style="background:#ffa726"></span>🔍 Enigma</div> <div class="item"><span class="dot" style="background:#ffa726"></span>🔍 Enigma</div>
<div class="layer-toggle"> <div style="margin-top:8px;padding-top:6px;border-top:1px solid var(--card-border);font-size:11px;">
<div style="color:#aaa;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;">Filter</div> 🚇 Metro:
<label><input type="checkbox" data-layer="hotel" checked disabled style="accent-color:#ffd700;"> 🏨 Hotel (immer sichtbar)</label> <span style="color:#00A562;font-weight:700">A</span> ·
<label><input type="checkbox" data-layer="action" checked style="accent-color:#e91e63;"> 💥 Action (5)</label>
<label><input type="checkbox" data-layer="fun" checked style="accent-color:#66bb6a;"> 🎉 Fun (4)</label>
<label><input type="checkbox" data-layer="sight" checked style="accent-color:#7e57c2;"> 🏛️ Sight (1)</label>
</div>
<div style="margin-top:8px;padding-top:6px;border-top:1px solid #555;font-size:11px;color:#aaa;">
🚇 Metro: <span style="color:#00A562;font-weight:700">A</span> ·
<span style="color:#F8B322;font-weight:700">B</span> · <span style="color:#F8B322;font-weight:700">B</span> ·
<span style="color:#CF003D;font-weight:700">C</span><br> <span style="color:#CF003D;font-weight:700">C</span>
🚋 Tram: eine Linie zur Zeit wählen (Radio)<br> &nbsp; 🚋 Tram: Radio
<span style="font-size:10px;">Marker anklicken für Details</span> </div>
</div> </div>
`; `;
setTimeout(() => { L.DomEvent.disableClickPropagation(div);
div.querySelectorAll('input[data-layer]').forEach(cb => { L.DomEvent.disableScrollPropagation(div);
cb.addEventListener('change', () => {
const layer = cb.dataset.layer;
(markersByCategory[layer] || []).forEach(m => {
if (cb.checked) m.addTo(map); else map.removeLayer(m);
});
});
});
}, 10);
return div; return div;
}; };
legend.addTo(map); legend.addTo(map);
tourenplan.html
+18 -10
View File
@@ -139,11 +139,15 @@
.layer-toggle input { cursor: pointer; } .layer-toggle input { cursor: pointer; }
/* Legende */ /* Legende */
.legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 240px; backdrop-filter: blur(8px); } .legend { background: var(--card-bg); padding: 10px 12px; border-radius: 8px; color: var(--text); font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,0.4); border: 1px solid var(--card-border); max-width: 220px; backdrop-filter: blur(8px); }
.legend h4 { margin: 0 0 8px 0; font-size: 14px; color: var(--text); } .legend h4 { margin: 0; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
.legend .item { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--text); } .legend h4 .toggle { margin-left: auto; font-size: 10px; opacity: 0.6; transition: transform 0.2s; }
.legend .emoji { font-size: 18px; } .legend.open h4 .toggle { transform: rotate(180deg); }
.legend .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid white; } .legend .body { display: none; margin-top: 8px; max-height: 280px; overflow-y: auto; }
.legend.open .body { display: block; }
.legend .item { display: flex; align-items: center; gap: 6px; margin: 3px 0; color: var(--text); font-size: 12px; }
.legend .emoji { font-size: 14px; }
.legend .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid white; flex-shrink: 0; }
.popup-content { font-family: -apple-system, BlinkMacSystemFont, sans-serif; min-width: 220px; } .popup-content { font-family: -apple-system, BlinkMacSystemFont, sans-serif; min-width: 220px; }
.popup-content .emoji-big { font-size: 28px; margin-right: 8px; } .popup-content .emoji-big { font-size: 28px; margin-right: 8px; }
.popup-content h3 { margin: 0 0 6px 0; font-size: 16px; color: #1a1a1a; } .popup-content h3 { margin: 0 0 6px 0; font-size: 16px; color: #1a1a1a; }
@@ -553,8 +557,9 @@ const legend = L.control({ position: 'bottomright' });
legend.onAdd = function() { legend.onAdd = function() {
const div = L.DomUtil.create('div', 'legend'); const div = L.DomUtil.create('div', 'legend');
div.innerHTML = ` div.innerHTML = `
<h4>🥳 JGA Prag Tourenplan</h4> <h4 onclick="this.parentElement.classList.toggle('open')">📍 Legende<span class="toggle">▼</span></h4>
<div class="item"><span class="dot" style="background:#4fc3f7;border-color:#ffd700;"></span>🏨 <strong>Hotel Uno (Basis)</strong></div> <div class="body">
<div class="item"><span class="dot" style="background:#4fc3f7;border-color:#ffd700;"></span>🏨 <strong>Hotel Uno</strong></div>
<div class="item"><span class="dot" style="background:#e91e63"></span>🔐 Escape Room</div> <div class="item"><span class="dot" style="background:#e91e63"></span>🔐 Escape Room</div>
<div class="item"><span class="dot" style="background:#ff9800"></span>🏎️ KartPlanet</div> <div class="item"><span class="dot" style="background:#ff9800"></span>🏎️ KartPlanet</div>
<div class="item"><span class="dot" style="background:#66bb6a"></span>⛳ Minigolf</div> <div class="item"><span class="dot" style="background:#66bb6a"></span>⛳ Minigolf</div>
@@ -566,14 +571,17 @@ legend.onAdd = function() {
<div class="item"><span class="dot" style="background:#26c6da"></span>🔫 Lasertag</div> <div class="item"><span class="dot" style="background:#26c6da"></span>🔫 Lasertag</div>
<div class="item"><span class="dot" style="background:#ffa726"></span>🔍 Enigma</div> <div class="item"><span class="dot" style="background:#ffa726"></span>🔍 Enigma</div>
<div class="layer-toggle"> <div class="layer-toggle">
<div style="color:#aaa;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;">Filter</div> <div style="color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;">Filter</div>
<label><input type="checkbox" data-layer="hotel" checked disabled style="accent-color:#ffd700;"> 🏨 Hotel (immer sichtbar)</label> <label><input type="checkbox" data-layer="hotel" checked disabled style="accent-color:#ffd700;"> 🏨 Hotel</label>
<label><input type="checkbox" data-layer="action" checked style="accent-color:#e91e63;"> 💥 Action (5)</label> <label><input type="checkbox" data-layer="action" checked style="accent-color:#e91e63;"> 💥 Action (5)</label>
<label><input type="checkbox" data-layer="fun" checked style="accent-color:#66bb6a;"> 🎉 Fun (4)</label> <label><input type="checkbox" data-layer="fun" checked style="accent-color:#66bb6a;"> 🎉 Fun (4)</label>
<label><input type="checkbox" data-layer="sight" checked style="accent-color:#7e57c2;"> 🏛️ Sight (1)</label> <label><input type="checkbox" data-layer="sight" checked style="accent-color:#7e57c2;"> 🏛️ Sight (1)</label>
</div> </div>
<div style="margin-top:8px;font-size:11px;color:#aaa;">📍 Karten-Zentrum: Hotel</div> <div style="margin-top:8px;font-size:11px;color:var(--text-muted);">📍 Karten-Zentrum: Hotel</div>
</div>
`; `;
L.DomEvent.disableClickPropagation(div);
L.DomEvent.disableScrollPropagation(div);
// Layer-Toggle Handler // Layer-Toggle Handler
setTimeout(() => { setTimeout(() => {
div.querySelectorAll('input[data-layer]').forEach(cb => { div.querySelectorAll('input[data-layer]').forEach(cb => {