# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1556189288 -7200
# Node ID a9c7825303b3971d0101a5996e95b1fcbc26cf8c
# Parent  41ed69dbf9bbcddbf386ef7704cfdcb14d679229
layers: Code for provisioning a dynamic URL for OSM etd.
In order to use a configurable OSM provider a url has to be provided
via backend. Currently for POC reasons an irrelevant call to /users is made
after which the OSM-layer is initialized.

ToDo: provide the correct URL for OSM configuration.

diff -r 41ed69dbf9bb -r a9c7825303b3 client/src/components/map/Map.vue
--- a/client/src/components/map/Map.vue	Thu Apr 25 11:39:17 2019 +0200
+++ b/client/src/components/map/Map.vue	Thu Apr 25 12:48:08 2019 +0200
@@ -39,7 +39,9 @@
 import { displayError } from "@/lib/errors";
 import { pane } from "@/lib/mixins";
 import layers from "@/components/map/layers";
+import { Tile as TileLayer } from "ol/layer";
 import "ol/ol.css";
+import OSM from "ol/source/OSM";
 
 /* for the sake of debugging */
 /* eslint-disable no-console */
@@ -216,49 +218,75 @@
     }
   },
   mounted() {
-    this.initMap();
-
-    if (this.selectedSurvey && this.paneId === "main") {
-      this.updateBottleneckFilter(
-        this.selectedSurvey.bottleneck_id,
-        this.selectedSurvey.date_info
-      );
-    }
-    if (this.additionalSurvey && this.paneId === "compare-sounding-results") {
-      this.updateBottleneckFilter(
-        this.additionalSurvey.bottleneck_id,
-        this.additionalSurvey.date_info
-      );
-    }
-
-    // load configured bottleneck colors
-    HTTP.get("/system/style/Bottlenecks/stroke", {
+    // ToDo set path to correct endpoint in order to retrieve an OSM URL
+    HTTP.get("/users", {
       headers: { "X-Gemma-Auth": localStorage.getItem("token") }
     })
       .then(response => {
-        let btlnStrokeC = response.data.code;
-        HTTP.get("/system/style/Bottlenecks/fill", {
+        const { url } = response.data;
+        const config = {};
+        if (url) config["url"] = url;
+        this.layers.config.unshift(
+          new TileLayer({
+            id: "OPENSTREETMAP",
+            label: "Open Streetmap",
+            visible: true,
+            source: new OSM(config)
+          })
+        );
+        this.initMap();
+
+        if (this.selectedSurvey && this.paneId === "main") {
+          this.updateBottleneckFilter(
+            this.selectedSurvey.bottleneck_id,
+            this.selectedSurvey.date_info
+          );
+        }
+        if (
+          this.additionalSurvey &&
+          this.paneId === "compare-sounding-results"
+        ) {
+          this.updateBottleneckFilter(
+            this.additionalSurvey.bottleneck_id,
+            this.additionalSurvey.date_info
+          );
+        }
+        // load configured bottleneck colors
+        HTTP.get("/system/style/Bottlenecks/stroke", {
           headers: { "X-Gemma-Auth": localStorage.getItem("token") }
         })
           .then(response => {
-            let btlnFillC = response.data.code;
-            var newStyle = new Style({
-              stroke: new Stroke({
-                color: btlnStrokeC,
-                width: 4
-              }),
-              fill: new Fill({
-                color: btlnFillC
+            let btlnStrokeC = response.data.code;
+            HTTP.get("/system/style/Bottlenecks/fill", {
+              headers: { "X-Gemma-Auth": localStorage.getItem("token") }
+            })
+              .then(response => {
+                let btlnFillC = response.data.code;
+                var newStyle = new Style({
+                  stroke: new Stroke({
+                    color: btlnStrokeC,
+                    width: 4
+                  }),
+                  fill: new Fill({
+                    color: btlnFillC
+                  })
+                });
+                this.layers.get("BOTTLENECKS").setStyle(newStyle);
               })
-            });
-            this.layers.get("BOTTLENECKS").setStyle(newStyle);
+              .catch(error => {
+                console.log(error);
+              });
           })
           .catch(error => {
             console.log(error);
           });
       })
       .catch(error => {
-        console.log(error);
+        const { status, data } = error.response;
+        displayError({
+          title: "Backend Error",
+          message: `${status}: ${data.message || data}`
+        });
       });
   },
   destroyed() {
diff -r 41ed69dbf9bb -r a9c7825303b3 client/src/components/map/layers.js
--- a/client/src/components/map/layers.js	Thu Apr 25 11:39:17 2019 +0200
+++ b/client/src/components/map/layers.js	Thu Apr 25 12:48:08 2019 +0200
@@ -4,7 +4,6 @@
   Vector as VectorLayer,
   Image as ImageLayer
 } from "ol/layer";
-import OSM from "ol/source/OSM";
 import { Icon, Stroke, Style } from "ol/style";
 import VectorSource from "ol/source/Vector";
 import { ImageWMS as ImageSource } from "ol/source";
@@ -67,12 +66,6 @@
       return this.config.find(l => l.get("id") === id);
     },
     config: [
-      new TileLayer({
-        id: "OPENSTREETMAP",
-        label: "Open Streetmap",
-        visible: true,
-        source: new OSM()
-      }),
       new ImageLayer({
         id: "INLANDECDIS",
         label: "Inland ECDIS chart Danube",