Problems with map.locate() and bounding box

[cahlf]

I'm not sure if this is a bug or if my code is just crap, but in my example I'm taking most of the code from the tutorial, so I think there might be an issue with leaflet itself.

What I want to achieve: I want to locate the user and then load markers dynamically as the user pans according to the actual bounding box of the map. The problem arises when I want to get the bounding box after having located the user. So here is my code, mostly taken from the 'mobile'-tutorial:

var map = L.map('map');

L.tileLayer('http://{s}.tile.cloudmade.com/[API-Key]/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);

map.locate({setView: true, maxZoom: 16});

function onLocationFound(e) {
    L.marker(e.latlng).addTo(map).bindPopup("You are here.").openPopup();
}

map.on('locationfound', onLocationFound);

map.on('moveend', function() {
    console.log("map was panned!");
    console.log("zoom: " + map.getZoom());    // prints out zoom level
    console.log("center: " + map.getCenter());    // prints out map center
    console.log(map.getBounds());    // throws error
});

So there is really nothing special to it. But since I want to load new markers every time the user pans the map, I have to use the 'moveend'-event of the map and get the current bounding box. Here comes the tricky part: when the user is located, the 'moveend'-event seems to be fired. But although I can access the actual zoom level (map.getZoom()) and map center (map.getCenter()), I cannot acces the bounding box. The console error says: "Uncaught Error: Set map center and zoom first." Well, as said before, I can access these two properties, so they must have been set. But I cannot access the bounding box, although the user has been located successfully.

[danzel]

jsfiddle is usually the best way to help track these things down.
Luckily you have all the code there, so setting one up was easy :)

http://jsfiddle.net/WEttA/10/
I've had to disable location as my browser doesn't know where I am.

When I drag the map getBounds works. Are you doing something else special?
That jsfiddle is using leaflet 0.4.4, what version are you on?

[cahlf]

Thanks for your effort danzel, yeah, I should have thought of jsfiddle ;-)
Sorry for not mentioning it, I'm using the latest CDN leaflet 0.4.4.
The problem only occurs when the locate function is used. Setting a static map view works fine, but when locating the user, I somehow can't access the bounding box directly after locating, although locating has been completed successfully and zoom and center are set. The behaviour is the same in jsfiddle as in my test environment. I updated the jsfiddle to my code to make it obvious (take a look at the console the see error i mean): http://jsfiddle.net/MHYRt/2/

[danzel]

Yep that reproduces it easy.
http://jsfiddle.net/MHYRt/3/ (using the -src version of leaflet for readability)

If you don't grab the bounds until map.on('load', ...) or map.on('locationfound', ...) instead of on('moveend', ...) then it will work:
http://jsfiddle.net/MHYRt/5/

The issue is that the map fires 'moveend' before it records that is has loaded, so you can't ask for bounds.
Looks like we should reorder so we set that we've loaded earlier. @mourner thoughts?

[cahlf]

Hey, it's me again ;-)
I just wanted to say that the same problem occurs for map.on('locationerror', onLocationError) as well. See my example; to reproduce the error just disallow the app to locate your browser and uncomment the last line: http://jsfiddle.net/MHYRt/10/

Edit: now using leaflet 0.4.5: http://jsfiddle.net/MHYRt/12/

Regards

[gkatsanos]

I have the exact same problem.

[mourner]

Should be fixed in bd0bc4f