This module has been developed mostly by vibe coding with an AI as I am not a real developer. If you want to take over the module and maintaine the code, please feel free to contact me. I just wanted to get a solution for myself and happy to share the result for now =)
A smart Rain & Snow Radar module for MagicMirror² using data from GERMAN weather service (DWD). Hence it is only working for areas in Germany!
It displays animated radar data (past and forecast) from the official Deutscher Wetterdienst (DWD) on an OpenLayers map.
To keep your mirror clean, the module acts smartly: It stays completely hidden during sunny weather and only pops up if rain, snow, sleet, or hail is expected at your location within your configured timeframe.
- Smart Visibility: Only shows up when precipitation is coming.
- Precipitation Detection: Automatically detects and displays whether to expect rain, snow, sleet, or hail.
- Official Data: Uses DWD WMS
dwd:Niederschlagsradarfor up to 2 hours of past measurements and 2 hours of future forecasting (Nowcast).
- Navigate into your MagicMirror
modulesfolder:cd ~/MagicMirror/modules
- Clone this repository:
git clone https://github.com/realoliwer/MMM-RainRadarDWD.git
- Restart your MagicMirror;e.g. with
pm2 restart MagicMirror.
No additional npm install is required!
To update the module to the latest version, navigate to your module folder and pull the latest changes:
- pull the changes
cd ~/MagicMirror/modules/MMM-RainRadarDWD
git pull- restart your mirror
pm2 restart MagicMirror.Add the module to your config/config.js file. All parameters are optional and will fall back to defaults if omitted. There are quite a number of configuration options available, but you only need to configure lat and lon for your location to make the module work!
Basic configuration:
{
module: "MMM-RainRadarDWD",
position: "top_right",
config: {
lat: 53.5511,
lon: 9.9937,
}
},
Configuration with all parameters and short explanation (see also table below)
{
module: "MMM-RainRadarDWD",
position: "top_right",
config: {
lat: 53.5511, // Latitude (e.g., Hamburg)
lon: 9.9937, // Longitude
// --- Visibility & Logic ---
alwaysVisible: false, // TRUE: map is always there. FALSE: pops up only if rain/snow is coming.
showIfRainWithin: 120, // Timeframe (minutes) to check for upcoming precipitation.
// --- Time Frames (DWD Limits: max 120 past, max 120 future) ---
timePast: 60, // How many minutes into the past to animate?
timeFuture: 120, // How many minutes into the future to animate?
frameStep: 10, // Minutes per frame jump (Recommended: 5 or 10)
// --- Appearance ---
width: "350px", // Module width
height: "350px", // Module height
border: "none", // e.g., "2px solid #ffffff"
zoomLevel: 9, // Map Zoom (9-10 recommended for region view)
cloudBlur: 12, // Softens radar pixels (0 = sharp grid, 2-5 = realistic clouds)
markerSymbol: "fa-home", // FontAwesome icon for your location
markerColor: "#ff0000", // Color of the center marker
// --- Custom Legend ---
showLegend: true, // Show the custom CSS color scale
legendPosition: "bottom", // Options: "top", "bottom", "left", "right"
// --- Language & Text ---
textPast: "PAST",
textNow: "NOW",
textForecast: "FORECAST",
textRainExpected: " - Rain expected:",
textSnowExpected: " - Snow expected:",
textSleetExpected: " - Sleet expected:",
textHailExpected: " - Hail expected:",
textLoading: "Loading data...",
textLight: "Light", // Legend text for light rain
textHeavy: "Heavy", // Legend text for heavy rain/hail
// --- System ---
animationSpeed: 2000, // Duration of one frame in ms (2000ms recommended for smooth fade)
updateInterval: 600000, // Check weather API every 10 minutes
logLevel: "INFO" // "NONE", "ERROR", "INFO", "DEBUG"
}
},
| Parameter | Type | Default | Description |
|---|---|---|---|
lat |
Number | 53.5511 |
Latitude of your location. |
lon |
Number | 9.9937 |
Longitude of your location. |
alwaysVisible |
Boolean | false |
If true, the map is always shown. If false, it acts smartly and only shows up when precipitation is detected. |
showIfRainWithin |
Number | 120 |
If alwaysVisible is false, the module will check if precipitation is expected within this amount of minutes. |
rainSearchRadius |
Number | 0 |
Radius in km. Performs a cross-scan (Center, North, South, East, West) to detect precipitation passing slightly off-center. 0 checks exact location only. 1-5 will check for corresponding km in each direction |
timePast |
Number | 60 |
How many minutes into the past the radar should show. Max: 120. |
timeFuture |
Number | 120 |
How many minutes into the future the forecast should show. Max: 120. |
frameStep |
Number | 10 |
The minute increments between frames. Default is 10. Minimum is 5. |
animationSpeed |
Number | 2000 |
Milliseconds per frame. 2000 is highly recommended to allow the CSS cross-fade animation to look smooth. |
width |
String | "350px" |
Width of the module container. |
height |
String | "350px" |
Height of the module container. |
border |
String | "none" |
CSS border property (e.g., "2px solid #fff"). |
zoomLevel |
Number | 9 |
Initial map zoom. (9-10 recommended for regional view). |
cloudBlur |
Number | 2 |
CSS blur applied to the radar layer. 0 shows the raw grid. 2 to 5 creates realistic, soft clouds. |
markerSymbol |
String | "fa-home" |
FontAwesome icon name for the center location marker. |
markerColor |
String | "#ff0000" |
Color of the center location marker. |
showLegend |
Boolean | true |
Show the custom CSS color scale. |
legendPosition |
String | "bottom" |
Position of the legend. Options: "top", "bottom", "left", "right". |
textPast |
String | "PAST" |
Label used for past radar frames. |
textNow |
String | "NOW" |
Label used for the current time frame. |
textForecast |
String | "FORECAST" |
Label used for future forecast frames. |
textRainExpected |
String | " - Rain expected:" |
Text appended when rain is detected. |
textSnowExpected |
String | " - Snow expected:" |
Text appended when snow is detected. |
textSleetExpected |
String | " - Sleet expected:" |
Text appended when sleet is detected. |
textHailExpected |
String | " - Hail expected:" |
Text appended when hail is detected. |
textLoading |
String | "Loading data..." |
Initial text shown while fetching DWD data. |
textLight |
String | "Light" |
Text for the lowest value on the legend. |
textHeavy |
String | "Heavy" |
Text for the highest value on the legend. |
logLevel |
String | "ERROR" |
Terminal output verbosity. Choose "NONE", "ERROR", "INFO", or "DEBUG". |
OpenLayers uses a logarithmic scale for zoom levels. Depending on your preference, set zoomLevel to: 4 - 6: Country level (e.g., all of Germany). 7 - 8: State level (Good to see incoming fronts from afar). 9 - 10: Regional level (Best balance between overview and detail. Recommended). 11 - 13: City/District level (You can see parts of your city). 14+: Street level (Not recommended, as radar pixels will become too large).
This module relies on several amazing open data sources and open-source projects. By using this module, you agree to their respective terms of use.
Weather & Radar Data: Deutscher Wetterdienst (DWD). Data provided under the Datenlizenz Deutschland - Namensnennung - Version 2.0. API Endpoint: Weather condition checks are powered by the open-source Bright Sky API. Base Map: Map tiles by CARTO, under CC BY 3.0. Data by OpenStreetMap, under ODbL. Map Engine: Powered by OpenLayers.
MIT License