Virtual Earth: Restrict Map to Specified Viewable Area And Zoom Scale

Virtual Earth provieds quite powerful API’s to control the viewer. It also has a online Interactive SDK (http://dev.live.com/virtualearth/sdk/) where we can see the use of different API calls.

I was interested to restrict the viewable area and the zoom scale of the viewer. The reason was one of our clients wishes to restrict the users of there site only to the area of interest.

Restrict Viewable Area

For this sample I will restrict the viewer on Bangladesh. To do that first we have to decide the center point of Bangladesh which is 24.0966, 90.4833. Lets consider that we will restrict the user within 400 km from the center point.

First we have to create the map as usual using 24.0966, 90.4833 as center point. And use a global variable for storing the distance.

map = new VEMap('myMap');
map.LoadMap(new VELatLong(24.0966, 90.4833), 10 ,'h' ,false);
var mapRestrictionDistance = 400;

Now we need a javascript function for calculating distance. There are different formulas for measuring distance between two co-ordinates. For this sample I used Haversine formula which is as follows

R = earth’s radius (mean radius = 6,371km)
Δlat = lat₂− lat₁
Δlong = long₂− long₁
a = sin²(Δlat/2) + cos(lat₁).cos(lat₂).sin²(Δlong/2)
c = 2.atan2(√a, √(1−a))
d = R.c

So the javascript function for calculating distance will be

function distHaversine(lat1, lon1, lat2, lon2) {
  var R = 6371; // earth's mean radius in km
  var dLat = (lat2-lat1).toRad();
  var dLon = (lon2-lon1).toRad();
  lat1 = lat1.toRad(), lat2 = lat2.toRad();

  var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
          Math.cos(lat1) * Math.cos(lat2) *
          Math.sin(dLon/2) * Math.sin(dLon/2);
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  var d = R * c;
  return d;
}

Now we have to use the OnEndPan and OnStartPan events. To do this we have to attach the event handlers to these events

//Attach our onendpan event handler
map.AttachEvent(”onendpan”, map_onendpan);

//Attach our onstartpan event handler
map.AttachEvent(”onstartpan”, map_onstartpan);

Next,we need to add code to the event handler method stubs shown above that will actually restrict the maps viewable area.

In the map_onstartpan event handler we will record the maps center point in a global variable before the panning begins. To do this we have to add the following code:

// global variable to keep track of maps center point before panning began
var mapStartPanPoint = null;

function map_onstartpan(e)
{
//Get the current map center point before panning begins
mapStartPanPoint = map.GetCenter();
}

In the map_onendpan event handler we will place the actual code that imposes our restriction. The following code will check if the map has been panned past the desired limitation of 400 km from the original center point. If it has, it will reposition the map back to the last point the map was at before the invalid panning began. Here’s the code to implement this within the map_onendpan event handler:

function map_onendpan(e)
{
//Get total distance panned from map center
var distance = distHaversine(mapOriginalCenterPoint.Latitude, mapOriginalCenterPoint.Longitude,
map.GetCenter().Latitude, map.GetCenter().Longitude);

//Check distance panned from original center point
if (distance > mapRestrictionDistance)
{
//Move map back to the last point that was
//within the desired restriction radius
map.SetCenter(mapStartPanPoint);
}
}

Restrict Maximum Zoom Level

To restrict the Maximum Zooom Level to 7 we need to implement a handler for the maps OnEndZoom event.

var mapRestrictionZoomLevel = 7;

//Attach our onendzoom event handler
map.AttachEvent(”onendzoom”, map_onendzoom);

Now in the event handler function we have to check the zoom level and if it exceds the desired maximum zoom level then we set the zoom level to maximum allowed level that is 7 for our example

function map_onendzoom(e)
{
//Check if the map is zoomed out further than
//the set restriction
if (e.zoomLevel < mapRestrictionZoomLevel)
{
//Zoom the map back in to the restricted area
map.SetZoomLevel(mapRestrictionZoomLevel);
}
}