Vue2leaflet: unable to set maxZoom above 18
Hi, i'm unable to set maxZoom above 18.
My code:
<template>
<div style="height: 100%; width:100%">
<v-map style="height: 100%; width:100%" :zoom="zoom" :center="center" :maxZoom="max" :minZoom="min">
<v-tilelayer :url="url" :attribution="attribution" :maxZoom="max" :minZoom="min"></v-tilelayer>
</v-map>
</div>
</template>
<script>
import Vue2Leaflet from 'vue2-leaflet';
export default {
name: 'home',
components: {
'v-map': Vue2Leaflet.Map,
'v-tilelayer' :Vue2Leaflet.TileLayer,
'v-marker': Vue2Leaflet.Marker
},
data () {
return {
zoom: 17,
max: 19,
min: 13,
center: L.latLng(6.328400, 8.105166),
url: 'http://localhost:5000/tiles/{z}/{x}/{y}/',
attribution: 'Demo'
}
}
}
</script>
<style>
</style>
CharlesOkwuagwu
All 5 comments
Hi @CharlesOkwuagwu ,
It works for me. Here is a running example with a maxZoom of 20.
KoRiGaN
on 6 Jul 2017
will retry
CharlesOkwuagwu
on 6 Jul 2017
@KoRiGaN @CharlesOkwuagwu it seems that it doesn't work, is it?
ergonomicus
on 17 Jul 2018
KoRiGaNs' example does not work with leaflet 1.3.4
but i found a example works on zoom >= 18 which doesnot use vue2leaflet
https://codepen.io/davland7/pen/YpqdJo~~
Only one difference i can see is the place when to add maxZoom/minZoom props.
OK, i'm too noob that take so much times to figured out how to make this work
KoRiGaN says "all components have a property mapObject which is the actual Leaflet object." on https://github.com/KoRiGaN/Vue2Leaflet/issues/46#issuecomment-303684715
Method 1: add options props
<l-tile-layer :options="{ maxZoom: 19 }" ... > </l-tile-layer>
Method 2: add ref props, and change it with javascript object
<template>
...
<l-tile-layer ref="layer" url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
...
</template>
<script>
export default {
async mounted () {
this.$nextTick(() => {
this.$refs.layer.mapObject = 19
// set the level your need, and should ≦ the max level of source
})
}
</script>
hpo14
on 13 Sep 2018
Hi @CharlesOkwuagwu ,
It works for me. Here is a running example with a maxZoom of 20.
Hi KoRiGaN,
I was trying to implement this and noticed even on your jsfiddle when zoomed in to levels 19 and 20 there are no features. Did this solution break since this original issue (was so long ago)?
chrisamow
on 19 Sep 2020
Related issues
rSammy
·
3Comments
tiltec
·
4Comments
DmitriyVTitov
·
4Comments
zaqisilverano
·
4Comments
hoticer
·
3Comments
Most helpful comment
KoRiGaNs' example does not work with leaflet 1.3.4but i found a example works on zoom >= 18 which doesnot use vue2leaflethttps://codepen.io/davland7/pen/YpqdJo~~Only one difference i can see is the place when to add maxZoom/minZoom props.OK, i'm too noob that take so much times to figured out how to make this work
KoRiGaN says "all components have a property mapObject which is the actual Leaflet object." on https://github.com/KoRiGaN/Vue2Leaflet/issues/46#issuecomment-303684715
Method 1: add options props
Method 2: add ref props, and change it with javascript object