How do I correctly zoom to bounds in MapQuest?

Question

I'm attempting to use MQA.TileMap.zoomToRect to set the view-port of a given bounding box.

var cust;
var rect = new MQA.RectLL();
for (var i = 0, len = custs.length; i < len; i++) {
    cust = custs[i];
    poi = new MQA.Poi({lat:cust.lat, lng:cust.lng});
    map.addShape(poi); // This works
    rect.extend(poi.latLng); // Does nothing to `rect'.
}
map.zoomToRect(rect, false); // This fails

It appears that the rect values remain as 0,0 for both lr and ul properties. The call results in the following output in firebog

"NetworkError: 500 Internal Server Error - http://coverage.mqcdn.com/coverage?format=json&jsonp=MQA._covCallback&loc=NaN,NaN,NaN,NaN&zoom=2&projection=sm&cat=map%2Chyb%2Csat"

EDIT: I've added notes to the example that adding a shape works fine, so the poi object is fine, also inspecting poi.latLng is fine.

Answer 1

based on a quick glance, are you sure you are retrieving the lat/long values in your "for" loop? The 500 error shown in firebug has "..&loc=NaN,NaN,NaN,NaN&..." so it looks like you aren't successfully retrieving the lat/long values from the array and instead, retrieving objects.

If you can share more code, I can try to put together an example. Or even show me what your "custs" array looks like in terms of how it's structured. You'll probably need to do something like this:

poi = new MQA.Poi({lat:custs.cust[i].lat, lng:custs.cust[i].lng});

But again, it depends on what your array looks like. You just need to make sure you're looping through all of the individual items in the array and retrieving the lat/long values from each item in the array.

Also, MapQuest has a Developer Network (which I'm sure you've seen if you're using the API!), and there is a forum where you can post code samples and ask for help. MapQuest employees do participate in the forum and could possibly help, too, if you run into trouble.

Hope this helps!

Answer 2

If you put the POI's in a collection you can use the collections getBoundingRect method.

Example:

var collection = new MQA.ShapeCollection();
collection.add( new MQA.Poi( { lat: 0, lng: 0 } ) ); 
collection.add( new MQA.Poi( { lat: 100, lng: 100 } ) );

map.zoomToRect( collection.getBoundingRect() );

EDIT Wont work without

<script
src="http://www.mapquestapi.com/sdk/js/v7.2.s/mqa.toolkit.js?key=<YOURKEY>"></script>