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:

   cd ~/MagicMirror/modules
   

2. Clone this repository:

   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:

{
  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
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
• Traffic: TomTom Traffic API
• Rain Radar: DWD Open Data

License

MIT License

Credits

Built by James for Olex's MagicMirror setup.