Vue2leaflet: minNativeZoom and maxNativeZoom

[nawalnew]

Description

I need to set a different minZoom for mobile devices. "minNativeZoom" is not working with Vue2Leaflet. Any advices?

Steps to Reproduce

Because at zomm level 3 the map shows Gray Borders left and right I had to do minZoom to 3.5.

On Mobile I need at least minZoom 2.0.

Ive ried the minNativeZoom in the options, but no success.

Expected Results

When setting minNativeZoom to 2 it should be more visible map on mobile

Actual Results

No Effect.

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [ ] Edge

• [ ] Safari 9
• [ ] Safari 8
• [ ] IE 11
• [X] Chrome Mobile
• [X] Safari Mobile

[DonNicoJs]

@nawalnew Could you show a piece of the code on how you are passing minNativeZoom to the component ?

[nawalnew]

@nawalnew Could you show a piece of the code on how you are passing minNativeZoom to the component ?

@DonNicoJs Thanks for reply.
I hope this helps.

Ive tried it in "l-map" options too. Both no effect

<l-map style="height: 100%" :zoom="zoom" :center="center" @update:zoom="zoomUpdated" :options="mapOptions"
      @update:center="centerUpdated"
      @update:bounds="boundsUpdated" :bounds="bounds" :max-bounds="maxBounds">
      <l-tile-layer :url="url" :attribution="attribution" :options="tileOptions"></l-tile-layer>
      <l-marker
        v-for="marker in markers"
        :key="marker.id"
        :visible="marker.visible"
        :draggable="marker.draggable"
        :lat-lng.sync="marker.position"
        :icon="marker.icon"
      >
      <l-popup :content="marker.popup" />
        <!-- <l-tooltip :content="marker.tooltip" /> -->
      </l-marker>
    </l-map>

import { latLngBounds, latLng, icon } from "leaflet";
import {LMap, LTileLayer, LMarker, LTooltip, LPopup } from 'vue2-leaflet';

export default {
    name: 'Map',
    components: {
        LMap,
        LTileLayer,
        LMarker,
        LTooltip,
        LPopup
    },
    async mounted () {
        this.$nextTick(() => {
          // this.$refs.layer.mapObject = 6
          // // set the level your need, and should ≦ the max level of source
        })
      },
    data() {
      return {
        zoom:3.5,
        mapOptions: {
          zoomSnap: 0.25,
          zoomDelta: 0.25,
        },
        tileOptions: {
          maxZoom: 6, 
          minZoom: 3.5,
          minNativeZoom: 1,
          zoom:3.5, 
          detectRetina: true,
          updateWhenIdle: false, 
          keepBuffer: 10
        },
        center: L.latLng(54.413220, -36.219482),
        url:'./static/tiles/{z}/{x}/{y}.png',
        attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        marker: L.latLng(47.413220, -1.219482),
        markers: [
        {
          id: "m1",
          position: { lat: 52.470, lng: -7.62 },
          popup: "<div class='marker-popup'><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna </p><button class='marker-btn'>Start</button></div>",
          tooltip: "Tooltip",
          draggable: false,
          visible: true,
          icon: L.icon({
            iconUrl: 'static/marker-icon.png',
            iconRetinaUrl: 'static/marker-icon-2x.png',
            iconSize: [32, 53]
          }),
        }
      ],
        bounds: latLngBounds([
        [85.03637495102464,149.6430587768555],
        [-35.515598503911704,-180.04737854003906]
      ]),
      maxBounds: latLngBounds([
        [85.03637495102464,149.6430587768555],
        [-35.515598503911704,-180.04737854003906]
      ]),
      maxBoundsViscosity: 0.2,

      }
    },
    methods: {
    zoomUpdated (zoom) {
      this.zoom = zoom;
    },

    centerUpdated (center) {
      this.center = center;
    },
    boundsUpdated (bounds) {
      this.bounds = bounds;
    }
  }
}

[DonNicoJs]

@nawalnew thanks for the code, will investigate this soon.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[greenaerotech]

I'm having issues getting maxNativeZoom to be a recognized/passed parameter in Vue2Leaflet l-tile-layer object also. Seems to pass maxZoom without problem, but not maxNativeZoom.

[lights0123]

I had no issues with:

<l-tile-layer
    :url="url"
    :attribution="attribution"
    :options="{ maxNativeZoom: 18, maxZoom: 100 }"
/>

And then setting maxZoom as an option on the <l-map> (the high value of maxZoom in the tile layer is ignored if the map's setting is lower)

[bradley-varol]

I had no issues with:

<l-tile-layer
  :url="url"
  :attribution="attribution"
  :options="{ maxNativeZoom: 18, maxZoom: 100 }"
/>

And then setting maxZoom as an option on the <l-map> (the high value of maxZoom in the tile layer is ignored if the map's setting is lower)

When using these settings, the tiles disappear (grey screen) for me when zooming past the default maximum...

[cristobalcl]

I'm also blocking by this and I would like to give it a try and work in a PR, but I'm very new to Vue so any help or direction would be great. Any idea about where should I look? LMap.vue? optionsMerge?

[cristobalcl]

Ok, not a bug at all.

I move minZoom, maxZoom, and maxNativeZoom to the LTileLayerComponent options and everything started to work. You need to move those three parameters because if you put only maxNativeZoom you will experience weird zoom behavior.

To be clear: maxNativeZoom is an option of the layer not of the map. The rest of the zoom parameters are also valid in the map component though.

[christopherritter]

minZoom, maxZoom, and maxNativeZoom

I've included these three settings in LTileLayerComponent but it's still showing a gray map above 18. I've also included minZoom and maxZoom on the l-map without any luck.