BenLanc BenLanc - 8 days ago 5
Ajax Question

Restrict the min/max zoom on a Bing Map with v7 of the AJAX control?

I'm working on a site that makes use of v7 of the Bing Maps AJAX Control. One of the things I need to do is restrict the zoom level so as to prevent users from zoom in past a certain level, or zoom out past a certain level.

I found a "getZoomRange" method on the Map object, after inspecting it, it simply returns an object literal with "min" and "max" properties. So, I figured overloading it would probably do the trick:

// "map" is our Bing Maps object
map.getZoomRange = function ()
{
return {
max: 14
min: 5
};
};


...but no. It has no effect (it actually has something to do with the appearance of the zoom slider when using the default Dashboard).

Hijacking the event and preventing it from proceeding also seems to have no effect.

Answer

According to Bing Maps support, the only way to do this (which isn't particularly elegant, and results in some unwelcome jitter on the map) is as follows:

// "map" is our Bing Maps object, overload the built-in getZoomRange function
// to set our own min/max zoom
map.getZoomRange = function ()
{
  return {
    max:      14,
    min:      5
  };
};

// Attach a handler to the event that gets fired whenever the map's view is about to change
Microsoft.Maps.Events.addHandler(map,'viewchangestart',restrictZoom);

// Forcibly set the zoom to our min/max whenever the view starts to change beyond them 
var restrictZoom = function ()
{
  if (map.getZoom() <= map.getZoomRange().min) 
  {
    map.setView({
      'zoom':       map.getZoomRange().min,
      'animate':    false
    });
  }
  else if (map.getZoom() >= map.getZoomRange().max) 
  {
    map.setView({
      'zoom':       map.getZoomRange().max,
      'animate':    false
    });
  }
};