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

Merge pull request #74 from vue-leaflet/playground-popups 

Playground popups
parents a3576b37 46f383d8

src/playground/App.vue

+1 −0
Original line number Diff line number Diff line
@@ -3,6 +3,7 @@ 
    <div class="menu">

      <router-link to="/">Home</router-link>

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

      <router-link to="/popups">Popups</router-link>

      <router-link to="/tooltips">Tooltips</router-link>

      <router-link to="/circle-marker">CircleMarker</router-link>

      <router-link to="/polygon">Polygon</router-link>

src/playground/index.js

+1 −0
Original line number Diff line number Diff line
@@ -7,6 +7,7 @@ import Home from "./views/Home.vue"; 
const routes = [

  { path: "/", component: Home },

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

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

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

  {

    path: "/circle-marker",

src/playground/views/Popups.vue

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

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

    <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="[41.8329, -87.7327]"

      draggable

      @moveend="log('moveend')"

      :options="{ riseOnHover: true, riseOffset: 300 }"

    >

      <l-popup>

        Hi! I'm staying here on this location!

      </l-popup>

    </l-marker>



    <l-layer-group>

      <l-marker :lat-lng="[41.75, -87.65]" draggable @moveend="log('moveend')">

        <l-popup>

          Hi! You can drag me around!

        </l-popup>

      </l-marker>

    </l-layer-group>



    <l-polygon

      :lat-lngs="[

        [41.6329, -87.5327],

        [41.5329, -87.2327],

        [41.3329, -87.3327],

        [41.6329, -87.5327],

      ]"

      color="#41b782"

      :fill="true"

      :fillOpacity="0.5"

      fillColor="#41b782"

    >

      <l-popup>

        Hi! I'm a polygon, nice to meet you!

      </l-popup>

    </l-polygon>



    <l-polyline

      :lat-lngs="[

        [41.9329, -87.9327],

        [41.8329, -87.8327],

      ]"

      color="green"

    >

      <l-popup>

        Hey! Polyline here, at your service!

      </l-popup>

    </l-polyline>



    <l-rectangle

      :lat-lngs="[

        [41.734852, -86.809485],

        [41.742596, -86.628731],

        [41.641487, -86.590568],

        [41.634787, -86.658337],

      ]"

      :fill="true"

      color="#35495d"

    >

      <l-popup>

        Good day! Rectangle is my name!

      </l-popup>

    </l-rectangle>



    <l-circle :lat-lng="[41.4329, -87.7327]" :radius="10000" color="green">

      <l-popup>

        Hi! I'm a green Circle!

      </l-popup>

    </l-circle>



    <l-circle-marker :lat-lng="[41.4329, -87.95]" :radius="20">

      <l-popup>

        Hi! You can call me Circle Marker!

      </l-popup>

    </l-circle-marker>

  </l-map>

</template>

<script>

import {

  LMap,

  LTileLayer,

  LMarker,

  LPopup,

  LLayerGroup,

  LPolygon,

  LPolyline,

  LRectangle,

  LCircle,

  LCircleMarker,

} from "./../../components";



export default {

  components: {

    LMap,

    LTileLayer,

    LMarker,

    LPopup,

    LLayerGroup,

    LPolygon,

    LPolyline,

    LRectangle,

    LCircle,

    LCircleMarker,

  },

  data() {

    return {

      zoom: 9,

    };

  },

};

</script>



<style></style>