Vue2leaflet: Popups or tooltips events

[thihathit]

Hello, how do open popups or tooltips by default and how to trigger their events open/close ?
I've add my html like this and don't know where to bind click event, on parent tag marker or child tags ?

<v-marker v-for='(marker, index) in markers' :lat-lng='marker.position' :key='index'>
  <v-tooltip :content="marker.tooltip"></v-tooltip>
  <v-popup :content="marker.popup"></v-popup>
</v-marker>

[PeterPlucinski]

I would also like to know if this is possible and how to do this

[thihathit]

As the comment from this post
Find marker object layer inside map object binded onto v-map. And manipulate the object with leafletjs methods.
Not sure, haven't tried it. i think the author know proper method.

[pcholder]

My workaround was:

<v-marker v-on:l-add="realMarkerAdd" :lat-lng='marker.position' :key='index'>
...
</v-marker>

realMarkerAdd = function (e) {
      e.target.togglePopup()
}

[KoRiGaN]

Hi @thihathit, @pcholder and @PeterPlucinski,

As far as I know there is no option to set a tooltip/popup open by default with leaflet. So you have to add it and then open it, so @pcholder sounds to me like the right solution to do this.

Let me know if this answer fix your issue.

Mickaël

[thihathit]

I guess it's also proper way to work with than exposing map object and manipulate.

Thank you everyone for all your help.

[mikebronner]

I have been trying the above example, but am unable to get it work. Any thoughts on what I might be doing wrong?

In HTML:

        <l-marker :lat-lng="[41.823611, -71.422222]" @add="openPopup">
             <l-popup :content="'<div>text</div>'" :options="{ autoClose: false, closeOnClick: false }"></l-popup>
        </l-marker>

In app.js:

        openPopup: function (event) {
            console.log(event.target);
            event.target.openPopup();
        },

It fires the method, but the popup doesn't open, and I see no errors.

[KoRiGaN]

Hi @mikebronner,

Can you try this?

openPopup: function (event) {
    Vue.nextTick(() => {
        event.target.openPopup();
    })
},

I think that when the marker is added to the map, the popup is not yet added to the marker so openPopup has no effect.
You have to delay it somehow.

The situation is not ideal and I should probably add an open property to the popup so it can have a default state.

Hope this helps,

Micka

[mikebronner]

Hi @KoRiGaN , thanks for the suggestion. Unfortunately it didn't work. :( It seems that nextTick() is not triggered at all. (console.log does nothing inside nextick closure).

Would love to see an open-state property added! :)

I was also thinking it might be handy to expose a ready event on the popup where you can specify a callback to the parent marker component?

Any thoughts on what I can try in the meanwhile?

[mikebronner]

Update: this ended up working for me for a single given marker:

        open: function (event) {
            var self = this;
            this.popupTarget = event.target;
            this.$nextTick(function () {
                self.popupTarget.openPopup();
            });
        },

I had to keep a reference to make it work. Now to figure out how to make this work with many dynamic markers. :) my concern is that we can't rely on the order of markers being loaded, as next tick is async, and could potentially respond out of order.

[mikebronner]

Update #2: for anyone interested how I solved this for dynamic markers:

        open: function (event) {
            var self = this;
            Vue.set(this.popupTargets, this.popupTargets.length, event.target);
            this.$nextTick(function () {
                _.each(self.popupTargets, function (target) {
                    target.openPopup();
                });
                _.each(self.popupTargets, function (target, index) {
                    self.popupTargets.splice(1, index);
                });
            });
        },

If anyone has a better way of doing this, please share. :)

[KoRiGaN]

Hi @mikebronner,

Here is a simple example where it works with many markers/popups .

Hope this helps,

Micka

[pmochine]

Just tried to add a listener to the mapobject:

this.mapObject.on('popupopen', () => console.log('test'));

works if someone needs this