B
B
beduin012016-08-06 22:23:36
JavaScript
beduin01, 2016-08-06 22:23:36

How to dynamically add data to Leaflet?

There is a `drawmap` function with the following body:

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 = ;
// L.imageOverlay(imageUrl, imageBounds).addTo(map);

}

Inside there are functions for adding a bitmap. I commented them out. If you uncomment them, the image will be added. The problem is that in the external framework that I use (Vue-js), I need to draw the map at the beginning (call the drawmap function) and only then add data on the event. Those. I can't pass data to the function right away. How can I add data dynamically?
addTo(map) in relation to L.imageOverlay is it a method or what?
------
I tried something like this:
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 = ;
     
                L.imageOverlay(imageUrl, imageBounds).addTo(map); // но вылетает ошибка: TypeError: t.addLayer is not a function
              }
          }

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question