add layer visibility

frontend/src/AvgLayer.ts

+export default class AvgLayer{
+
+    
+
+}
\ No newline at end of file

frontend/src/Legend.vue

@@ -10,7 +10,7 @@
                 <v-checkbox
                     v-model="stationLayer"
                     hide-details
-                    @change="layerChanged('stationLayer')"
+                    @change="$emit('layerVisibility',$event,'stationLayer')"
                     dense
                 >
                     <template v-slot:label>
@@ -18,16 +18,17 @@
                         Wetterstationen
                     </template>
                 </v-checkbox>
-                <div>
+                <div style="margin-top:1em;">
                     <div style="float:left;margin-top:5px;">   
-                        -20 °C
+                        {{parseInt(this.mapProperties.getTemperatureBound().min)}} °C
+
                     </div>
                     <div 
                         class="gradient mx-1"
                         :style="{ backgroundImage: createStationColorramp() }"
                     ></div>
                     <div style="float:left;margin-top:5px;">   
-                        10 °C
+                        {{parseInt(this.mapProperties.getTemperatureBound().max)}} °C
                     </div>
 
                 </div>
@@ -39,7 +40,7 @@
                     :max="daterange[1]"
                     thumb-label="always"
                     thumb-size="29px"
-                    style="margin-top:4em;margin-bottom:-25px;"
+                    style="margin-top:5em;margin-bottom:-25px;"
                     dense
                     @change="$emit('stationUpdate', $event)"
                 >
@@ -153,6 +154,7 @@ import {Vue, Ref, Component, Emit, Prop } from 'vue-property-decorator';
 import MapProperties from './MapProperties';
 import { TemperatureSeries } from './StationLayer';
 import TemperatureLegendChart from './TemperatureLegendChart';
+import StationLayer from './StationLayer';
 
 @Component({})
 export default class Legend extends Vue{
@@ -161,7 +163,7 @@ export default class Legend extends Vue{
     private layer2: boolean = true;
     private stationLayer: boolean = true;
     private anomalieLayer: boolean = true;
-    private daterange: number[] = [1940, 2020];
+    private daterange: number[] = [1949, 2020];
     private range1: number[] = [1960, 1990];
     private range2: number[] = [1991, 2020];
     private stationYear: number = 1990;

frontend/src/MapProperties.ts

@@ -5,6 +5,7 @@ export default class MapProperties{
 
     private map: Map;
     private projection: string;
+    private temperatureBounds: {min: number, max: number} = {min: 0, max: 0}; //min/max of all station temperature, expect for colormap
 
     constructor(map:Map, projection: string){
         this.map = map;
@@ -20,6 +21,14 @@ export default class MapProperties{
         return icon.replace("%color%", color.replace("#", "%23"));
     }
 
+    public setTemperatureBound(bound: {min: number, max: number}):void{
+        this.temperatureBounds = bound;
+    }
+
+    public getTemperatureBound():{min: number, max: number}{
+        return this.temperatureBounds;
+    }
+
     public getZoomLevel():number{
         return this.map.getView().getZoom();
     }
@@ -28,4 +37,5 @@ export default class MapProperties{
         return this.projection;
     }
 
+
 }
\ No newline at end of file

frontend/src/StationLayer.ts

@@ -4,7 +4,6 @@ import GeoJSON from 'ol/format/GeoJSON';
 import {Circle as CircleStyle, Fill, Stroke, Style, Text, Icon} from 'ol/style';
 import MapProperties from './MapProperties';
 import colormap from 'colormap';
-import { timeout } from 'd3-timer';
 
 export interface TemperatureSeries{
     date: number;
@@ -45,14 +44,16 @@ export default class StationLayer{
                             if(feature.get(element)<this.allTemperatureBounds.min){
                                 this.allTemperatureBounds.min = feature.get(element);
                             }else if(feature.get(element)>this.allTemperatureBounds.max){
-                                this.allTemperatureBounds.max = feature.get(element);
+                                this.allTemperatureBounds.max = feature.get(element) + 2;
                             }
                         }
 
                     });
                 });
+
+                this.mapProperties.setTemperatureBound(this.allTemperatureBounds);
             }
-                        
+                       
         });
 
         
@@ -93,7 +94,7 @@ export default class StationLayer{
             image: new Icon({
                 crossOrigin: 'anonymous',
                 imgSize: [24, 24],
-                scale: this.mapProperties.getZoomLevel() * 0.1,
+                scale: this.mapProperties.getZoomLevel() * 0.15,
                 src: this.mapProperties.getTemperatureIcon(iconColor)
               })
         });

frontend/src/WeatherMap.vue

@@ -2,7 +2,7 @@
 <template>
     <div id="weatherContainer">
         
-        <Legend id="legend" @stationUpdate="stationupdate" :mapProperties="mapProperties"></Legend>
+        <Legend id="legend" @stationUpdate="stationupdate" @layerVisibility="layerVisibility" :mapProperties="mapProperties"></Legend>
         
         <div ref="weathermap" id="weathermap" />
 
@@ -80,7 +80,7 @@
 </style>
 
 <script lang="ts">
-import {Vue, Ref, Component } from 'vue-property-decorator';
+import {Vue, Ref, Component, Watch } from 'vue-property-decorator';
 import View from 'ol/View';
 import Map from 'ol/Map';
 import OSM from 'ol/source/OSM';
@@ -126,8 +126,8 @@ export default class WeatherMap extends Vue{
                 })
             ],
             view: new View({
-                zoom: 6.45,
-                center: fromLonLat([11, 51.3]),
+                zoom: 6.49,
+                center: fromLonLat([4.0, 51.3]),
                 constrainResolution: true,
                 projection: this.projection
             }),
@@ -135,8 +135,7 @@ export default class WeatherMap extends Vue{
         });
 
         this.mapProperties = new MapProperties(this.map, this.projection);
-               
-
+        
         this.appendStationLayer();
 
         this.map.on('click', (evt) => {
@@ -182,6 +181,14 @@ export default class WeatherMap extends Vue{
         this.stationLayer.newYear(event); 
     }
 
+    protected layerVisibility(isVisible: boolean, layer:string):void{
+        //this.stationLayer.getLayer().setVisible(this.visibleLayers.has(StationLayer.layerName));
+        if(layer=='stationLayer'){
+            this.stationLayer.getLayer().setVisible(isVisible);
+        }
+    }
+    
+
 };
 </script>