How to add a marker in Vue2-Leaflet with the popup initially open

Asked By: Anonymous

When adding a marker dynamically, how to set the pop up as initially open?

<v-map>
  <v-marker v-for="item in markers" :key="item.id" :lat-lng="item.latlng">
    <v-popup :content="item.content"></v-popup>
  </v-marker>
</v-map>

Example here: http://jsfiddle.net/manelclos/f7dksf2m/


Solution

Answered By: Anonymous

Vue2leaflet reroutes Leaflet events to Vue via l-[leaflet_event] handlers:

How can I bind events of Vue2Leaflet components ?

All event binding can be done to event called l-[leaflet_event], where
[leaflet_event] is the name of the event from leaflet documentation.

One possible way to have a popup open by default would be to bind the openPopup method of the marker to its add event.

For example, with an inline handler:

<v-map :zoom="zoom" :center="center">
    <v-marker v-for="item in markers" :key="item.id" :lat-lng="item.latlng"
        @l-add="$event.target.openPopup()"
    >
        <v-popup :content="item.content"></v-popup>
    </v-marker>
</v-map>

An updated Fiddle http://jsfiddle.net/f7dksf2m/2/ and a demo

_x000D_

_x000D_

Vue.component('v-map', Vue2Leaflet.Map);_x000D_
Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);_x000D_
Vue.component('v-marker', Vue2Leaflet.Marker);_x000D_
Vue.component('v-popup', Vue2Leaflet.Popup);_x000D_
_x000D_
new Vue({_x000D_
    el: '#app',_x000D_
    data() {_x000D_
        return {_x000D_
            zoom: 13,_x000D_
            center: [47.417220, -1.219482],_x000D_
            url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',_x000D_
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',_x000D_
            marker: L.latLng(47.413220, -1.219482),_x000D_
_x000D_
            markers: []_x000D_
        }_x000D_
    },_x000D_
    mounted () {_x000D_
      window.setTimeout( () => {_x000D_
        this.markers.push({_x000D_
          id: 1,_x000D_
          latlng: L.latLng(47.417220, -1.222482),_x000D_
          content: 'Hi! this is my popup data'_x000D_
        });_x000D_
      }, 1000);_x000D_
_x000D_
      window.setTimeout( () => {_x000D_
        this.markers.push({_x000D_
          id: 2,_x000D_
          latlng: L.latLng(47.417220, -1.24),_x000D_
          content: 'Another'_x000D_
        });_x000D_
      }, 2000);_x000D_
_x000D_
      this.$refs.map.mapObject.on('add', (e) => {_x000D_
        console.log(e)_x000D_
_x000D_
      });_x000D_
    }_x000D_
});

_x000D_

html, body, #app {_x000D_
  height: 200px;_x000D_
  margin: 0;_x000D_
}

_x000D_

<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/leaflet.css" />_x000D_
https://unpkg.com/[email protected]/dist/leaflet.js_x000D_
https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js_x000D_
https://unpkg.com/[email protected]/dist/vue2-leaflet.js_x000D_
_x000D_
  <div id="app">_x000D_
    <v-map ref='map' :zoom="zoom" :center="center">_x000D_
      <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>_x000D_
      <v-marker :lat-lng="marker"></v-marker>_x000D_
        <v-marker v-for="item in markers" :key="item.id" :lat-lng="item.latlng" @l-add="$event.target.openPopup()">_x000D_
          <v-popup :content="item.content"></v-popup>_x000D_
        </v-marker>_x000D_
    </v-map>_x000D_
  </div>

_x000D_

_x000D_

x000D

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno