Tram-Linien als Radio-Buttons (eine zur Zeit sichtbar) + dickere Linien (weight 6) + Click-Handler für Leaflet-Kompatibilität
This commit is contained in:
Orfel-HermesAI-Bot
+69
-22
@@ -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 `<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
|
||||
// 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 += '<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>';
|
||||
// "Keine" Option
|
||||
html += `<label>
|
||||
<input type="radio" name="tram-select" data-tram-radio value="" checked>
|
||||
<span class="swatch" style="background:#555"></span>
|
||||
<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>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user