Vue, Leaflet, accessing ref object / function

Question

I have a running leaflet map in a vue project. Eg (only relevant vue code included).

<div style="height:70vh; width:100%; position: relative;"> <l-map ref="map" :zoom="maps_obj.zoom" :center="[maps_obj.latitude, maps_obj.longitude]"> <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" layer-type="base"></l-tile-layer> </l-map> </div> <script> import 'leaflet/dist/leaflet.css'; import { defineComponent, ref } from 'vue'; import { LMap, LMarker, LTileLayer, LIcon, } from '@vue-leaflet/vue-leaflet'; import { icon } from 'leaflet'; methods: { test() { this.$nextTick(() => { this.$refs.map.mapObject.invalidateSize(); }); }, }, </script>

The map itself works perfectly. But how come I cannot access the leaflet api and run a function, like the documentation states? (https://vue2-leaflet.netlify.app/quickstart/#accessing-leaflet-api)

It just returns the error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'invalidateSize')

SefaUn · Accepted Answer · 2023-08-20 22:31:36Z

9

Of course after posting this question I found the "hidden answer".. The mapObject is nowadays called leafletObject..

this.$refs.map.leafletObject.invalidateSize();

edited Aug 20, 2023 at 22:31

SefaUn

1,1901 gold badge12 silver badges33 bronze badges

answered Apr 20, 2023 at 9:09

AP87

5411 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ali Bahrami Over a year ago

not a single mention anywhere in the documentation. a truely life saver stack question!

Collectives™ on Stack Overflow

Vue, Leaflet, accessing ref object / function

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related