Асинхронная загрузка данных из Firebase на HTML-страницу со встроенной картой Яндекса - PullRequest
Новая
       43

Асинхронная загрузка данных из Firebase на HTML-страницу со встроенной картой Яндекса

0 голосов
/ 30 июня 2018

Я пытаюсь извлечь данные из Firebase на HTML-страницу со встроенной картой Яндекса. Все в порядке, данные приходят, но проблема в том, что данные приходят после карта отображается, поэтому любые маркеры показывают 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial- scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://www.gstatic.com/firebasejs/5.1.0/firebase.js"></script>
  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&mode=debug"></script>
  <!-- connect to firebase and fetch data from there -->
  <script src="./js/firebase.js"></script>
  <!-- load array from file-->
  <!-- <script src="./js/arr.js"></script> -->  
    <title>Page Title</title>
  </head>
  <body>  
  <!-- map here -->
  <div id="map" style="width:800px; height:600px"></div>      
  <!-- markers go into map -->
  <script src="./js/map.js"></script>
</body>
</html>

firebase.js 

// Initialize Firebase
var config = {
 ...
};
firebase.initializeApp(config);
var firebaseDB = firebase.database();
var arr = []

firebaseDB.ref('arr').once('value')
.then((snap) => {
  snap.forEach((item) => {
    arr.push({
      id: item.key,
      ...item.val() 
    })
    console.log('item pushed to arr'); //fires after map rendered
  })
  console.log('arr', arr); // full of data , but too late
})

map.js 

ymaps.ready(init);
var myMap; 

function init() {

myMap = new ymaps.Map("map", {
  center: [56.18, 56.23],
  zoom: 4,
  controls: ['routeButtonControl'],
  behaviors: ['drag']
});

var BalloonContentLayoutClass = ymaps.templateLayoutFactory.createClass('<h3>{{ properties.name }}</h3>');


console.log(arr) // I want it here be filled with data already, but  it is empty (( 

arr.forEach(function (m) {
  var marker = new ymaps.Placemark(
    [m.coords.lat, m.coords.lon],
    {
      name: m.name,
      address: m.address,
      phone: m.phone,
    },
    { balloonContentLayout: BalloonContentLayoutClass }
  );
  myMap.geoObjects.add(marker);
  console.log('marker added')
  });
};

Пытался разместить function(init) карты в обещании .then() в пожарной базе, но безуспешно.

Пытался использовать async с загрузкой скрипта библиотеки Firebase - та же удача.

Когда такие же структурированные данные загружаются из локального файла js (arr.js) - все работает нормально: загрузка, отображение, отображение. Заранее спасибо

...