Loading src/functions/gridLayer.js +10 −0 Original line number Diff line number Diff line Loading @@ -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) => { Loading @@ -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 } }; }; src/playground/App.vue +1 −0 Original line number Diff line number Diff line Loading @@ -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> Loading src/playground/index.js +1 −0 Original line number Diff line number Diff line Loading @@ -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") }, Loading src/playground/views/TileLayer.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" 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> Loading
src/functions/gridLayer.js +10 −0 Original line number Diff line number Diff line Loading @@ -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) => { Loading @@ -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 } }; };
src/playground/App.vue +1 −0 Original line number Diff line number Diff line Loading @@ -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> Loading
src/playground/index.js +1 −0 Original line number Diff line number Diff line Loading @@ -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") }, Loading
src/playground/views/TileLayer.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" 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>