Mercurial > gemma

diff client/src/components/layers/Layers.vue @ 3055:b3c24c47931c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: layers legend: support multiple maps If there is more than one map, there's a layer checkbox for each of them, so layers can be toggle for each map separately.
author Markus Kottlaender <markus@intevation.de>
date Tue, 16 Apr 2019 09:26:51 +0200
parents c71373594719
children 85734c763652
line wrap: on
line diff
--- a/client/src/components/layers/Layers.vue	Tue Apr 16 09:00:42 2019 +0200
+++ b/client/src/components/layers/Layers.vue	Tue Apr 16 09:26:51 2019 +0200
@@ -5,30 +5,27 @@
       { expanded: showLayers }
     ]"
   >
-    <div style="width: 18rem">
-      <UIBoxHeader
-        icon="layer-group"
-        :title="layersLabel"
-        :closeCallback="close"
-      />
-      <div class="box-body small" v-if="openLayersMap">
-        <Layerselect :layer="openLayersMap.getLayer('OPENSTREETMAP')" />
-        <Layerselect :layer="openLayersMap.getLayer('INLANDECDIS')" />
-        <Layerselect :layer="openLayersMap.getLayer('WATERWAYAREA')" />
-        <Layerselect :layer="openLayersMap.getLayer('STRETCHES')" />
-        <Layerselect :layer="openLayersMap.getLayer('FAIRWAYDIMENSIONSLOS3')" />
-        <Layerselect :layer="openLayersMap.getLayer('FAIRWAYDIMENSIONSLOS2')" />
-        <Layerselect :layer="openLayersMap.getLayer('FAIRWAYDIMENSIONSLOS1')" />
-        <Layerselect :layer="openLayersMap.getLayer('WATERWAYAXIS')" />
-        <Layerselect :layer="openLayersMap.getLayer('WATERWAYPROFILES')" />
-        <Layerselect :layer="openLayersMap.getLayer('BOTTLENECKS')" />
-        <Layerselect :layer="openLayersMap.getLayer('BOTTLENECKISOLINE')" />
-        <Layerselect :layer="openLayersMap.getLayer('DIFFERENCES')" />
-        <Layerselect :layer="openLayersMap.getLayer('BOTTLENECKSTATUS')" />
-        <Layerselect :layer="openLayersMap.getLayer('DISTANCEMARKS')" />
-        <Layerselect :layer="openLayersMap.getLayer('DISTANCEMARKSAXIS')" />
-        <Layerselect :layer="openLayersMap.getLayer('GAUGES')" />
+    <div class="position-relative" style="width: 18rem; min-height: 350px;">
+      <UIBoxHeader icon="layer-group" :title="label" :closeCallback="close" />
+      <div class="small" v-if="openLayersMaps.length">
+        <Layerselect layerId="OPENSTREETMAP" />
+        <Layerselect layerId="INLANDECDIS" />
+        <Layerselect layerId="WATERWAYAREA" />
+        <Layerselect layerId="STRETCHES" />
+        <Layerselect layerId="FAIRWAYDIMENSIONSLOS3" />
+        <Layerselect layerId="FAIRWAYDIMENSIONSLOS2" />
+        <Layerselect layerId="FAIRWAYDIMENSIONSLOS1" />
+        <Layerselect layerId="WATERWAYAXIS" />
+        <Layerselect layerId="WATERWAYPROFILES" />
+        <Layerselect layerId="BOTTLENECKS" />
+        <Layerselect layerId="BOTTLENECKISOLINE" />
+        <Layerselect layerId="DIFFERENCES" />
+        <Layerselect layerId="BOTTLENECKSTATUS" />
+        <Layerselect layerId="DISTANCEMARKS" />
+        <Layerselect layerId="DISTANCEMARKSAXIS" />
+        <Layerselect layerId="GAUGES" />
       </div>
+      <UISpinnerOverlay v-else style="top: 34px;" />
     </div>
   </div>
 </template>
@@ -48,16 +45,16 @@
  * Thomas Junk <thomas.junk@intevation.de>
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState, mapGetters } from "vuex";
+import { mapState } from "vuex";
 
 export default {
   components: {
     Layerselect: () => import("./Layerselect")
   },
   computed: {
-    ...mapGetters("map", ["openLayersMap"]),
     ...mapState("application", ["showLayers"]),
-    layersLabel() {
+    ...mapState("map", ["openLayersMaps"]),
+    label() {
       return this.$gettext("Layers");
     }
   },