diff --git a/tourenplan-mit-tram.html b/tourenplan-mit-tram.html index 91f2e1e..4b5acf8 100644 --- a/tourenplan-mit-tram.html +++ b/tourenplan-mit-tram.html @@ -380,13 +380,13 @@ const LINES_CONFIG = { "metro_A": { color: "#00B140", weight: 7, opacity: 0.95 }, "metro_B": { color: "#FFD700", weight: 7, opacity: 0.95 }, "metro_C": { color: "#E2231A", weight: 7, opacity: 0.95 }, - "tram_2": { color: "#F4A261", weight: 4, opacity: 0.85 }, - "tram_4": { color: "#E76F51", weight: 4, opacity: 0.85 }, - "tram_7": { color: "#E9C46A", weight: 4, opacity: 0.85 }, - "tram_13": { color: "#F4A261", weight: 4, opacity: 0.85 }, - "tram_17": { color: "#E76F51", weight: 4, opacity: 0.85 }, - "tram_18": { color: "#E9C46A", weight: 4, opacity: 0.85 }, - "tram_22": { color: "#F4A261", weight: 4, opacity: 0.85 } + "tram_2": { color: "#F4A261", weight: 6, opacity: 0.95 }, + "tram_4": { color: "#E76F51", weight: 6, opacity: 0.95 }, + "tram_7": { color: "#E9C46A", weight: 6, opacity: 0.95 }, + "tram_13": { color: "#F4A261", weight: 6, opacity: 0.95 }, + "tram_17": { color: "#E76F51", weight: 6, opacity: 0.95 }, + "tram_18": { color: "#E9C46A", weight: 6, opacity: 0.95 }, + "tram_22": { color: "#F4A261", weight: 6, opacity: 0.95 } }; const LINES = { @@ -458,9 +458,6 @@ locations.forEach(loc => { const lineLayers = {}; function renderLine(lineKey, color, weight, opacity) { - // Tram-Linien-Geometrien sind deaktiviert — Prag-Tram-Netz zu dicht, einzelne Linien nicht lesbar - // Stattdessen zeigen wir die Haltestellen mit Linien-Badges (siehe IMPORTANT_STOPS) - if (lineKey.startsWith('tram_')) return null; const coords = LINES[lineKey]; if (!coords) return null; const shadow = L.polyline(coords, { @@ -496,7 +493,8 @@ function toggleLine(lineKey, visible) { removeLine(lineKey); } } -// Initial: nur Metro-Linien rendern (Tram-Linien standardmäßig AUS — Prag-Tram-Netz ist zu dicht für JGA-Übersicht) +// Initial: nur Metro-Linien rendern. Tram-Linien werden per Radio-Button einzeln ausgewählt +// (eine zur Zeit, damit man eine saubere Tram-Route von Anfang bis Ende verfolgen kann) Object.entries(LINES_CONFIG).forEach(([key, cfg]) => { if (key.startsWith('metro_')) { renderLine(key, cfg.color, cfg.weight, cfg.opacity); @@ -514,7 +512,7 @@ IMPORTANT_STOPS.forEach(stop => { const fg = isMetro && l === 'B' ? '#1a1a1a' : 'white'; return `${l}`; }).join(''); - const popupHtml = ``; + const popupHtml = ``; stopMarker.bindPopup(popupHtml, {className: 'tram-popup'}); const labelMarker = L.marker([stop.lat, stop.lon], { icon: L.divIcon({ @@ -530,7 +528,8 @@ IMPORTANT_STOPS.forEach(stop => { const toggleControl = L.control({ position: 'topright' }); toggleControl.onAdd = function() { const div = L.DomUtil.create('div', 'lines-toggle'); - let html = '

🚇 ÖPNV an/aus

'; + let html = '

🚇 ÖPNV

'; + // Metro: Checkboxen (mehrere gleichzeitig) html += '
Metro
'; ['metro_A','metro_B','metro_C'].forEach(key => { const cfg = LINES_CONFIG[key]; @@ -541,16 +540,64 @@ toggleControl.onAdd = function() { ${num} `; }); - // Tram-Linien-Toggles entfernt — Prag-Tram-Netz zu dicht für visuelle Darstellung - // Stattdessen: Linien-Badges an den Haltestellen zeigen welche Trams dort halten - div.innerHTML = html; - div.addEventListener('change', (e) => { - const lineKey = e.target.dataset.line; - if (!lineKey) return; - toggleLine(lineKey, e.target.checked); + // Tram: Radio-Buttons (eine Linie zur Zeit) — verhindert Linien-Wirrwarr + html += '
Tram (eine zur Zeit)
'; + // "Keine" Option + html += ``; + // Alle Tram-Linien sortiert + Object.keys(LINES_CONFIG).filter(k => k.startsWith('tram_')).sort((a,b) => parseInt(a.split('_')[1])-parseInt(b.split('_')[1])).forEach(key => { + const cfg = LINES_CONFIG[key]; + const num = key.split('_')[1]; + html += ``; }); - L.DomEvent.disableClickPropagation(div); + div.innerHTML = html; + + // Helper: Tram-Linie umschalten + function setTramLine(newKey) { + Object.keys(lineLayers).forEach(k => { + if (k.startsWith('tram_')) removeLine(k); + }); + if (newKey) { + const cfg = LINES_CONFIG[newKey]; + renderLine(newKey, cfg.color, cfg.weight, cfg.opacity); + } + } + + // Metro-Checkboxen + div.addEventListener('change', (e) => { + if (e.target.dataset.line && e.target.type === 'checkbox') { + toggleLine(e.target.dataset.line, e.target.checked); + } + }); + + // Tram-Radios — click auf das