[Vuejs]-Vue leaflet open popup when loaded

by

7👍

✅

There is no property in Vue Leaflet which allows a popup to be open by default. To open a popup programmatically, we need to ref the parent/activator marker component of the popup.

Let’s say below is your template markup

<template>
  <l-map 
    style="height: 350px" 
    :zoom="zoom" 
    :center="center">
    <l-tile-layer :url="url"></l-tile-layer>
    <l-marker ref="marker" :lat-lng="markerLatLng">
      <l-popup ref="popup">
        This is a popup open by default
      </l-popup>
    </l-marker>
  </l-map>
</template>

Then, you can write this mounted lifecycle method to open popup programmatically when it has been loaded.

mounted(){
   this.$nextTick(() => {
      this.$refs.marker.mapObject.openPopup()
   }) 
  }

A working example of this problem can be seen in App.vue file of my sandbox: https://codesandbox.io/s/vue-leaflet-popup-open-by-default-09fcr

👤aby.js

1👍

thanks to aby.js.

I want to add the following to his answer:

use @ready event instead of mounted!

<l-map @ready="ready">
👤kostia7alania

1👍

I have just stumbled across this issue and if you are using Vue.js 3.x, mapObject was replaced by leafletObject:

<l-marker v-for="{ id, markerCoordinate } of id"
  :ref="`marker${id}`" :lat-lng="markerCoordinate">
    <l-popup>

    </l-popup>
</l-marker>

this.$refs[`marker${id}`][0].leafletObject.openPopup()
👤siyb

Leave a comment