--- a/client/src/components/layers/Layers.vue	Fri May 24 09:40:43 2019 +0200
+++ b/client/src/components/layers/Layers.vue	Fri May 24 09:51:04 2019 +0200
@@ -33,6 +33,7 @@
         <Layerselect layerId="DIFFERENCES" />
         <Layerselect layerId="BOTTLENECKSTATUS" />
         <Layerselect layerId="BOTTLENECKFAIRWAYAVAILABILITY" />
+        <Layerselect layerId="DATAAVAILABILITY" />
         <Layerselect layerId="DISTANCEMARKS" />
         <Layerselect layerId="DISTANCEMARKSAXIS" />
         <Layerselect layerId="GAUGES" />

--- a/client/src/components/layers/Layerselect.vue	Fri May 24 09:40:43 2019 +0200
+++ b/client/src/components/layers/Layerselect.vue	Fri May 24 09:51:04 2019 +0200
@@ -72,6 +72,13 @@
         map
           .getLayer(this.layerId)
           .setVisible(!map.getLayer(this.layerId).getVisible());
+        if (
+          this.layerId === "GAUGES" ||
+          this.layerId === "STRETCHES" ||
+          this.layerId === "BOTTLENECKS"
+        ) {
+          map.getLayer("DATAAVAILABILITY").changed();
+        }
       } else {
         this.openLayersMaps.forEach(m => {
           m.getLayer(this.layerId).setVisible(

--- a/client/src/components/map/layers.js	Fri May 24 09:40:43 2019 +0200
+++ b/client/src/components/map/layers.js	Fri May 24 09:51:04 2019 +0200
@@ -518,6 +518,30 @@
           source
         });
       })(),
+      (function() {
+        const source = new VectorSource({ strategy: bboxStrategy });
+        source.setLoader(
+          buildVectorLoader(
+            {
+              featureTypes: ["bottlenecks_geoserver", "gauges_geoserver", "stretches_geoserver"],
+            },
+            source,
+            true,
+            async (f, store) => {
+              return f
+            }
+          )
+        );
+        return new VectorLayer({
+          id: "DATAAVAILABILITY",
+          label: "Data Availability/Accuracy",
+          forLegendStyle: { point: true, resolution: 16 },
+          visible: false,
+          zIndex: 1,
+          style: styles.dataAvailability,
+          source
+        });
+      })(),
       new ImageLayer({
         id: "DISTANCEMARKS",
         label: "Distance Marks",

--- a/client/src/components/map/styles.js	Fri May 24 09:40:43 2019 +0200
+++ b/client/src/components/map/styles.js	Fri May 24 09:51:04 2019 +0200
@@ -1,6 +1,7 @@
 import { Icon, Stroke, Style, Fill, Text, Circle } from "ol/style";
 import Point from "ol/geom/Point";
 import { getCenter } from "ol/extent";
+import store from "@/store/index";
 
 const styles = {
   blue1: new Style({
@@ -232,6 +233,67 @@
     }
     return s;
   },
+  dataAvailability(feature, resolution, isLegend) {
+    let s = [];
+    if (isLegend) {
+      s.push(
+        new Style({
+          image: new Icon({
+            src: require("@/assets/da-diagram.png"),
+            anchor: [0.5, 0.5],
+            scale: 1
+          })
+        })
+      );
+    } else {
+      // TODO: Get information from feature and check the ranges according to #423, #424, #425
+      let colorWaterlevel;
+      let colorComparison = "lime";
+      let colorAccuracy = "yellow";
+      let fa = feature.get("forecast_accuracy");
+      let fa1d = feature.get("forecast_accuracy_1d");
+      if (fa === null || fa === undefined) {
+        colorWaterlevel = "white";
+      } else if (fa < 15 && fa1d < 15) {
+        colorWaterlevel = "lime";
+      } else if (fa > 15 && fa1d < 15) {
+        colorWaterlevel = "yellow";
+      } else if (fa1d > 15) {
+        colorWaterlevel = "red";
+      }
+      let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='white'/>`;
+      let waterlevel = `<polyline points="16,0 24,16 16,32 8,16 16,0" stroke='grey' stroke-width='1' fill='${colorWaterlevel}'/>`;
+      let comparison = `<polyline points="24,16 32,32 16,32 24,16" stroke='grey' stroke-width='1' fill='${colorComparison}'/>`;
+      let accuracy = `<polyline points="8,16 16,32 0,32 8,16" stroke='grey' stroke-width='1' fill='${colorAccuracy}'/>`;
+      let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g>${frame}${waterlevel}${comparison}${accuracy}</g></svg>`;
+      let maps = store.state.map.openLayersMaps;
+      let geom = feature.getGeometry();
+      if (!(geom instanceof Point)) {
+        geom = new Point(getCenter(feature.getGeometry().getExtent()));
+      }
+      maps.forEach(m => {
+        if (
+          (m.getLayer("GAUGES").getVisible() &&
+            feature.getId().indexOf("gauges") > -1) ||
+          (m.getLayer("STRETCHES").getVisible() &&
+            feature.getId().indexOf("stretches") > -1) ||
+          (m.getLayer("BOTTLENECKS").getVisible() &&
+            feature.getId().indexOf("bottlenecks") > -1)
+        ) {
+          s.push(
+            new Style({
+              geometry: geom,
+              image: new Icon({
+                src: svg,
+                anchor: [-0.5, 1]
+              })
+            })
+          );
+        }
+      });
+    }
+    return s;
+  },
   dma(feature, resolution) {
     if (resolution < 10) {
       var s = styles.circleBlue;