<template>
  <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">

</style>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import TileWMS from "ol/source/TileWMS.js";

export default {
  name: "map",
  props: ["lat", "long", "zoom"],
  data() {
    return {
      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() {
    this.olmap = new Map({
      layers: [
        new TileLayer({
          source: new OSM()
        }),
        new TileLayer({
          source: new TileWMS({
            url: "https://demo.d4d-portal.info/wms",
            params: { LAYERS: "d4d", VERSION: "1.1.1", TILED: true }
          })
        })
      ],
      target: "map",
      view: new View({
        center: [this.long, this.lat],
        zoom: this.zoom,
        projection: this.projection
      })
    });
  }
};
</script>