Berlin-Live-Maps/README.md

🚇 Berlin Live Maps

Echtzeit-Tracking des Berliner Nahverkehrs auf einer interaktiven Karte

🚀 Live Demo • 📖 Dokumentation • 🐛 Issues

---

🎯 Über das Projekt

Berlin Live Maps visualisiert den Berliner Nahverkehr in Echtzeit auf einer interaktiven Karte. Verfolge Busse, U-Bahnen, S-Bahnen, Straßenbahnen und Fähren live und erhalte aktuelle Abfahrtsinformationen von den wichtigsten Bahnhöfen Berlins.

🌟 Highlights

• 🔴 Live-Tracking von über 100 Fahrzeugen gleichzeitig
• 🚉 6 Hauptbahnhöfe mit Echtzeit-Abfahrten
• 🌓 Dark Mode mit automatischer Kartenanpassung
• 📱 Responsive Design für alle Geräte
• 📍 Geolokalisierung mit Standort-Marker
• ⚡ Keine Installation nötig - läuft direkt im Browser

---

✨ Features

🚌 Live-Tracking

• Automatische Updates alle 30 Sekunden
• Farbcodierte Linien nach offiziellen VBB-Designrichtlinien
• Emoji-Symbole für jede Verkehrsart
  • 🚌 Bus
  • 🚎 Straßenbahn
  • 🚉 U-Bahn
  • 🚋 S-Bahn
  • 🛥️ Fähre
• Interaktive Popups mit Details zu jedem Fahrzeug

🚉 Bahnhofs-Informationen

Die App zeigt Live-Daten von 6 wichtigen Berliner Bahnhöfen:

Bahnhof	VBB-ID	Koordinaten
🚉 Zoologischer Garten	900023201	52.5069, 13.3326
🚉 Alexanderplatz	900100003	52.5215, 13.4115
🚉 Gesundbrunnen	900007102	52.5483, 13.3889
🚉 Spandau	900029101	52.5341, 13.1977
🚉 Südkreuz	900058101	52.4752, 13.3653
🚉 Ostbahnhof	900100004	52.5100, 13.4340

Features:

• ⏱️ Abfahrtszeiten in Echtzeit
• ⚠️ Verspätungsanzeigen
• 📍 Pulsierende Marker für bessere Sichtbarkeit

🎨 Design & UX

• Dark Mode 🌙

  • Automatische Umschaltung der Kartendarstellung
  • Persistente Speicherung der Einstellung
  • Optimierte Farbpalette für beide Modi

• Animations & Effects ✨

  • Pulsierende Ringe um Bahnhöfe
  • Türkiser Standort-Marker (#27E7F5)
  • Smooth Hover-Effekte
  • Glassmorphismus-Design

• Responsive 📱

  • Mobile-First Ansatz
  • Optimiert für Touch-Bedienung
  • Angepasste UI für kleine Bildschirme

---

🛠️ Tech Stack

Technologie	Verwendung	Version
	Interactive Maps	1.9.4
	Core Logic	ES6+
	Styling	CSS3
	Structure	HTML5

APIs & Datenquellen:

• VBB API v6 - Verkehrsdaten
• OpenStreetMap - Kartenmaterial (Light)
• CartoDB - Kartenmaterial (Dark)

---

🚀 Quick Start

Voraussetzungen

• Moderner Webbrowser (Chrome, Firefox, Safari, Edge)
• Optional: Lokaler Webserver für Entwicklung

Installation

# Repository klonen
git clone https://github.com/Serverlele30/berlin-live-maps.git

# In das Verzeichnis wechseln
cd berlin-live-maps

# Mit Python Server starten
python -m http.server 8000

# ODER mit Node.js
npx http-server

# Im Browser öffnen
# http://localhost:8000

Direkt verwenden

Die App benötigt keinen Build-Prozess. Öffne einfach index.html in deinem Browser oder besuche die Live Demo.

---

📁 Projektstruktur

berlin-live-maps/
│
├── 📄 index.html          # Haupt-HTML mit UI-Struktur
├── 🎨 style.css           # Styles mit CSS Variables & Dark Mode
├── ⚙️ app.js              # JavaScript Logic & API Integration
└── 📖 README.md           # Projekt-Dokumentation

---

💡 Verwendung

Dark Mode aktivieren

Klicke auf den 🌙/☀️ Button in der oberen rechten Ecke.

Bahnhofsinformationen abrufen

Klicke auf einen der 📍 Bahnhofs-Marker, um Live-Abfahrten zu sehen.

Fahrzeugdetails anzeigen

Klicke auf ein Fahrzeug-Symbol, um Linie, Typ und Richtung zu erfahren.

---

⚙️ Konfiguration

Weitere Bahnhöfe hinzufügen

Bearbeite das stations Array in app.js:

const stations = [
  { 
    name: "Mein Bahnhof", 
    id: "VBB_STATION_ID",      // Von VBB API
    coords: [52.xxxx, 13.xxxx]  // [Latitude, Longitude]
  },
  // ... weitere Bahnhöfe
];

Farben anpassen

Ändere die CSS Variables in style.css:

:root {
  --accent: #0066ff;           /* Hauptfarbe */
  --bg-primary: #ffffff;       /* Hintergrund */
  /* ... */
}

body.dark-mode {
  --accent: #4a9eff;           /* Hauptfarbe (Dark) */
  --bg-primary: #1a1a1a;       /* Hintergrund (Dark) */
  /* ... */
}

Update-Intervall ändern

// In app.js - Standard: 30 Sekunden
setInterval(loadVehicles, 30000);  // Zeit in Millisekunden

---

🤝 Contributing

Beiträge sind herzlich willkommen! Hier ist wie du helfen kannst:

1. 🍴 Fork das Repository
2. 🌿 Branch erstellen (git checkout -b feature/NeuesFeature)
3. ✏️ Commit deine Änderungen (git commit -m 'Add: Neues Feature')
4. 📤 Push zum Branch (git push origin feature/NeuesFeature)
5. 🔄 Pull Request öffnen

Entwicklungs-Guidelines

• ✅ Teste deine Änderungen in Light & Dark Mode
• ✅ Stelle sicher, dass die App responsive bleibt
• ✅ Kommentiere komplexe Code-Abschnitte
• ✅ Folge dem bestehenden Code-Stil

---

🐛 Bekannte Issues

• ⚠️ Bei >100 Fahrzeugen kann die Performance beeinträchtigt werden
• ⚠️ Geolokalisierung erfordert HTTPS (außer localhost)
• ⚠️ API Rate-Limits können zu temporären Aussetzern führen

Sieh dir die Issues an oder erstelle ein neues.

---

🙏 Credits & Danksagungen

• VBB - Verkehrsverbund Berlin-Brandenburg
• VBB REST API - Echtzeit-Verkehrsdaten
• Leaflet.js - Open-Source Mapping Library
• OpenStreetMap - Freie Kartendaten
• CartoDB - Dark Mode Tiles

---

📬 Kontakt & Support

• 🐛 Bug Reports: GitHub Issues
• 💡 Feature Requests: GitHub Discussions
• GitHub: @Serverlele30

---

Made with ❤️ in Berlin

⭐ Wenn dir das Projekt gefällt, gib ihm einen Stern!

🔝 Nach oben