Mercurial > gemma
changeset 3102:a9c7825303b3
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.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Thu, 25 Apr 2019 12:48:08 +0200 |
parents | 41ed69dbf9bb |
children | 247e78ba2bf7 |
files | client/src/components/map/Map.vue client/src/components/map/layers.js |
diffstat | 2 files changed, 58 insertions(+), 37 deletions(-) [+] |
line wrap: on
line diff
--- 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() {
--- 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",