102 lines
2.9 KiB
Markdown
102 lines
2.9 KiB
Markdown
# MMM-CombinedMap
|
|
|
|
A MagicMirror² module that displays a combined map with:
|
|
- **Rain radar** from DWD (Deutscher Wetterdienst) with animated history and forecast
|
|
- **Traffic layer** from TomTom showing real-time traffic flow and incidents
|
|
|
|
All on a sleek dark-themed Leaflet map.
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
1. Navigate to your MagicMirror modules folder:
|
|
```bash
|
|
cd ~/MagicMirror/modules
|
|
```
|
|
|
|
2. Clone this repository:
|
|
```bash
|
|
git clone https://gitea.olex.me/clawd/MMM-CombinedMap.git
|
|
```
|
|
|
|
3. No npm install needed - dependencies are loaded from CDN.
|
|
|
|
## Configuration
|
|
|
|
Add the module to your `config/config.js`:
|
|
|
|
```js
|
|
{
|
|
module: "MMM-CombinedMap",
|
|
position: "bottom_right",
|
|
config: {
|
|
lat: 49.8833, // Latitude of map center
|
|
lng: 8.8333, // Longitude of map center
|
|
zoom: 7, // Zoom level (1-18)
|
|
width: "300px", // Map width
|
|
height: "300px", // Map height
|
|
|
|
showMarker: true, // Show a marker at center
|
|
markerColor: "#3388ff", // Marker color
|
|
|
|
showTraffic: true, // Enable traffic layer
|
|
showRadar: true, // Enable rain radar layer
|
|
|
|
tomtomApiKey: "", // Your TomTom API key (required for traffic)
|
|
|
|
animationSpeed: 500, // Radar animation speed (ms per frame)
|
|
radarOpacity: 0.7, // Rain radar opacity (0-1)
|
|
trafficOpacity: 0.7, // Traffic layer opacity (0-1)
|
|
|
|
updateInterval: 300000 // Radar refresh interval (ms), default 5 min
|
|
}
|
|
}
|
|
```
|
|
|
|
## Getting a TomTom API Key
|
|
|
|
1. Go to [developer.tomtom.com](https://developer.tomtom.com/)
|
|
2. Create a free account
|
|
3. Create a new application
|
|
4. Copy the API key
|
|
5. Free tier includes 50,000 tile requests per day
|
|
|
|
## How It Works
|
|
|
|
### Base Map
|
|
Uses CartoDB Dark Matter tiles - a dark-themed OpenStreetMap-based tileset perfect for MagicMirror displays.
|
|
|
|
### Traffic Layer
|
|
TomTom provides two overlay layers:
|
|
- **Traffic Flow**: Color-coded roads (green = free, yellow = moderate, red = heavy, dark red = blocked)
|
|
- **Traffic Incidents**: Icons for accidents, roadwork, closures
|
|
|
|
### Rain Radar
|
|
DWD (German Weather Service) provides free WMS radar data:
|
|
- **Past 2 hours**: Actual radar observations (every 5 minutes)
|
|
- **Next 2 hours**: Nowcast/forecast data
|
|
|
|
The radar animates through all frames showing precipitation movement and predicted evolution.
|
|
|
|
## Timestamp Display
|
|
|
|
The timestamp overlay in the corner shows:
|
|
- **Negative values** (e.g., `-30 min`): Historical radar data
|
|
- **Now**: Current observation
|
|
- **Positive values** (e.g., `+30 min`): Forecast/nowcast - shown with blue background
|
|
|
|
## Data Sources
|
|
|
|
- **Base Map**: [CartoDB/OpenStreetMap](https://carto.com/basemaps/)
|
|
- **Traffic**: [TomTom Traffic API](https://developer.tomtom.com/traffic-api)
|
|
- **Rain Radar**: [DWD Open Data](https://www.dwd.de/DE/leistungen/opendata/opendata.html)
|
|
|
|
## License
|
|
|
|
MIT License
|
|
|
|
## Credits
|
|
|
|
Built by [James](https://gitea.olex.me/clawd) for Olex's MagicMirror setup.
|