Как динамически добавить данные в Leaflet?

Question

[beduin01]

Есть функция `drawmap` со следующим телом:

function drawmap()
{
    
   var cities = new L.LayerGroup();

    var mbAttr = '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ',
    mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';

    var grayscale  = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
      streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});

    var map = L.map('map', {
      center: [49, 20],
      zoom: 3,
      minZoom: 2,
      layers: [grayscale, cities]
    });

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// Вот эти функции
// var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
// var imageBounds = [[40.712216, -74.22655], [46.773941, -79.12544]];
// L.imageOverlay(imageUrl, imageBounds).addTo(map);

}

Внутри есть функции добавления растрового изображения. Их я закомментировал. Если их раскомментить, то изображение добавится. Проблема в том, что во внешнем фреймворке, который я использую (Vue-js) мне нужно в начале отрисовать карту (вызвать функцию drawmap) и только потом по событию добавить данные. Т.е. сразу в функцию данные я передать не могу. Как мне данные можно добавить динамически?

addTo(map) по отношению к L.imageOverlay это метод или что?

------

Я пробовал сделать как-то так:

ready: function()
          { 

              //drawmap.call(this)
             drawmap.this;
             drawmap()
             
              // this.map = L.map('map').setView([51.505, -0.09], 13);
          },

          methods: 
          { 
              removeSingleRasterFromList: function (index) 
              {
                this.rasters_previews_list.splice(index, 1)
              },

              foo : function()
              {
                console.log("foo from main");

                var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
                var imageBounds = [[40.712216, -74.22655], [46.773941, -79.12544]];
     
                L.imageOverlay(imageUrl, imageBounds).addTo(map); // но вылетает ошибка: TypeError: t.addLayer is not a function
              }
          }

Comments

[OVK2015]

Так объявление var map вынесите из drawmap(). Чтоб доступно было

[beduin01]

OVK2015: если его вынести из drawmap, то придется его как-то отдельно инициализировать?
Сейчас у меня инициализация идет так:
ready: function()
{
drawmap.this;
drawmap()
}

[OVK2015]

beduin01:
Инициализируйте его там где хотите. Само объявление "var map" вынесите на из ф-йии. На уровень файла, к примеру. Иначе, др. ф-циях просто не видят эту переменные. В вашем случае именно map это основа, вокруг кот. крутится вся работа сл слоями. В том числе и слоем imageOverlay