Revise README for Berlin Live Maps project
Updated README to enhance project description and features.
This commit is contained in:
Serverlele30 authored and GitHub committed
1 parent
3c31a68af4
commit
90487d123a
1 file changed
+278
-3
@@ -1,4 +1,279 @@
|
||||
# Berlin-Live-Maps
|
||||
VBB Live Maps ist eine interaktive Live-Karte, die Fahrzeuge des Berliner Nahverkehrs (z. B. Busse, U-Bahnen, S-Bahnen etc.) in Echtzeit anzeigt.
|
||||
# 🚇 Berlin Live Maps
|
||||
|
||||
[https://berlin-live-maps.netlify.app/](https://berlin-live-maps.netlify.app/)
|
||||
<div align="center">
|
||||
|
||||
|
||||
|
||||
**Echtzeit-Tracking des Berliner Nahverkehrs auf einer interaktiven Karte**
|
||||
|
||||
[](https://berlin-live-maps.netlify.app/)
|
||||
[](https://v6.vbb.transport.rest/)
|
||||
[](https://opensource.org/licenses/MIT)
|
||||
[](https://github.com/Serverlele30/berlin-live-maps)
|
||||
|
||||
[🚀 Live Demo](https://berlin-live-maps.netlify.app/) • [📖 Dokumentation](#-features) • [🐛 Issues](https://github.com/Serverlele30/berlin-live-maps/issues)
|
||||
|
||||
<img src="https://serverlele.synology.me/image.php?id=14" alt="Berlin Live Maps Screenshot" width="600px">
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Ü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
|
||||
|
||||
<div align="center">
|
||||
|
||||
| Technologie | Verwendung | Version |
|
||||
|-------------|------------|---------|
|
||||
|  | Interactive Maps | 1.9.4 |
|
||||
|  | Core Logic | ES6+ |
|
||||
|  | Styling | CSS3 |
|
||||
|  | Structure | HTML5 |
|
||||
|
||||
</div>
|
||||
|
||||
**APIs & Datenquellen:**
|
||||
- [VBB API v6](https://v6.vbb.transport.rest/) - Verkehrsdaten
|
||||
- [OpenStreetMap](https://www.openstreetmap.org/) - Kartenmaterial (Light)
|
||||
- [CartoDB](https://carto.com/) - Kartenmaterial (Dark)
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### Voraussetzungen
|
||||
|
||||
- Moderner Webbrowser (Chrome, Firefox, Safari, Edge)
|
||||
- Optional: Lokaler Webserver für Entwicklung
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
# 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](https://berlin-live-maps.netlify.app/).
|
||||
|
||||
---
|
||||
|
||||
## 📁 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`:
|
||||
|
||||
```javascript
|
||||
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`:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--accent: #0066ff; /* Hauptfarbe */
|
||||
--bg-primary: #ffffff; /* Hintergrund */
|
||||
/* ... */
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
--accent: #4a9eff; /* Hauptfarbe (Dark) */
|
||||
--bg-primary: #1a1a1a; /* Hintergrund (Dark) */
|
||||
/* ... */
|
||||
}
|
||||
```
|
||||
|
||||
### Update-Intervall ändern
|
||||
|
||||
```javascript
|
||||
// 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](https://github.com/Serverlele30/berlin-live-maps/issues) an oder [erstelle ein neues](https://github.com/Serverlele30/berlin-live-maps/issues/new).
|
||||
|
||||
---
|
||||
|
||||
## 📝 Lizenz
|
||||
|
||||
Dieses Projekt ist unter der **MIT License** lizenziert - siehe [LICENSE](LICENSE) für Details.
|
||||
|
||||
```
|
||||
MIT License - Copyright (c) 2024 Serverlele30
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🙏 Credits & Danksagungen
|
||||
|
||||
- **[VBB](https://www.vbb.de/)** - Verkehrsverbund Berlin-Brandenburg
|
||||
- **[VBB REST API](https://v6.vbb.transport.rest/)** - Echtzeit-Verkehrsdaten
|
||||
- **[Leaflet.js](https://leafletjs.com/)** - Open-Source Mapping Library
|
||||
- **[OpenStreetMap](https://www.openstreetmap.org/)** - Freie Kartendaten
|
||||
- **[CartoDB](https://carto.com/)** - Dark Mode Tiles
|
||||
|
||||
---
|
||||
|
||||
## 📬 Kontakt & Support
|
||||
|
||||
- 🐛 **Bug Reports:** [GitHub Issues](https://github.com/Serverlele30/berlin-live-maps/issues)
|
||||
- 💡 **Feature Requests:** [GitHub Discussions](https://github.com/Serverlele30/berlin-live-maps/discussions)
|
||||
- **GitHub:** [@Serverlele30](https://github.com/Serverlele30)
|
||||
|
||||
---
|
||||
|
||||
<div align="center">
|
||||
|
||||
### Made with ❤️ in Berlin
|
||||
|
||||
[](https://github.com/Serverlele30/berlin-live-maps/stargazers)
|
||||
[](https://github.com/Serverlele30/berlin-live-maps/network/members)
|
||||
[](https://github.com/Serverlele30/berlin-live-maps/watchers)
|
||||
|
||||
**⭐ Wenn dir das Projekt gefällt, gib ihm einen Stern!**
|
||||
|
||||
[🔝 Nach oben](#-berlin-live-maps)
|
||||
|
||||
</div>
|
||||
Reference in new issue
Block a user