Why .openPopup() does not work on marker component mapObject ?

[RijaCloud]

Hello there, I am building a spa based on vue2-leafleet, There is many marker displayed in the map and actually I trying to open the popup with the this.$refs.marker[indexOfMyMarker].mapObject.openPopup() but nothing is happening,

I can't provide the full code but there is a sample

<l-map 
  ref="map"
  :center="mapCenter"
  :zoom="zoom"
  map-type-id="terrain">
  <l-draw-toolbar ref="toolbar" position="topright" v-if="enableDrawer == true"/>
  <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
  <l-polygon :lat-lngs="polyJson" color="green"></l-polygon>
  <v-marker-cluster>
      <l-marker :lat-lng="mapCenter" :icon="icon"></l-marker>
      <l-marker
      :key="index"
      v-for="(m, index) in markers"
      :lat-lng="m.position"
      @click="toggleInfoWindow(m,index)"
      :icon="icon"
      ref="marker" 
    >
    <l-popup ref="popup" :content="infoContent"/>

    </l-marker>

  </v-marker-cluster>
  </l-map>

So basically I can access the markers list references by using this.$refs.marker but the thing I don't understand is why nothing is happening when i try to open the popup with this.$refs.marker[indexOfMyMarker].mapObject.openPopup(), without any errors.

What could be the reason ?

Thanks

[mikeu]

Hi @RijaCloud , it is hard to say for sure without knowing what behaviour you are seeing, but I have a couple of guesses you can try looking into that may help.

First, if there is a popup opening on the map when you click on one of the markers (or clusters) but it isn't the one you want, then it's possible what is happening is your code opens a popup, and Leaflet's built-in event handlers immediately open the other one—causing yours to close.

One way around this might be to use this.$nextTick(() => .....openPopUp()) to make yours open after Leaflet's events have fired. Of course then, the opening of your marker would cause the other one to close, so depends too on what behaviour you're after.

Second, I am not sure about the internal workings of the marker cluster library, but it is also possible that the actual marker you added the popup to is not actually even on the map, if it has been replaced by a surrogate for the cluster that it is part of (even if it is a cluster of only one).

That one I'm less sure how you might get around, but one way to diagnose if it had anything to do with the issue would be to simply remove the <v-marker-cluster> and </v-marker-cluster> lines so that all the markers you add get displayed. If you can make it work in that situation, then you know the problem has something to do with how that library interacts with your popups.

[RijaCloud]

@mikeu you were right it was because of the <v-marker-cluster> so my solution was to put a custom marker outside the <v-marker-cluster> and just changing the lat-lngs and popup content with a transparent icon.