Add configurable basemap, invert filter, radar color schemes, fix height

MMM-CombinedMap.css

@@ -9,6 +9,21 @@
   background: #1a1a1a;
 }
 
+/* Inverted basemap for dark mode */
+.mmm-combinedmap-wrapper .inverted-tiles {
+  filter: invert(1) hue-rotate(180deg) brightness(0.9) contrast(0.9);
+}
+
+/* Vibrant radar colors - enhance visibility on dark backgrounds */
+.mmm-combinedmap-wrapper .radar-vibrant {
+  filter: saturate(1.5) brightness(1.2);
+}
+
+/* Bright radar for maximum visibility */
+.mmm-combinedmap-wrapper .radar-bright {
+  filter: saturate(2) brightness(1.4) contrast(1.1);
+}
+
 /* Hide Leaflet attribution */
 .mmm-combinedmap-wrapper .leaflet-control-attribution {
   display: none;

MMM-CombinedMap.js

@@ -5,12 +5,16 @@ Module.register("MMM-CombinedMap", {
     lng: 8.8505,
     zoom: 7,
     width: "450px",
-    height: "300px",
+    height: "580px",
     
     // Marker
     showMarker: true,
     markerColor: "#00cc00",
     
+    // Base map style: "dark", "grey", "osm", or custom URL
+    baseMapStyle: "grey",
+    invertBasemap: true,  // Invert colors (good for dark themes)
+    
     // Layers
     showTraffic: true,
     showRadar: true,
@@ -18,6 +22,9 @@ Module.register("MMM-CombinedMap", {
     // TomTom API key (get free at developer.tomtom.com)
     tomtomApiKey: "",
     
+    // Radar styling
+    radarColorScheme: "vibrant",  // "default", "vibrant", or "bright"
+    
     // Animation settings
     animationSpeed: 800,      // ms per frame
     radarOpacity: 0.7,
@@ -92,11 +99,21 @@ Module.register("MMM-CombinedMap", {
       touchZoom: false
     }).setView([this.config.lat, this.config.lng], this.config.zoom);
     
-    // Dark base map (CartoDB Dark Matter)
+    // Base map
-    L.tileLayer("https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png", {
+    const baseMapUrls = {
+      "dark": "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
+      "grey": "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
+      "osm": "https://a.tile.openstreetmap.de/{z}/{x}/{y}.png",
+      "positron": "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png"
+    };
+    
+    const baseMapUrl = baseMapUrls[this.config.baseMapStyle] || this.config.baseMapStyle;
+    const baseLayer = L.tileLayer(baseMapUrl, {
       maxZoom: 19,
-      opacity: 1
+      opacity: 1,
-    }).addTo(this.map);
+      className: this.config.invertBasemap ? "inverted-tiles" : ""
+    });
+    baseLayer.addTo(this.map);
     
     // Traffic layer (TomTom)
     if (this.config.showTraffic && this.config.tomtomApiKey) {
@@ -254,6 +271,11 @@ Module.register("MMM-CombinedMap", {
     
     const now = new Date();
     
+    // Determine radar CSS class based on color scheme
+    const radarClass = this.config.radarColorScheme === "vibrant" ? "radar-vibrant" 
+                     : this.config.radarColorScheme === "bright" ? "radar-bright" 
+                     : "";
+    
     this.availableTimestamps.forEach((timestamp, index) => {
       const isForecast = timestamp > now;
       const timeStr = timestamp.toISOString().replace(/\.\d{3}Z$/, ".000Z");
@@ -267,7 +289,8 @@ Module.register("MMM-CombinedMap", {
         time: timeStr,
         styles: "niederschlagsradar",
         version: "1.3.0",
-        crs: L.CRS.EPSG3857
+        crs: L.CRS.EPSG3857,
+        className: radarClass
       });
       
       layer.addTo(this.map);