Mercurial > gemma
changeset 526:22cca659e40b
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()