Accessing Map Object in Nuxt-leaflet

user_8406394 0
Viewed 470

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

vue2leaflet nuxt.js leaflet
1 Answers

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.

user_113603760
Related