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

Merge pull request #99 from vue-leaflet/add-wms-tile-layer-example 

Add WMS tile layer example
parents 9e4ee4be fd0df2b5

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="/grid-layer">GridLayer</router-link>

      <router-link to="/tile-layer">TileLayer</router-link>

      <router-link to="/wms-tile-layer">WmsTileLayer</router-link>

      <router-link to="/image-overlay">ImageOverlay</router-link>

      <router-link to="/feature-group">Feature Group</router-link>

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

src/playground/index.js

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

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

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

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

  {

    path: "/wms-tile-layer",

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

  },

  {

    path: "/feature-group",

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

src/playground/views/TileLayer.vue

+3 −3
Original line number Diff line number Diff line
@@ -4,13 +4,13 @@ 
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

      layer-type="base"

      name="OpenStreetMap"

      max-zoom="10"

      :max-zoom="10"

    />

    <l-tile-layer

      url="https://s3.amazonaws.com/te512.safecast.org/{z}/{x}/{y}.png"

      attribution="<a href='https://blog.safecast.org/about/'>SafeCast</a> (<a href='https://creativecommons.org/licenses/by-sa/3.0/'>CC-BY-SA</a>"

      min-zoom="5"

      max-zoom="7"

      :min-zoom="5"

      :max-zoom="7"

    />

  </l-map>

</template>

src/playground/views/WmsTileLayer.vue

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

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

    <l-wms-tile-layer

      base-url="https://maps.heigit.org/osm-wms/service"

      attribution="HeiGIT <a href='osm-wms.de'>OSM WMS</a>"

      layer-type="base"

      name="osm-wms.de"

      :max-zoom="10"

      version="1.3.0"

      format="image/png"

      transparent="true"

      layers="osm_auto:all"

    />

  </l-map>

</template>

<script>

import { LMap, LWmsTileLayer } from "./../../components";



export default {

  components: {

    LMap,

    LWmsTileLayer,

  },

  data() {

    return {

      zoom: 2,

    };

  },

};

</script>



<style></style>