Tram-Linien als Radio-Buttons (eine zur Zeit sichtbar) + dickere Linien (weight 6) + Click-Handler für Leaflet-Kompatibilität

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_2":  { color: "#F4A261", weight: 6, opacity: 0.95 },
-  "tram_4":  { color: "#E76F51", weight: 4, opacity: 0.85 },
+  "tram_4":  { color: "#E76F51", weight: 6, opacity: 0.95 },
-  "tram_7":  { color: "#E9C46A", weight: 4, opacity: 0.85 },
+  "tram_7":  { color: "#E9C46A", weight: 6, opacity: 0.95 },
-  "tram_13": { color: "#F4A261", weight: 4, opacity: 0.85 },
+  "tram_13": { color: "#F4A261", weight: 6, opacity: 0.95 },
-  "tram_17": { color: "#E76F51", weight: 4, opacity: 0.85 },
+  "tram_17": { color: "#E76F51", weight: 6, opacity: 0.95 },
-  "tram_18": { color: "#E9C46A", weight: 4, opacity: 0.85 },
+  "tram_18": { color: "#E9C46A", weight: 6, opacity: 0.95 },
-  "tram_22": { color: "#F4A261", weight: 4, opacity: 0.85 }
+  "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 `<span style="display:inline-block;background:${bg};color:${fg};padding:1px 5px;border-radius:3px;font-size:10px;font-weight:700;margin-right:3px;">${l}</span>`;
   }).join('');
-  const popupHtml = `<div class="popup-content"><h3>🚏 ${stop.name}</h3><div class="meta">Tram-Linien hier: ${lineBadges}</div><div class="desc">📍 Nähe: ${stop.near}</div><div class="desc" style="font-size:11px;color:#94a3b8;margin-top:4px;">ℹ️ Linien-Geometrien nicht dargestellt (zu dicht) — alle 5–10 Min Takt</div></div>`;
+  const popupHtml = `<div class="popup-content"><h3>🚏 ${stop.name}</h3><div class="meta">Linien hier: ${lineBadges}</div><div class="desc">📍 Nähe: ${stop.near}</div><div class="desc" style="font-size:11px;color:#94a3b8;margin-top:4px;">Takt: 5–10 Min tagsüber</div></div>`;
   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 = '<h4>🚇 ÖPNV an/aus</h4>';
+  let html = '<h4>🚇 ÖPNV</h4>';
+  // Metro: Checkboxen (mehrere gleichzeitig)
   html += '<div class="group-header">Metro</div>';
   ['metro_A','metro_B','metro_C'].forEach(key => {
     const cfg = LINES_CONFIG[key];
@@ -541,16 +540,64 @@ toggleControl.onAdd = function() {
       <strong>${num}</strong>
     </label>`;
   });
-  // Tram-Linien-Toggles entfernt — Prag-Tram-Netz zu dicht für visuelle Darstellung
+  // Tram: Radio-Buttons (eine Linie zur Zeit) — verhindert Linien-Wirrwarr
-  // Stattdessen: Linien-Badges an den Haltestellen zeigen welche Trams dort halten
+  html += '<div class="group-header">Tram <span style="font-size:9px;font-weight:400;text-transform:none;letter-spacing:0;color:#888;">(eine zur Zeit)</span></div>';
-  div.innerHTML = html;
+  // "Keine" Option
-  div.addEventListener('change', (e) => {
+  html += `<label>
-    const lineKey = e.target.dataset.line;
+    <input type="radio" name="tram-select" data-tram-radio value="" checked>
-    if (!lineKey) return;
+    <span class="swatch" style="background:#555"></span>
-    toggleLine(lineKey, e.target.checked);
+    <em style="color:#888;">keine</em>
+  </label>`;
+  // 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 += `<label>
+      <input type="radio" name="tram-select" data-tram-radio data-line="${key}">
+      <span class="swatch" style="background:${cfg.color}"></span>
+      ${num}
+    </label>`;
   });
-  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 <label> triggert die Logik zuverlässig
+  div.querySelectorAll('input[name="tram-select"]').forEach(radio => {
+    radio.addEventListener('change', () => {
+      setTramLine(radio.dataset.line || null);
+    });
+    // Fallback: click direkt auf das input-Element
+    radio.addEventListener('click', () => {
+      if (!radio.checked) {
+        radio.checked = true;
+        setTramLine(radio.dataset.line || null);
+      }
+    });
+  });
+  // Click + Touch auf Radios muss durchkommen — disableClickPropagation würde sie abfangen
+  // Stattdessen: Klicks auf inputs explizit zulassen, nur Map-Clicks blocken
   L.DomEvent.disableScrollPropagation(div);
+  div.addEventListener('click', (e) => {
+    e.stopPropagation();
+  });
+  L.DomEvent.on(div, 'mousedown touchstart dblclick', L.DomEvent.stopPropagation);
   return div;
 };
 toggleControl.addTo(map);
@@ -577,7 +624,7 @@ legend.onAdd = function() {
       🚇 Metro: <span style="color:#00B140;font-weight:700">A</span> ·
       <span style="color:#FFD700;font-weight:700">B</span> ·
       <span style="color:#E2231A;font-weight:700">C</span><br>
-      🚋 Tram: Haltestellen mit Linien-Badges<br>
+      🚋 Tram: eine Linie zur Zeit wählen (Radio)<br>
       <span style="font-size:10px;">Marker anklicken für Details</span>
     </div>
   `;