I'm trying to retrieve data from firebase to html page with yandex map embedded. All is fine, data comes, but problem is that data comes after the map is rendered, so any markers are showing
<!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')
});
};
Tried to place map's function(init) in firebase's .then() promice, with no luck.
Tried to use async with firebase library script loading - same luck.
When same structured data are loaded from local js file (arr.js) - all is working fine: loading, showing, shining. Thanks in advance
