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_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 += '';
+ // "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