--- a/client/src/components/fairway/Fairwayprofile.vue	Mon Jun 03 12:22:26 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Mon Jun 03 13:59:41 2019 +0200
@@ -11,9 +11,51 @@
         </div>
         <div class="legend">
           <span
-            style="background-color: #1f4fff; width: 20px; height: 20px;"
+            :style="
+              'width: 16px; height: 16px; background-color: rgba(' +
+                this.getLayerStyle(1).fillColor.join(',') +
+                ',' +
+                this.getLayerStyle(1).fillOpacity +
+                '); border: dotted 2px rgba(' +
+                this.getLayerStyle(1).strokeColor.join(',') +
+                ',' +
+                this.getLayerStyle(1).strokeOpacity +
+                '); background-clip: padding-box; box-sizing: content-box;'
+            "
           ></span>
-          Fairway
+          Fairway (LOS 1)
+        </div>
+        <div class="legend">
+          <span
+            :style="
+              'width: 16px; height: 16px; background-color: rgba(' +
+                this.getLayerStyle(2).fillColor.join(',') +
+                ',' +
+                this.getLayerStyle(2).fillOpacity +
+                '); border: dashed 2px rgba(' +
+                this.getLayerStyle(2).strokeColor.join(',') +
+                ',' +
+                this.getLayerStyle(2).strokeOpacity +
+                '); background-clip: padding-box; box-sizing: content-box;'
+            "
+          ></span>
+          Fairway (LOS 2)
+        </div>
+        <div class="legend">
+          <span
+            :style="
+              'width: 16px; height: 16px; background-color: rgba(' +
+                this.getLayerStyle(3).fillColor.join(',') +
+                ',' +
+                this.getLayerStyle(3).fillOpacity +
+                '); border: solid 2px rgba(' +
+                this.getLayerStyle(3).strokeColor.join(',') +
+                ',' +
+                this.getLayerStyle(3).strokeOpacity +
+                '); background-clip: padding-box; box-sizing: content-box;'
+            "
+          ></span>
+          Fairway (LOS 3)
         </div>
         <div class="legend">
           <span
@@ -240,6 +282,20 @@
       );
       this.$store.dispatch("fairwayprofile/clearCurrentProfile");
     },
+    getLayerStyle(los) {
+      let style = this.openLayersMap()
+        .getLayer("FAIRWAYDIMENSIONSLOS" + los)
+        .getStyle()()[0];
+
+      // use spread operator to clone arrays
+      let fillColor = [...style.getFill().getColor()];
+      let fillOpacity = fillColor.pop();
+      let strokeColor = [...style.getStroke().getColor()];
+      let strokeOpacity = strokeColor.pop();
+      let strokeDash = style.getStroke().getLineDash();
+
+      return { fillColor, fillOpacity, strokeColor, strokeOpacity, strokeDash };
+    },
     applyChange() {
       if (this.form.template.hasOwnProperty("properties")) {
         this.templateData = this.defaultTemplate;
@@ -479,24 +535,33 @@
         return;
       }
       for (let data of this.fairwayData) {
-        const [startPoint, endPoint, depth] = data.coordinates[0];
-        let fairwayArea = d3
-          .area()
-          .x(function(d) {
-            return xScale(d.x);
-          })
-          .y0(yScaleRight(0))
-          .y1(function(d) {
-            return yScaleRight(d.y);
-          });
-        graph
-          .append("path")
-          .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }])
-          .attr("fill", "#002AFF")
-          .attr("fill-opacity", 0.65)
-          .attr("stroke", "#002AFF")
-          .attr("stroke-width", 2)
-          .attr("d", fairwayArea);
+        data.coordinates.forEach(coordinates => {
+          const [startPoint, endPoint, depth] = coordinates;
+          let fairwayArea = d3
+            .area()
+            .x(function(d) {
+              return xScale(d.x);
+            })
+            .y0(yScaleRight(0))
+            .y1(function(d) {
+              return yScaleRight(d.y);
+            });
+          graph
+            .append("path")
+            .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }])
+            .attr(
+              "fill",
+              `rgba(${this.getLayerStyle(data.los).fillColor.join(",")})`
+            )
+            .attr("fill-opacity", this.getLayerStyle(data.los).fillOpacity)
+            .attr(
+              "stroke",
+              `rgba(${this.getLayerStyle(data.los).strokeColor.join(",")})`
+            )
+            .attr("stroke-opacity", this.getLayerStyle(data.los).strokeOpacity)
+            .attr("stroke-dasharray", this.getLayerStyle(data.los).strokeDash)
+            .attr("d", fairwayArea);
+        });
       }
     },
     drawLabels({ graph, height }) {