'Accessing Map Object in Nuxt-leaflet

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...

leafletnuxt.jsvue2leaflet


Solution 1:[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ouflak

Related Questions