adjust legend with dummy data

frontend/src/Legend.vue

@@ -25,7 +25,7 @@
                     </div>
                     <div 
                         class="gradient mx-1"
-                        :style="{ backgroundImage: createStationColorramp() }"
+                        :style="{ backgroundImage: createStationColorramp(mapProperties.getTemperatureColorMap()) }"
                     ></div>
                     <div style="float:left;margin-top:5px;">   
                         {{parseInt(this.mapProperties.getTemperatureBound().max)}} °C
@@ -66,6 +66,18 @@
                         </div>
                     </template>
                 </v-checkbox>
+                <div style="margin-top:1em;">
+                    <div style="float:left;margin-top:5px;">   
+                        {{parseInt(this.mapProperties.getTemperatureBound().min)}} °C
+                    </div>
+                    <div 
+                        class="gradient mx-1"
+                        :style="{ backgroundImage: createStationColorramp(mapProperties.getMeanColorMap()) }"
+                    ></div>
+                    <div style="float:left;margin-top:5px;">   
+                        {{parseInt(this.mapProperties.getTemperatureBound().max)}} °C
+                    </div>
+                </div>
                 <div ref="legendTemperature1" id="legendTemperature1"></div>
                 <v-range-slider
                     v-model="range1"
@@ -99,6 +111,18 @@
                         </div>
                     </template>
                 </v-checkbox>
+                <div style="margin-top:1em;">
+                    <div style="float:left;margin-top:5px;">   
+                        {{parseInt(this.mapProperties.getTemperatureBound().min)}} °C
+                    </div>
+                    <div 
+                        class="gradient mx-1"
+                        :style="{ backgroundImage: createStationColorramp(mapProperties.getMeanColorMap()) }"
+                    ></div>
+                    <div style="float:left;margin-top:5px;">   
+                        {{parseInt(this.mapProperties.getTemperatureBound().max)}} °C
+                    </div>
+                </div>
                 <div ref="legendTemperature2" id="legendTemperature2"></div>
                 <v-range-slider
                     v-model="range2"
@@ -130,6 +154,20 @@
                         </div>
                     </template>
                 </v-checkbox>
+                
+                <div style="margin-top:1em;height:30px;">
+                    <div style="float:left;margin-top:5px;">   
+                        -1 °C
+                    </div>
+                    <div 
+                        class="gradient mx-1"
+                        :style="{ backgroundImage: createStationColorramp(mapProperties.getAnomalieColorMap()) }"
+                    ></div>
+                    <div style="float:left;margin-top:5px;">   
+                        3 °C
+                    </div>
+                </div>
+
             </v-card-text>
         </v-card>
 
@@ -212,9 +250,7 @@ export default class Legend extends Vue{
 
     }
 
-    private createStationColorramp(){
-        let colormap: string[] = this.mapProperties.getTemperatureColorMap();
-
+    private createStationColorramp(colormap: string[]){
         let gradientStyle = 'linear-gradient(to right, ';
         gradientStyle += colormap.join(', ');
         gradientStyle += ')';
@@ -223,10 +259,5 @@ export default class Legend extends Vue{
 
     }
 
-    private getTemperatureIcon(color:string):string{
-        return 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%23000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"   stroke="black"/></svg>';
-        //return this.mapProperties.getTemperatureIcon(color);
-    }
-
 }
 </script>

frontend/src/MapProperties.ts

@@ -12,6 +12,14 @@ export default class MapProperties{
         this.projection = projection;
     }
 
+    public getMeanColorMap(): string[]{
+        return colormap({colormap:'temperature', nshades: 20, format: 'hex', alpha: 1});
+    }
+
+    public getAnomalieColorMap(): string[]{
+        return colormap({colormap:'hot', nshades: 20, format: 'hex', alpha: 1}).reverse();
+    }
+
     public getTemperatureColorMap(): string[]{
         return colormap({colormap:'RdBu', nshades: 20, format: 'hex', alpha: 1});
     }