I'm trying to fit a map to bounds defined by a 2D array. I keep getting the error Error: Bounds are not valid. leaflet.js:5:21909
even though the markers are added to the map and are valid coords.
var map = L.map('map', { zoomControl:false });
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
map.setView([0, 0], 2);
var markers = new L.FeatureGroup();
map.addLayer(markers);
function drawResults(){
// get offer keys
var offers = new Array();
var articles = [];
offersRef.once("value", function(snapshot) {
var offerKeys = Object.keys(snapshot.val());
for (var i=0; i<offerKeys.length; i++){
var offer = snapshot.val()[offerKeys[i]];
var lat = offer.lat;
var lng = offer.lng;
console.log(lat);// outputs 33.2321
console.log(lng);// outputs 101.1234
offers.push([lat, lng]);
var marker = L.marker([lat, lng]).addTo(markers);
}
});
map.fitBounds(markers.getBounds());
}
console.log(offers);
}
drawResults();
Can anyone see what I'm doing wrong?
Edit: Console logs
35.0721909 app.js:350:13
-106.48798399999998 app.js:351:13
35.0526641 app.js:350:13
-78.87835849999999 app.js:351:13
You will need to move the call to map.fitBounds
into the callback, as the once
method (which looks like a Firebase API call) is likely asynchronous:
offersRef.once("value", function(snapshot) {
var offerKeys = Object.keys(snapshot.val());
for (var i = 0; i < offerKeys.length; i++) {
var offer = snapshot.val()[offerKeys[i]];
var lat = offer.lat;
var lng = offer.lng;
offers.push([lat, lng]);
var marker = L.marker([lat, lng]).addTo(markers);
}
map.fitBounds(markers.getBounds());
});
If it's called outside the callback, there won't be any markers in the feature group and the group's bounds won't be valid.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With