Mercurial > gemma

changeset 526:22cca659e40b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: add proof of concept for toggling layer visibility.
author Bernhard Reiter <bernhard@intevation.de>
date Mon, 27 Aug 2018 17:58:49 +0200
parents 67c3837bcc3d
children 4a637b333417
files client/src/components/Map.vue
diffstat 1 files changed, 38 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Map.vue	Mon Aug 27 17:30:31 2018 +0200
+++ b/client/src/components/Map.vue	Mon Aug 27 17:58:49 2018 +0200
@@ -1,5 +1,13 @@
 <template>
-  <div id="map"></div>
+  <div id="map">
+    <div v-if="this.olmap"
+         style="position: absolute; z-index: 1005; top: 90px ">
+      <input type="checkbox" v-model="vis1">
+        {{ listOfLayers[0].getVisible() }}<br>
+      <input type="checkbox" v-model="vis2">
+        {{ listOfLayers[1].getVisible() }}
+    </div>
+  </div>
 </template>
 
 <style lang="sass">
@@ -18,11 +26,38 @@
   props: ["lat", "long", "zoom"],
   data() {
     return {
-      projection: "EPSG:3857"
+      projection: "EPSG:3857",
+      olmap: null // OpenLayers' map object
     };
   },
+  computed: {
+    // FIXME this is a proof of concept, ugly.
+    listOfLayers: function() {
+      return this.olmap.getLayers().getArray();
+    },
+    vis1: {
+      get: function() {
+        if (this.listOfLayers[0]) {
+          return this.listOfLayers[0].getVisible();
+        }
+      },
+      set: function(newValue) {
+        this.listOfLayers[0].setVisible(newValue);
+      }
+    },
+    vis2: {
+      get: function() {
+        if (this.listOfLayers[1]) {
+          return this.listOfLayers[1].getVisible();
+        }
+      },
+      set: function(newValue) {
+        this.listOfLayers[1].setVisible(newValue);
+      }
+    }
+  },
   mounted() {
-    new Map({
+    this.olmap = new Map({
       layers: [
         new TileLayer({
           source: new OSM()