Unverified Commit ffcbad69 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by GitHub
Browse files

Merge pull request #65 from vue-leaflet/playground-l-icon 

Playground l icon
parents 93c87bb6 e7d3e904

src/playground/App.vue

+1 −0
Original line number Diff line number Diff line
@@ -4,6 +4,7 @@ 
      <router-link to="/">Home</router-link>

      <router-link to="/marker">Marker</router-link>

      <router-link to="/circle">Circle</router-link>

      <router-link to="/icon">Icon</router-link>

      <router-link to="/control-custom-message">Custom Message</router-link>

    </div>

    <div class="map-wrapper">

src/playground/index.js

+1 −0
Original line number Diff line number Diff line
@@ -8,6 +8,7 @@ const routes = [ 
  { path: "/", component: Home },

  { path: "/marker", component: () => import("./views/Marker.vue") },

  { path: "/circle", component: () => import("./views/Circle.vue") },

  { path: "/icon", component: () => import("./views/Icon.vue") },

  {

    path: "/control-custom-message",

    component: () => import("./views/ControlCustomMessage.vue"),

src/playground/views/Icon.vue

0 → 100644
+54 −0
Original line number Diff line number Diff line 
<template>

  <div style="width: 100%; height: 100%;">

    <l-map ref="map" v-model:zoom="zoom" :center="[47.41322, -1.219482]">

      <l-tile-layer

        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

        layer-type="base"

        name="OpenStreetMap"

      ></l-tile-layer>



      <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, LTileLayer, LMarker, LIcon } from "./../../components";



export default {

  components: {

    LMap,

    LTileLayer,

    LMarker,

    LIcon,

  },

  data() {

    return {

      zoom: 8,

      iconWidth: 45,

      iconHeight: 90,

    };

  },

  computed: {

    iconUrl() {

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

    },

    iconSize() {

      return [this.iconWidth, this.iconHeight];

    },

  },

  methods: {

    changeIcon() {

      this.iconWidth += 1;

      if (this.iconWidth > this.iconHeight) {

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

      }

    },

  },

};

</script>



<style></style>