Async loading data from firebase to HTML page with yandex map embedded
Multi tool use
Async loading data from firebase to HTML page with yandex map embedded
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.
function(init)
.then()
Tried to use async with firebase library script loading - same luck.
async
When same structured data are loaded from local js file (arr.js) - all is working fine: loading, showing, shining.
Thanks in advance
ymaps.ready(init)
.then()
@Chris G Tried this, as well as put map's
function(init) into firebase's promise . No luck ((– d2048
Jun 30 at 9:53
function(init)
Move the
arr.forEach part to a separate function and call that in your then(). Make sure any needed variables are in the outer scope and visible. Check your console for errors.– Chris G
Jun 30 at 10:01
arr.forEach
then()
Try this: jsfiddle.net/khrismuc/320jhmaq
– Chris G
Jun 30 at 10:09
Thank U very much. Just a brilliant help. Take care ))
– d2048
Jun 30 at 10:37
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Not sure whether that's what you tried, but you would have to put
ymaps.ready(init)into.then()I guess. Unless that command assigns a handler.– Chris G
Jun 30 at 9:42