Add DWD precipitation color legend in top-right corner
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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({
|
||||
@@ -456,6 +462,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");
|
||||
this.fetchRadarCapabilities();
|
||||
|
||||
Reference in New Issue
Block a user