Add DWD precipitation color legend in top-right corner

MMM-CombinedMap.css

@@ -156,6 +156,24 @@
   right: 0;
 }
 
+/* Radar precipitation legend */
+.radar-legend {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  padding: 4px;
+  z-index: 1000;
+}
+
+.radar-legend img {
+  display: block;
+  max-height: 120px;
+  width: auto;
+  opacity: 0.9;
+}
+
 /* Legend (optional, can be enabled) */
 .mmm-combinedmap-legend {
   position: absolute;

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");