# 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.

![Screenshot](screenshot.png)

## 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.