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

Merge pull request #93 from vue-leaflet/resolve-91

Add `minZoom` and `maxZoom` props to grid layer
parents 0809c8bf 6638ecac
Loading
Loading
Loading
Loading
+10 −0
Original line number Diff line number Diff line
@@ -23,6 +23,14 @@ export const props = {
    type: Boolean,
    default: false,
  },
  minZoom: {
    type: Number,
    default: 0,
  },
  maxZoom: {
    type: Number,
    default: undefined,
  },
};

export const setup = (props, leafletRef) => {
@@ -37,6 +45,8 @@ export const setup = (props, leafletRef) => {
    zIndex: props.zIndex,
    tileSize: props.tileSize,
    noWrap: props.noWrap,
    minZoom: props.minZoom,
    maxZoom: props.maxZoom,
  };
  return { options, methods: { ...layerMethods } };
};
+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="/grid-layer">GridLayer</router-link>
      <router-link to="/tile-layer">TileLayer</router-link>
      <router-link to="/feature-group">Feature Group</router-link>
      <router-link to="/circle">Circle</router-link>
      <router-link to="/circle-marker">CircleMarker</router-link>
+1 −0
Original line number Diff line number Diff line
@@ -36,6 +36,7 @@ const routes = [
  { path: "/geo-json", component: () => import("./views/GeoJSON.vue") },
  { path: "/icon", component: () => import("./views/Icon.vue") },
  { path: "/marker", component: () => import("./views/Marker.vue") },
  { path: "/tile-layer", component: () => import("./views/TileLayer.vue") },
  { path: "/polygon", component: () => import("./views/Polygon.vue") },
  { path: "/polyline", component: () => import("./views/Polyline.vue") },
  { path: "/popups", component: () => import("./views/Popups.vue") },
+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"
      layer-type="base"
      name="OpenStreetMap"
      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"
    />
  </l-map>
</template>
<script>
import { LMap, LTileLayer } from "./../../components";

export default {
  components: {
    LMap,
    LTileLayer,
  },
  data() {
    return {
      zoom: 2,
    };
  },
};
</script>

<style></style>