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

Javascript examples for Leaflet:Marker

  1. HOME
  2. Javascript
  3. Leaflet
  4. Marker

Description

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

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Vue2Leaflet Map options regression</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"> 
      <script type="text/javascript" src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script> 
      <script type="text/javascript" src="https://unpkg.com/vue2-leaflet@0.0.58/dist/vue2-leaflet.js"></script> 
      <style id="compiled-css" type="text/css">

html, body, #app {
   height: 100%;
   margin: 0;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){/*from  w  w  w.  j  a  v a2 s .  c  om*/
Vue.component('v-map', Vue2Leaflet.Map);
Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
Vue.component('v-marker', Vue2Leaflet.Marker);
Vue.component('v-popup', Vue2Leaflet.Popup);
new Vue({
  el: '#app',
  data() {
    return {
      zoom: 13,
      center: [47.413220, -1.219482],
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      marker: L.latLng(47.413220, -1.219482),
      markers: []
    }
  },
  mounted () {
       window.setTimeout( () => {
        this.markers.push({
          id: 1,
          latlng: L.latLng(47.417220, -1.222482),
          content: 'Hi! this is my popup data'
        });
      }, 1000);
       window.setTimeout( () => {
        this.markers.push({
          id: 2,
          latlng: L.latLng(47.417220, -1.25),
          content: 'Another'
        });
      }, 2000);
  }
});
    }

      </script> 
   </head> 
   <body>  
      <div id="app"> 
         <v-map :zoom="zoom" :center="center"> 
            <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer> 
            <v-marker :lat-lng="marker"></v-marker> 
            <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> 
      </div>   
   </body>
</html>

Related Tutorials