--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/map/styles.js	Thu Apr 11 12:14:01 2019 +0200
@@ -0,0 +1,201 @@
+import { Icon, Stroke, Style, Fill, Text, Circle } from "ol/style";
+import Point from "ol/geom/Point";
+import { getCenter } from "ol/extent";
+
+const styles = {
+  blue1: new Style({
+    stroke: new Stroke({
+      color: "rgba(0, 0, 255, 0.8)",
+      lineDash: [2, 4],
+      lineCap: "round",
+      width: 2
+    }),
+    fill: new Fill({
+      color: "rgba(240, 230, 0, 0.2)"
+    })
+  }),
+  blue2: new Style({
+    stroke: new Stroke({
+      color: "rgba(0, 0, 255, 0.9)",
+      lineDash: [3, 6],
+      lineCap: "round",
+      width: 2
+    }),
+    fill: new Fill({
+      color: "rgba(240, 230, 0, 0.1)"
+    })
+  }),
+  blue3: new Style({
+    stroke: new Stroke({
+      color: "rgba(0, 0, 255, 1.0)",
+      width: 2
+    }),
+    fill: new Fill({
+      color: "rgba(255, 255, 255, 0.4)"
+    })
+  }),
+  yellow1: new Style({
+    stroke: new Stroke({
+      color: "rgba(230, 230, 10, .8)",
+      width: 4
+    }),
+    fill: new Fill({
+      color: "rgba(230, 230, 10, .3)"
+    })
+  }),
+  yellow2: new Style({
+    stroke: new Stroke({
+      color: "rgba(250, 200, 0, .8)",
+      width: 2
+    }),
+    fill: new Fill({
+      color: "rgba(250, 200, 10, .3)"
+    })
+  }),
+  yellow3: new Style({
+    stroke: new Stroke({
+      color: "rgba(250, 240, 10, .9)",
+      width: 5
+    }),
+    fill: new Fill({
+      color: "rgba(250, 240, 0, .7)"
+    })
+  }),
+  red1: new Style({
+    stroke: new Stroke({
+      color: "rgba(255, 0, 0, 1)",
+      width: 4
+    })
+  }),
+  circleBlue: new Style({
+    image: new Circle({
+      radius: 5,
+      fill: new Fill({ color: "rgba(255, 0, 0, 0.1)" }),
+      stroke: new Stroke({ color: "blue", width: 1 })
+    })
+  }),
+  textFW1: new Style({
+    text: new Text({
+      font: 'bold 12px "Open Sans", "sans-serif"',
+      placement: "line",
+      fill: new Fill({
+        color: "black"
+      }),
+      text: "LOS: 1"
+      //, zIndex: 10
+    })
+  }),
+  textFW2: new Style({
+    text: new Text({
+      font: 'bold 12px "Open Sans", "sans-serif"',
+      placement: "line",
+      fill: new Fill({
+        color: "black"
+      }),
+      text: "LOS: 2"
+      //, zIndex: 10
+    })
+  }),
+  textFW3: new Style({
+    text: new Text({
+      font: 'bold 12px "Open Sans", "sans-serif"',
+      placement: "line",
+      fill: new Fill({
+        color: "black"
+      }),
+      text: "LOS: 3"
+      //, zIndex: 10
+    })
+  })
+};
+
+export default {
+  stretches(feature) {
+    let style = styles.yellow2;
+    if (feature.get("highlighted")) {
+      style = styles.yellow3;
+    }
+    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;
+  },
+  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) {
+    return [
+      new Style({
+        image: new Icon({
+          src: require("@/assets/marker-gauge.png"),
+          anchor: [0.5, isLegend ? 0.5 : 1],
+          scale: isLegend ? 0.5 : 1
+        }),
+        text: new Text({
+          font: '10px "Open Sans", "sans-serif"',
+          offsetY: 8,
+          fill: new Fill({
+            color: "white"
+          }),
+          text: feature.get("objname")
+        })
+      }),
+      new Style({
+        text: new Text({
+          font: '10px "Open Sans", "sans-serif"',
+          offsetY: 7,
+          offsetX: -1,
+          fill: new Fill({
+            color: "black"
+          }),
+          text: feature.get("objname")
+        })
+      })
+    ];
+  }
+};