<template>
  <div :id="id" class="bg-light shadow-sm rounded legendelement"></div>

</template>

<script>
import { Map, View } from "ol";
import Feature from "ol/Feature";
import { Vector as VectorLayer } from "ol/layer.js";
import { Vector as VectorSource } from "ol/source.js";
import LineString from "ol/geom/LineString.js";

export default {
  name: "legendelement",
  props: ["layername", "layerindex"],
  data: function() {
    return { yo: 1 };
  },
  computed: {
    id() {
      return "legendelement" + this.layerindex;
    }
  },
  mounted() {
    let feature =  new Feature({
          'geometry': new LineString([[-1,-1], [1, 1]])
        });
    var vector = new VectorLayer({
        source: new VectorSource({
          features: [feature],
          wrapX: false
        })
    });

    let map = new Map({
      layers: [vector],
      target: this.id,
      controls: [],
      view: new View({
        center: [0, 0],
        zoom: 3,
        projection: "EPSG:4326"
      })
    });

    console.log(map, this.id);
  }
};
</script>

<style scoped>
.legendelement {
  max-height: 1.5rem;
  width: 2rem;
}
</style>