Nokia / HERE maps goes back to level 0 zoom after map.zoomTo

Question

My javascript code loops through some user data and adds each one as a marker to a container. It then adds that container to a nokia map and uses the Display zoomTo to zoom to the bounding box of the container holding all the markers. However, right after that happens, the map just zooms itself all the way back out. The zoomTo call is the very last of my code that executes so it seems like something weird is going on.

    this.finishMapping = function () {
        map.objects.add(multiMapContainer);

        var markerHopefully = multiMapContainer.objects.get(0);

        $.ajax({
            dataType: "jsonp",
            url: "https://route.api.here.com/routing/7.2/calculateroute.json?app_id=WgevZ2m4AF8WHx1TY6GS&app_code=G11AO2dbvCRTdCjfTf-mUw&waypoint0=geo!" + markerHopefully.coordinate.latitude + "," + markerHopefully.coordinate.longitude + "&waypoint1=geo!" + markerHopefully.coordinate.latitude + "," + markerHopefully.coordinate.longitude + "&mode=fastest;car;",
            success: function (data) {
                onRouteCalculated(data)
            },
            jsonp: "jsoncallback"
        });

        function onRouteCalculated(data) {
            if (data.response) {
                var position = data.response.route[0].waypoint[0].mappedPosition;
                var coordinate = new nokia.maps.map.StandardMarker([position.latitude, position.longitude]);
                var tempContainer = new nokia.maps.map.Container();
                tempContainer.objects.add(coordinate);
                map.zoomTo(multiMapContainer.getBoundingBox().merge(tempContainer.getBoundingBox()), false);
            }
        }
    }

I debugged through it in Chrome and I can see that zoomTo does actually zoom to the proper bounding box, but then right after I hit the 'continue' button it jumps back to the highest zoom level.

Answer 1

I recently came across a similar issue. The basic issue was that the containing <DIV> for the map was itself being initialized during the map initialization. My problem was compounded because map.zoomTo() doesn't work during map initialization anyway (since 2.5.3 map loading is always asynchronous)

The crux of the issue was that I was trying to use zoomTo() on a 0x0 pixel map since the <DIV> wasn't displayed yet - hence I ended up with a zoomLevel zero map.

The solution is to add listeners to the map as shown:

map.addListener("displayready", function () {
    if(bbox){map.zoomTo(bbox, false);}
});
map.addListener("resize", function () {
    if(bbox){map.zoomTo(bbox, false);}
});

And set up the bbox parameter as each coordinate is received as shown:

function onCoordinateReceived(coordinate){
   if(bbox){
           bbox = nokia.maps.geo.BoundingBox.coverAll([
           bbox.topLeft, bbox.bottomRight, coordinate]);
   } else {
           bbox = nokia.maps.geo.BoundingBox.coverAll([coordinate]);
   }
   map.zoomTo(bbox, false);
}

So that:

• If the map is already intialized and displayed the zoomTo() in the onCoordinateReceived() will fire
• If the map completes intialization after onCoordinateReceived(), the zoomTo() in the displayready listener will fire.
• If the <DIV> update occurs last, the zoomTo() in the resize listener will fire, which will alter from a zoomed Out map to the "right" zoom level.