🚇 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:
- 🍴 Fork das Repository
- 🌿 Branch erstellen (
git checkout -b feature/NeuesFeature) - ✏️ Commit deine Änderungen (
git commit -m 'Add: Neues Feature') - 📤 Push zum Branch (
git push origin feature/NeuesFeature) - 🔄 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.
📝 Lizenz
Dieses Projekt ist unter der MIT License lizenziert - siehe LICENSE für Details.
MIT License - Copyright (c) 2024 Serverlele30
🙏 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
