CODEWITHSUNDEEP
leafletvue.js
Dmitry Bubnenkov
Dmitry Bubnenkov

Reputation: 9869

Can't display leaflet.js map in Vue component

I am getting error:

Here is my code:

var guestContent = Vue.extend({
      template: `
   <div>
    test
   </div>  
          `,
        data: function ()  
            {
              return {
                map: false
              }
            },
          ready: function()
          { 
            this.map = L.map('map').setView([51.505, -0.09], 13);
          },
          methods: 
          { 

          }

        }
        );

var userContent = Vue.extend({
      template: `
              <p>SOME USER CONTENT TEST</p>
          `
        });

var adminContent = Vue.extend({
      template: `
        <p>ADMIN CONTENT TEST</p>

        <div id="map" style="width: 600px; height: 400px"></div>

          `
        });

I am getting next error: Map container not found.

Upvotes: 2

Views: 2360

Answers (2)

Vitaliy Smolyakov
Vitaliy Smolyakov

Reputation: 472

You created 3 different components: guestContent, userContent, adminContent. But you load map only in guestContent which don't has tag with id="map". You need to add map container to template. 

    var guestContent = Vue.extend({
      template: `
   <div id="map" style="width: 600px; height: 400px"></div>
          `,
        data: function ()  
            {
              return {
                map: false
              }
            },
          ready: function()
          { 
            this.map = L.map('map').setView([51.505, -0.09], 13);
          },
          methods: 
          { 

          }

        }
        );

Vue.component('guest-content', guestContent)
new Vue({
  el: '#app'
})

Check this example http://jsfiddle.net/3dqeuoqL/

Upvotes: 1

Linus Borg
Linus Borg

Reputation: 23988

The DOM is not ready when you try to create the map. Wrap it with this.$nextTick().

ready: function() {
  this.$nextTick(function () {
    this.map = L.map('map').setView([51.505, -0.09], 13);
  }
},

Upvotes: 1

Related Questions