How to access methods of openlayers map in vue3

Question

I use vue3-openlyers to create a map like the following:

<ol-map ref="map">
...
</ol-map>

In Vue's composition api, I try to access the getSize() method of the map:

import { ref, defineComponent, onMounted } from "vue";

export default defineComponent({
    setup() {
        //works with views
        const map = ref<any>(null);

        const getSize = () => {
            // does not work
            console.log(map.value.getSize());
            console.log(map.getSize());
        };

        onMounted(getSize());
    
        return { map, getSize }
});

I get the following error: TypeError: map.value is null

I suspect that the map variable is not updating. How can I resolve this error?

Answer 1

You can call the methods of the referenced map using this.$refs.map.map.<method>. (this cannot be accessed inside the composition api!! Use it in e. g. mounted()).

For example you can get the size of the map: this.$refs.map.map.getSize()