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?

Maybe I don´t understand the syntax, but if you call getSize(), what do you expect to happen, if there is only a console output? — StevenSiebert
– StevenSiebert, Commented Aug 28, 2021 at 11:12
getSize() should return the size of the map container. So it should just output the container size. — Philip F.
– Philip F., Commented Aug 28, 2021 at 11:13
But in your example, the only actions taken in getSize are console.log(map.value.getSize()) and console.log(map.getSize())? — StevenSiebert
– StevenSiebert, Commented Aug 28, 2021 at 11:16
I don't think if I understand your question, but the only purpose of getSize is to ouput the size of the map on the console. It should not return anything, it is just there to confirm that map.getSize() works. — Philip F.
– Philip F., Commented Aug 28, 2021 at 12:07
Okay. Have you tried to output map on console? map.value is null, according to the error. — StevenSiebert
– StevenSiebert, Commented Aug 28, 2021 at 13:14

Philip F. · Accepted Answer · 2021-08-28 11:11:44Z

5

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()

answered Aug 28, 2021 at 11:11

Philip F.

1,2574 gold badges19 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

How to access methods of openlayers map in vue3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related