CODEWITHSUNDEEP
vue.jsleaflet
Ricou
Ricou

Reputation: 1026

Vue2Leaflet : how to display the tooltip of a specific marker

I'm using nuxt-leaflet (with Vue2Leaflet) and I'm wondering how to display the tooltip of a specific marker after cliquing on a button ("Display tooltip") in my template vue file ?

<template>
  <div>
    <button @click="displayTooltipOfMarker(x)">Display tooltip</button>
    <div id="map-wrap" style="height: 500px; width:100%">
      <no-ssr>
        <l-map :zoom="10" :center="positionInitiale">
          <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
          <l-marker :icon="customIcon" :lat-lng="positionMarqueurHome"></l-marker>

          <l-marker
            v-for="marker in marqueurs"
            :key="marker.id"
            :lat-lng.sync="marker.position"
            @click="alert(marker)"
          >
            <l-popup :content="marker.tooltip"/>
            <l-tooltip :content="marker.tooltip"/>
          </l-marker>
        </l-map>
      </no-ssr>
    </div>
  </div>
</template>

Is it possible ?

Upvotes: 1

Views: 4783

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59328

To open/close Tooltip on external event (like button is your case) the folowing solution could be considered:

get access to Leaflet marker object via $refs attribute:

  <l-marker
    v-for="(marker, index) in markers"
    :key="index"
    ref="markersRef"
    :lat-lng="marker.position"
  >
         <l-popup :content="marker.name"/>
  </l-marker>

and save it into array:

mounted: function() {
    this.$nextTick(() => {
      this.markerObjects = this.$refs.markersRef.map(ref => ref.mapObject);
    });
 }

Once the external event is triggered (e.g. button click) the tooltip is getting displayed like this:

<button @click="displayTooltip(1)">Display</button>

displayTooltip(selectedIndex) {
  this.markerObjects[selectedIndex].openTooltip();
}

Here is a demo for your reference

Upvotes: 4

Related Questions