Search code examples
javascriptdom-eventszoomingbing-mapsdrag

How to implement "zoom" and "drag" functionality in Bing Maps 7.0?


I am developing a web application that uses Bing maps 7.0. I was wondering if there was a way to bind a function to a Map class event that listens for when the map is either dragged or zoomed. From what I see in the documentation, the viewchangeend event for the Map class is close to what I am looking for, however this event is called in situations that I do not particularly want to account for, such as if I hide the map's containing div using jQuery or on map creation/initialization. Ideally, I would also like this to be a throttled event, where the handler function gets called after a given amount of time. Any idea on how this could be implemented?

Update

As suggested by psousa, I used the viewchangeend event.

This is the hack around that I tried implementing to sort of try and detect if the map has zoomed or been dragged. I still bind the handler to the viewchangeend event, but this time I check to see if the Northwest coordinates or Southeast coordinates of the map have changed.

var map; // contains Microsoft.Maps.Map instance
var nw;  // contains the NW Microsoft.Maps.LocationRect instance
var se;  // contains the SE Microsoft.Maps.LocationRect instance 

// initialization code goes here some where

Microsoft.Maps.Events.addThrottledHandler(map, "viewchangeend", function(arg) {
            
    var curNW = map.getBounds().getNorthwest();
    var curSE = map.getBounds().getSoutheast();
            
    if (nw.latitude  != curNW.latitude ||
    nw.longitude != curNW.longitude ||
    se.latitude  != curSE.latitude ||
    se.longitude != curSE.longitude)
    {
        nw = curNW;
        se = curSE;

        // Execute actual handler code here
    }
}, 1000);

This code does not work as I had intended. As I'm debugging the code, if I go and hide the map's containing div (using jQuery), I notice that curNW and and curSE do not have the same coordinates as the ones I stored on the previous call. Why is this if I never dragged the map around or zoomed in or out? I am just hiding the map, why would the map's coordinates change? It makes no sense to me. Ideally, I wish Bing maps would provide developers with a zoomend or dragend event so I can say:

Microsoft.Maps.Map.addThrottledHandler(map, "zoomend", handler, 1000);
Microsoft.Maps.Map.addThrottledHandler(map, "dragend", handler, 1000);

Google Maps I believe provides this functionality. If anyone knows a better way to check for these events, please let me know. I don't want to add additional handlers to the elements of the page that may trigger a viewchangeend as there is way to much stuff going on in this page as it is. Appreciate the help.


Solution

  • The viewchangeend and viewchange are the best events for that, so no great alternative there.

    Anyway, you have out-of-the-box support for throttled events. So, instead of:

    Microsoft.Maps.Events.addHandler(map, 'viewchangeend', handler);
    

    you can just use (the last argument uses milliseconds):

    Microsoft.Maps.Events.addThrottledHandler(map, 'viewchangeend', handler, 500);
    

    Reference: http://msdn.microsoft.com/en-us/library/gg427623.aspx