Vue2leaflet: Accessing to internal Leaflet map object

[mpallante]

Hello everyone,

I'm trying to access the Leaflet map object contained in the component, but without any luck. I need it so that I can call methods on the map object. In particular, I'm trying to call the locate() method.

I've seen that there is a mapObject variable inside the Map component, bu I'm not able to access it. I also tried to register the l-ready event (that seems to be fired at the end of the initialization process), but then I cannot access the context.

I did this in my component:

<template>
    <div>
        <v-map v-on:l-ready="readyHandler"></v-map>
    </div>
</template>
<script>
    ...
    methods: {
        readyHandler() {
            // ?!?
        }
    }
    ...
</script>

If I try console.log(this) inside the handler, I get my component and not the Map.

How can I solve this?

Thanks a lot!

[ghost]

I have solved it with using the l-ready event, as you, and assigning the map object to data attribute via this.mapObject = this.$children[0].mapObject; in the main "app". The map is the first element so key is 0 but it would be better to search for 'mapObject' in all children and find the correct child that way.

[KoRiGaN]

Hi @mpallante & @ivanjaros,

You can use Vue refs to access it.
So for example :
<v-map ref="map" ...> ... </v-map>
Then in your code you can use this ref to access the inner mapObject which is Leaflet instance:
this.$refs.map.mapObject

The $refs property will only populated after the Vue instance is mounted I think. I you use it before that you should have undefined.

Let me know if this solve your problem.

[ghost]

Thanks, that is a better approach.

[mpallante]

Thanks a lot @KoRiGaN, this is exacly what I needed. Sorry for the late answer, but I was busy with other tasks. I'm closing the issue.