Accessing Map Object in Nuxt-leaflet

Question

I have an leaflet map like this (snipped):

<template>
<client-only>
  <div>
    <l-map
      ref="myMap"
      :zoom="zoom"
      :max-zoom="maxZoom"
      :min-zoom="minZoom"
      :crs="crs"
      :options="mapOptions"

Im trying to access my created map object of a leaflet map during mounted hook like this:

mounted() {
    this.maxZoom = this.$refs.myMap.mapObject.getMaxZoom()

or

this.$L.myMap.mapObject.getMaxZoom()

but i alwayways get a "... is undefine" error. What am i doing wrong here and how can i access my map object to get some stuff like .getMaxZoom() during runtime using nuxt-leaflet? Without nuxt-leaflet, only using vue2leaflet it works like a charm...

Can you make a reproduction of your issue? Preferably on codesandbox. — kissu, Feb 17 '21 at 22:23
@kissu i created a simplified codesandbox: https://codesandbox.io/s/gifted-gauss-02wpx?file=/components/Map.vue But unfortunately i cant get it run to reproduce the issue cause some module build errors occur. If you get this sandbox run i guess my issue should be reproduced :( — Alex, Feb 18 '21 at 09:19
could you try with this inside `mounter(){}` method: `this.$nextTick(() => { let map = this.$refs.myMap.mapObject; console.log(map); });` and see if you have any response ? — KodeFor.Me, Feb 24 '21 at 13:12

score 0 · Answer 1 · edited Mar 12 '22 at 22:27

I had the same problem with Nuxt.

<client-only>
  <LMap
    ref="map"
    @hook:mounted="mapInitialization"

    :zoom="1"
    :center="[640, 512]"
    :options="{ attributionControl: false, zoomControl: false }"
    :crs="crs"
  >
    <LImageOverlay :url="url" :bounds="bounds"></LImageOverlay>
    <LMarker :lat-lng="[69.5, 177.5]" :z-index="1"></LMarker>
  </LMap>
</client-only>

methods: {
  mapInitialization() {
    const map = this.$refs.map
    console.log('MAP FROM STUFF', map)
    map.mapObject.setView()
  }
}

$nextTick in mounted method doesn't work for me properly, because it requires some tick and on the initialization of the page ref is empty.

Accessing Map Object in Nuxt-leaflet

1 Answers1