Commit 37beff93 authored by Michael Underwood's avatar Michael Underwood
Browse files

Add LIcon to playground with reactive elements

parent 5081f647

src/Playground.vue

+23 −1
Original line number Diff line number Diff line 
<template>

  <div style="height: 50vh; width: 50vw;">

  <div style="height: 75vh; width: 50vw;">

    <l-map

      v-model="zoom"

      v-model:zoom="zoom"
@@ -15,11 +15,16 @@ 
          lol

        </l-tooltip>

      </l-marker>

      <l-marker :lat-lng="[47.41322, -1.219482]">

        <l-icon :icon-url="iconUrl" :icon-size="iconSize" />

      </l-marker>

    </l-map>

    <button @click="changeIcon">New kitten icon</button>

  </div>

</template>

<script>

import LMap from "./components/LMap.vue";

import LIcon from "./components/LIcon.vue";

import LTileLayer from "./components/LTileLayer.vue";

import LMarker from "./components/LMarker.vue";

import LControlLayers from "./components/LControlLayers.vue";
@@ -28,6 +33,7 @@ import LTooltip from "./components/LTooltip.vue"; 
export default {

  components: {

    LMap,

    LIcon,

    LTileLayer,

    LMarker,

    LControlLayers,
@@ -36,12 +42,28 @@ export default { 
  data() {

    return {

      zoom: 2,

      iconWidth: 25,

      iconHeight: 40,

    };

  },

  computed: {

    iconUrl() {

      return `https://placekitten.com/${this.iconWidth}/${this.iconHeight}`;

    },

    iconSize() {

      return [this.iconWidth, this.iconHeight];

    },

  },

  methods: {

    log(a) {

      console.log(a);

    },

    changeIcon() {

      this.iconWidth += 2;

      if (this.iconWidth > this.iconHeight) {

        this.iconWidth = Math.floor(this.iconHeight / 2);

      }

    },

  },

};

</script>