Unverified Commit eedec5f8 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera
Browse files

chore: add grid-layer to playground

parent 5529463f

src/playground/App.vue

+1 −0
Original line number Diff line number Diff line
@@ -2,6 +2,7 @@ 
  <div class="main-wrapper">

    <div class="menu">

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

      <router-link to="/grid-layer">GridLayer</router-link>

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

    </div>

    <div class="map-wrapper">

src/playground/index.js

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


const routes = [

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

  { path: "/grid-layer", component: () => import("./views/GridLayer.vue") },

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

];

src/playground/views/GridLayer.vue

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

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

    ></l-tile-layer>

    <l-grid-layer :child-render="childRender"></l-grid-layer>

  </l-map>

</template>

<script>

import { h } from "vue";

import { LMap, LTileLayer, LGridLayer } from "./../../components";



export default {

  components: {

    LMap,

    LTileLayer,

    LGridLayer,

  },

  data() {

    return {

      zoom: 2,

      childRender: (props) => () => {

        return h(

          "div",

          `x: ${props.coords.x} y: ${props.coords.y} z: ${props.coords.z}`

        );

      },

    };

  },

};

</script>



<style></style>