diff --git a/MMM-CombinedMap.css b/MMM-CombinedMap.css index da4d9a2..7c03f24 100644 --- a/MMM-CombinedMap.css +++ b/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; diff --git a/MMM-CombinedMap.js b/MMM-CombinedMap.js index 0261697..ef28a34 100644 --- a/MMM-CombinedMap.js +++ b/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");