How To: Skipping Zoom Levels in Virtual Earth

Article
09/07/2007

One of my well respected customers asked me today if we would support the ability to change the way a double click action took place on the map. Specifically, they wanted the ability to double-click on the map and not just zoom in one level, but two or even three. How can this be done? Well, it's supported today - you just need to do a bit of work. :)

Here's the thought process: When a user double-clicks on the map, you'll want to capture the double-click event. When I say capture, I mean you have the ability to tell the Virtual Earth map control, "When someone double-clicks the map, don't do what you normally do! I want to do something different." So, once you've captured the double-click event, you want to then identify which zoom level you're on currently, increase that by however many zoom levels you want to skip to, then set the zoom level to that new number.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src=" https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script >
<script>

var map = null;
var currentZoomLevel;

////////
//New function for double-click
////////
function CustomDoubleClick(e)
{
//Get the current zoom level
currentZoomLevel = map.GetZoomLevel();
//Set the zoom level to the new zoom level by adding 2 to the current zoom level
map.SetZoomLevel(currentZoomLevel + 2);
//Return true to override the Virtual Earth default double-click event
return true;
}

function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
map.SetZoomLevel(10);
try
{
//Attached the new double click event to the map control
map.AttachEvent("ondoubleclick", CustomDoubleClick);

}
catch(err)
{
alert(err.source + ':' + err.message);
}

}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:800px; height:600px;"></div>
</body>
</html>

Now, this is all great if you JUST want to zoom in, but what if you want to zoom in to where the user actually double-clicked on the map? You're going to need a bit more code (just a small bit). There are 2 distinct functions for this - map.SetZoomLevel() and map.SetCenter(). So, you COULD do both of those to set the zoom level and capture where the user click to reverse the pixel to latitude / longitude and then set the center...but why would you that when there's a map.SetCenterAndZoom() method which does both for you in a single function?!

The following shows you how to:

Capture the double-click event
Replace it with a new double-click action
Get the current zoom level
Set a new zoom level
Capture where the user clicked
Convert the user clicked pixel to a latitude/longitude
Then zoom and recenter 2 zoom levels down instead of one

Here's the code:

var map = null;

////////
//New function for double-click
////////
function CustomDoubleClick(e)
{
//Get the current zoom level
var currentZoomLevel;
currentZoomLevel = map.GetZoomLevel();
//Recenter map based on where the user clicked

//Get the x pixel
var x = e.mapX;
//Get the y pixel
var y = e.mapY;
//Create a VEPixel object
pixel = new VEPixel(x, y);

//Convert the pixel to a lat/long

var LL = map.PixelToLatLong(pixel);
//Set the new center (based on where user clicked) and zoom level (two levels
//down from where the user was previously)
map.SetCenterAndZoom(LL, currentZoomLevel + 2);

//Return true to override the Virtual Earth default double-click event
return true;
}

function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
map.SetZoomLevel(10);
try
{
//Attached the new double click event to the map control
map.AttachEvent("ondoubleclick", CustomDoubleClick);

}
catch(err)
{
alert(err.source + ':' + err.message);
}

}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:800px; height:600px;"></div>
</body>
</html>

And, there you have it. Custom zooming in. This architecture will work for overriding most Virtual Earth events, so feel free to try it with the mousewheel or right-click events as well.

How To: Skipping Zoom Levels in Virtual Earth

Additional resources