--- a/client/src/components/map/styles.js	Fri May 31 12:20:08 2019 +0200
+++ b/client/src/components/map/styles.js	Fri May 31 12:45:30 2019 +0200
@@ -129,132 +129,132 @@
   })
 };
 
-export default {
-  stretches(feature) {
-    let style = styles.yellow2;
-    if (feature.get("highlighted")) {
-      style = styles.yellow3;
-    }
-    return style;
-  },
-  sections(feature) {
-    let style = styles.orange1;
-    if (feature.get("highlighted")) {
-      style = styles.orange2;
-    }
-    return style;
-  },
-  fwd1() {
-    return [styles.blue1, styles.textFW1];
-  },
-  fwd2() {
-    return [styles.blue2, styles.textFW2];
-  },
-  fwd3() {
-    return [styles.blue3, styles.textFW3];
-  },
-  bottleneck() {
-    return styles.yellow1;
-  },
-  bottleneckStatus(feature, resolution, isLegend) {
-    let s = [];
-    if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
-      let bnCenter = getCenter(feature.getGeometry().getExtent());
-      s.push(
-        new Style({
-          geometry: new Point(bnCenter),
-          image: new Icon({
-            src: require("@/assets/marker-bottleneck-critical.png"),
-            anchor: [0.5, 0.5],
-            scale: isLegend ? 0.5 : 1
+export default function(mapId) {
+  return {
+    stretches(feature) {
+      let style = styles.yellow2;
+      if (feature.get("highlighted")) {
+        style = styles.yellow3;
+      }
+      return style;
+    },
+    sections(feature) {
+      let style = styles.orange1;
+      if (feature.get("highlighted")) {
+        style = styles.orange2;
+      }
+      return style;
+    },
+    fwd1() {
+      return [styles.blue1, styles.textFW1];
+    },
+    fwd2() {
+      return [styles.blue2, styles.textFW2];
+    },
+    fwd3() {
+      return [styles.blue3, styles.textFW3];
+    },
+    bottleneck() {
+      return styles.yellow1;
+    },
+    bottleneckStatus(feature, resolution, isLegend) {
+      let s = [];
+      if ((feature.get("fa_critical") && resolution > 15) || isLegend) {
+        let bnCenter = getCenter(feature.getGeometry().getExtent());
+        s.push(
+          new Style({
+            geometry: new Point(bnCenter),
+            image: new Icon({
+              src: require("@/assets/marker-bottleneck-critical.png"),
+              anchor: [0.5, 0.5],
+              scale: isLegend ? 0.5 : 1
+            })
           })
-        })
-      );
-    }
-    if (feature.get("fa_critical") && !isLegend) {
-      s.push(styles.red1);
-    }
-    return s;
-  },
-  bottleneckFairwayAvailability(feature, resolution, isLegend) {
-    let s = [];
-    if (isLegend) {
-      s.push(
-        new Style({
-          image: new Icon({
-            src: require("@/assets/fa-diagram.png"),
-            anchor: [0.5, 0.5],
-            scale: 1
+        );
+      }
+      if (feature.get("fa_critical") && !isLegend) {
+        s.push(styles.red1);
+      }
+      return s;
+    },
+    bottleneckFairwayAvailability(feature, resolution, isLegend) {
+      let s = [];
+      if (isLegend) {
+        s.push(
+          new Style({
+            image: new Icon({
+              src: require("@/assets/fa-diagram.png"),
+              anchor: [0.5, 0.5],
+              scale: 1
+            })
           })
-        })
-      );
-    }
-    if (
-      feature.get("fa_critical") &&
-      feature.get("fa_data") &&
-      resolution > 15
-    ) {
-      let data = feature.get("fa_data");
-      let lnwlHeight = (80 / 100) * data.ldc;
-      let belowThresholdHeight = (80 / 100) * data.below;
-      let betweenThresholdHeight = (80 / 100) * data.between;
-      let aboveThresholdHeight = (80 / 100) * data.above;
+        );
+      }
+      if (
+        feature.get("fa_critical") &&
+        feature.get("fa_data") &&
+        resolution > 15
+      ) {
+        let data = feature.get("fa_data");
+        let lnwlHeight = (80 / 100) * data.ldc;
+        let belowThresholdHeight = (80 / 100) * data.below;
+        let betweenThresholdHeight = (80 / 100) * data.between;
+        let aboveThresholdHeight = (80 / 100) * data.above;
 
-      let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`;
-      let lnwl = `<rect x='2' y='${80 -
-        lnwlHeight +
-        2}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`;
-      let range1 = `<rect x='12' y='2' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`;
-      let range2 = `<rect x='12' y='${belowThresholdHeight +
-        2}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`;
-      let range3 = `<rect x='12' y='${80 -
-        aboveThresholdHeight +
-        2}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`;
-      let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`;
-      let bnCenter = getCenter(feature.getGeometry().getExtent());
-      s.push(
-        new Style({
-          geometry: new Point(bnCenter),
-          image: new Icon({
-            src: svg,
-            anchor: [1.2, 1.2]
+        let frame = `<rect x='0' y='0' width='32' height='84' stroke-width='0' fill='white'/>`;
+        let lnwl = `<rect x='2' y='${80 -
+          lnwlHeight +
+          2}' width='10' height='${lnwlHeight}' stroke-width='0' fill='aqua'/>`;
+        let range1 = `<rect x='12' y='2' width='18' height='${belowThresholdHeight}' stroke-width='0' fill='hotpink'/>`;
+        let range2 = `<rect x='12' y='${belowThresholdHeight +
+          2}' width='18' height='${betweenThresholdHeight}' stroke-width='0' fill='darksalmon'/>`;
+        let range3 = `<rect x='12' y='${80 -
+          aboveThresholdHeight +
+          2}' width='18' height='${aboveThresholdHeight}' stroke-width='0' fill='blue'/>`;
+        let svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='84'><g>${frame}${lnwl}${range1}${range2}${range3}</g></svg>`;
+        let bnCenter = getCenter(feature.getGeometry().getExtent());
+        s.push(
+          new Style({
+            geometry: new Point(bnCenter),
+            image: new Icon({
+              src: svg,
+              anchor: [1.2, 1.2]
+            })
           })
-        })
-      );
-    }
-    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
+        );
+      }
+      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 = classifications.gmAvailability(feature);
-      let colorComparison = classifications.forecastVsReality(feature);
-      let colorAccuracy = classifications.forecastAccuracy(feature);
-      let maps = store.state.map.openLayersMaps;
-      let geom = feature.getGeometry();
-      if (!(geom instanceof Point)) {
-        geom = new Point(getCenter(feature.getGeometry().getExtent()));
-      }
-      maps.forEach(m => {
+        );
+      } else {
+        // TODO: Get information from feature and check the ranges according to #423, #424, #425
+        let colorWaterlevel = classifications.gmAvailability(feature);
+        let colorComparison = classifications.forecastVsReality(feature);
+        let colorAccuracy = classifications.forecastAccuracy(feature);
+        let map = store.getters["map/openLayersMap"](mapId);
+        let geom = feature.getGeometry();
+        if (!(geom instanceof Point)) {
+          geom = new Point(getCenter(feature.getGeometry().getExtent()));
+        }
         if (
-          (m.getLayer("BOTTLENECKS").getVisible() &&
+          (map.getLayer("BOTTLENECKS").getVisible() &&
             feature.getId().indexOf("bottlenecks") > -1) ||
-          (m.getLayer("SECTIONS").getVisible() &&
+          (map.getLayer("SECTIONS").getVisible() &&
             feature.getId().indexOf("sections") > -1) ||
-          (m.getLayer("STRETCHES").getVisible() &&
+          (map.getLayer("STRETCHES").getVisible() &&
             feature.getId().indexOf("stretches") > -1) ||
-          (m.getLayer("GAUGES").getVisible() &&
+          (map.getLayer("GAUGES").getVisible() &&
             feature.getId().indexOf("gauges") > -1)
         ) {
           let frame = `<polyline points='16,0 32,32 0,32 16,0' stroke='grey' stroke-width='1' fill='white'/>`;
@@ -274,7 +274,7 @@
         }
 
         if (
-          m.getLayer("BOTTLENECKS").getVisible() &&
+          map.getLayer("BOTTLENECKS").getVisible() &&
           feature.getId().indexOf("bottlenecks") > -1
         ) {
           let colorUniformTriangle = classifications.surveyCurrency(feature);
@@ -290,62 +290,62 @@
             })
           );
         }
-      });
-    }
-    return s;
-  },
-  dma(feature, resolution) {
-    if (resolution < 10) {
-      var s = styles.circleBlue;
-      if (resolution < 6) {
-        s.setText(
-          new Text({
-            offsetY: 12,
+      }
+      return s;
+    },
+    dma(feature, resolution) {
+      if (resolution < 10) {
+        var s = styles.circleBlue;
+        if (resolution < 6) {
+          s.setText(
+            new Text({
+              offsetY: 12,
+              font: '10px "Open Sans", "sans-serif"',
+              fill: new Fill({
+                color: "black"
+              }),
+              text: (feature.get("hectometre") / 10).toString()
+            })
+          );
+        }
+        return s;
+      }
+      return [];
+    },
+    gauge(feature, resolution, isLegend) {
+      let waterlevel = feature.get("gm_waterlevel");
+      let text = feature.get("objname");
+      let iconColor = "white";
+      if (waterlevel) {
+        text += "\n(" + waterlevel + " cm)";
+        let refWaterlevels = JSON.parse(feature.get("reference_water_levels"));
+        if (waterlevel < refWaterlevels.LDC) iconColor = "brown";
+        if (waterlevel > refWaterlevels.LDC && waterlevel < refWaterlevels.HDC)
+          iconColor = "blue";
+        if (waterlevel > refWaterlevels.HDC) iconColor = "red";
+      }
+
+      return [
+        new Style({
+          image: new Icon({
+            src: require("@/assets/marker-gauge-" + iconColor + ".png"),
+            anchor: [0.5, isLegend ? 0.5 : 1],
+            scale: isLegend ? 0.5 : 1
+          }),
+          text: new Text({
             font: '10px "Open Sans", "sans-serif"',
+            offsetY: 15,
             fill: new Fill({
               color: "black"
             }),
-            text: (feature.get("hectometre") / 10).toString()
+            backgroundFill: new Fill({
+              color: "rgba(255, 255, 255, 0.7)"
+            }),
+            padding: [2, 2, 2, 2],
+            text
           })
-        );
-      }
-      return s;
-    }
-    return [];
-  },
-  gauge(feature, resolution, isLegend) {
-    let waterlevel = feature.get("gm_waterlevel");
-    let text = feature.get("objname");
-    let iconColor = "white";
-    if (waterlevel) {
-      text += "\n(" + waterlevel + " cm)";
-      let refWaterlevels = JSON.parse(feature.get("reference_water_levels"));
-      if (waterlevel < refWaterlevels.LDC) iconColor = "brown";
-      if (waterlevel > refWaterlevels.LDC && waterlevel < refWaterlevels.HDC)
-        iconColor = "blue";
-      if (waterlevel > refWaterlevels.HDC) iconColor = "red";
+        })
+      ];
     }
-
-    return [
-      new Style({
-        image: new Icon({
-          src: require("@/assets/marker-gauge-" + iconColor + ".png"),
-          anchor: [0.5, isLegend ? 0.5 : 1],
-          scale: isLegend ? 0.5 : 1
-        }),
-        text: new Text({
-          font: '10px "Open Sans", "sans-serif"',
-          offsetY: 15,
-          fill: new Fill({
-            color: "black"
-          }),
-          backgroundFill: new Fill({
-            color: "rgba(255, 255, 255, 0.7)"
-          }),
-          padding: [2, 2, 2, 2],
-          text
-        })
-      })
-    ];
-  }
-};
+  };
+}