Add DWD precipitation color legend in top-right corner

MMM-CombinedMap.js

@@ -24,6 +24,7 @@ Module.register("MMM-CombinedMap", {
     
     // Radar styling
     radarColorScheme: "vibrant",  // "default", "vibrant", or "bright"
+    showLegend: true,             // Show precipitation color legend
     
     // Animation settings
     animationSpeed: 800,      // ms per frame
@@ -129,6 +130,11 @@ Module.register("MMM-CombinedMap", {
       setTimeout(() => this.fetchRadarCapabilities(), this.config.startupDelay);
     }
     
+    // Radar legend
+    if (this.config.showRadar && this.config.showLegend) {
+      this.addRadarLegend();
+    }
+    
     // Marker
     if (this.config.showMarker) {
       const markerIcon = L.divIcon({
@@ -455,6 +461,22 @@ Module.register("MMM-CombinedMap", {
     
     return timeline;
   },
+  
+  addRadarLegend: function() {
+    const container = document.getElementById("mmm-combinedmap-" + this.identifier);
+    if (!container) return;
+    
+    const legend = document.createElement("div");
+    legend.className = "radar-legend";
+    
+    // DWD provides a legend graphic via WMS
+    const legendImg = document.createElement("img");
+    legendImg.src = "https://maps.dwd.de/geoserver/dwd/ows?service=WMS&version=1.3.0&request=GetLegendGraphic&format=image/png&width=15&height=15&layer=Niederschlagsradar";
+    legendImg.alt = "Precipitation legend";
+    
+    legend.appendChild(legendImg);
+    container.appendChild(legend);
+  },
 
   refreshRadar: function() {
     Log.info("MMM-CombinedMap: Refreshing radar data");