Virtual Earth Accelerated Compass

This article is written for an old version of the Virtual Earth platform. While still available for reference purposes, it is unlikely to work if implemented.

The commercial version of the Virtual Earth MapControl doesn't feature the nifty compass found on the live MSN Virtual Earth site. Not to worry. We've written a simple implementation of it... source below.

HTML

<div id="Compass" onmousedown="Compass.MouseDown(this)" onmouseup="Compass.MouseUp(this)" onmousemove="Compass.MouseMove(this)"></div>

CSS

#Compass
{
	position:absolute;
	top:200px;
	left:80px;
	height:87px;
	width:87px;
	z-index:31;
	background-image: url('http://virtualearth.msn.com/i/Compass.gif');
}

Javascript

function Compass(){}

Compass.Panning = false;
Compass.MaxScrollSpeed = 15;

Compass.MouseDown = function(sender)
{  
    if(sender.setCapture)
    {
        sender.setCapture();
    }
    
    Compass.Panning = true;
    Compass.Pan(sender);
}

Compass.MouseMove = function(sender)
{
    if(Compass.Panning)
    {
        Compass.Pan(sender);
    }
}

Compass.MouseUp = function(sender)
{   
    if(sender.releaseCapture)
    {
        sender.releaseCapture();
    }
    
    Compass.Panning = false;
    map.StopContinuousPan();
}

Compass.Pan = function(sender)
{
    var dx = GetMousePositionX(window.event) - sender.offsetLeft - (sender.offsetWidth / 2);
    var dy = GetMousePositionY(window.event) - sender.offsetTop - (sender.offsetHeight / 2);
    
    dx = Math.min(Math.max(dx, -Compass.MaxScrollSpeed), Compass.MaxScrollSpeed);
    dy = Math.min(Math.max(dy, -Compass.MaxScrollSpeed), Compass.MaxScrollSpeed);
    
    map.ContinuousPan(dx, dy);
}

function GetMousePositionX(e)
{
    var posX=0;
    
    if(e.pageX)
    {
        posX = e.pageX;
    }
    else if(e.clientX)
    {
        posX = e.clientX + document.body.scrollLeft;
    }
    
    return posX;
}

function GetMousePositionY(e)
{
    var posY = 0;
    
    if(e.pageY)
    {
        posY = e.pageY;
    }
    else if(e.clientY)
    {
        posY = e.clientY + document.body.scrollTop;
    }
    
    return posY;
}

Article contributed by Shawn Miller. Have you got something to contribute?