--- a/client/src/components/map/layers.js	Tue May 21 16:11:44 2019 +0200
+++ b/client/src/components/map/layers.js	Tue May 21 16:12:12 2019 +0200
@@ -470,9 +470,41 @@
             },
             source,
             false,
-            async f => {
+            async (f, store) => {
               if (f.get("fa_critical")) {
-                f.set("fa_data", []);
+                // look for fairway availability data in store. If present and
+                // not older than 15 min use it or fetch new data and store it.
+                let data = store.getters[
+                  "fairwayavailability/fwLNWLOverviewData"
+                ](f);
+                if (
+                  data &&
+                  new Date().getTime() - data.createdAt.getTime() < 900000
+                ) {
+                  f.set("fa_data", data.data);
+                } else {
+                  let from = new Date();
+                  from.setDate(from.getDate() - 30);
+                  let to = new Date();
+                  data = await store.dispatch(
+                    "fairwayavailability/loadAvailableFairwayDepthLNWL",
+                    {
+                      feature: f,
+                      from: from.toISOString().split("T")[0],
+                      to: to.toISOString().split("T")[0],
+                      frequency: "monthly",
+                      LOS: 3
+                    }
+                  );
+                  if (data) {
+                    store.commit("fairwayavailability/addFwLNWLOverviewData", {
+                      feature: f,
+                      data,
+                      createdAt: new Date()
+                    });
+                    f.set("fa_data", data);
+                  }
+                }
               }
               return f;
             }

--- a/client/src/store/fairwayavailability.js	Tue May 21 16:11:44 2019 +0200
+++ b/client/src/store/fairwayavailability.js	Tue May 21 16:12:12 2019 +0200
@@ -34,6 +34,7 @@
     breadthlimit2: null,
     fwData: null,
     fwLNWLData: null,
+    fwLNWLOverviewData: [],
     legend: null,
     LOS: 3
   };
@@ -43,6 +44,13 @@
   init,
   namespaced: true,
   state: init(),
+  getters: {
+    fwLNWLOverviewData: state => feature => {
+      return state.fwLNWLOverviewData.find(
+        d => d.feature.get("id") === feature.get("id")
+      );
+    }
+  },
   mutations: {
     type: (state, type) => {
       state.type = type;
@@ -77,6 +85,14 @@
     setFwData: (state, fwData) => {
       state.fwData = fwData;
     },
+    addFwLNWLOverviewData: (state, data) => {
+      let existingIndex = state.fwLNWLOverviewData.findIndex(
+        d => d.feature.get("id") === data.feature.get("id")
+      );
+      if (existingIndex !== -1)
+        state.fwLNWLOverviewData.splice(existingIndex, 1);
+      state.fwLNWLOverviewData.push(data);
+    },
     setLegend: (state, header) => {
       const headerEntries = header.split(",");
       headerEntries.shift();
@@ -136,6 +152,29 @@
             reject(error);
           });
       });
+    },
+    loadAvailableFairwayDepthLNWL: (context, options) => {
+      return new Promise((resolve, reject) => {
+        const { feature, from, to, frequency, LOS } = options;
+        let name =
+          feature.constructor.name === "Feature"
+            ? feature.get("objnam")
+            : feature.properties.name;
+        const start = encodeURIComponent("00:00:00+00:00");
+        const end = encodeURIComponent("23:59:59+00:00");
+        const URL = `/data/bottleneck/availability/${encodeURIComponent(
+          name
+        )}?from=${from}T${start}&to=${to}T${end}&mode=${frequency}&los=${LOS}`;
+        HTTP.get(URL, {
+          headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+        })
+          .then(response => {
+            resolve(response.data);
+          })
+          .catch(error => {
+            reject(error);
+          });
+      });
     }
   }
 };