Virtual Earth Image Viewer

Virtual Earth is a great tool for viewing geo-spatial information on a map. It offers great user experience by being able to pan and zoom the map. Sometimes you may wish you could do this with a static image of your own. In Silverlight you can use DeepZoom to do this but doing this in a regular HTML web page requires a lot of custom JavaScript. So why not use Virtual Earth to do this for you? There are a couple of ways to do this. One is to us MapCruncher and generate a bunch of tile images and then add them to the map as a tile layer. This often results in a large number of tiles. This will work in both 2D and 3D modes which is great if your viewing geo-spatial imagery but if you only need 2D tools there are other options.

Another option is to add the image to the map like a pushpin and to resize it depending on the zoom level. Recently Chris Pendleton blogged about an interesting way to add pushpins to the map by creating image tags and adding them to a div and then adding the div to the map as a shape layer. You can view the post here: http://blogs.msdn.com/virtualearth/archive/2009/04/09/virtual-earth-api-release-information-april-2009.aspx

By expanding upon the methods described in this post we can view an image the same way we view a Virtual Earth map. Here is some sample code that demonstrates how to do this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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 type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>
<script type="text/javascript">

var map = null;
var myLayer = null;
var pinImage = ‘http://www.okanagan.com/ski/sun_peaks_map.jpg’;

//image dimensions used form scaling
var imageHeight = 904;
var imageWidth = 1025;

var previousZoomLevel = null;

//RedrawShapes
function RedrawShapes()
{
    var pixel = map.LatLongToPixel(new VELatLong(85,-180));
    var zoom = map.GetZoomLevel();
    var mapWidth = 256 * Math.pow(2,zoom);
    var mapHeight = mapWidth * imageHeight/imageWidth;
    myLayer.innerHTML = "<img src=’" + pinImage + "’ style=’position:absolute; left:"
+ pixel.x + "px; top:" + pixel.y + "px;width:"+mapWidth+"px;height:"+mapHeight+"px;’ +/>";
}

//View Change Event handler
function EventViewChange()
{
    //if zoom level changed, then redraw the shapes, otherwise do nothing
    //– the map will position the pins on pan properly
    var currentZoomLevel = map.GetZoomLevel();
    if (previousZoomLevel != currentZoomLevel)
    {
        previousZoomLevel = currentZoomLevel;
        ClearShapes();
        RedrawShapes();
    }
}

//Event to respond to Birdseye changes
function EventBirdseyeChanged()
{
    //When Birdseye rotation changes, redraw the shapes
    ClearShapes();
    RedrawShapes();
}

//Clear the shapes
function ClearShapes()
{
    myLayer.innerHTML = ”;
}

//Start Zoom event handler
function EventStartZoom()
{
    //When zoom is staretd clear the shapes before zoom since they will need to be redrawn
    ClearShapes();
}

//Load Map Event Handler
function EventMapLoaded()
{
    //Store previous zoom level as current zoom level
    previousZoomLevel = map.GetZoomLevel();

    CreateLayer();

    //Register for events to update the custom layer
    map.AttachEvent("onchangeview", EventViewChange);
    map.AttachEvent("onstartzoom", EventStartZoom);
    map.AttachEvent("onobliquechange", EventBirdseyeChanged);
    RedrawShapes();
}
function CreateLayer()
{
    //Create the custom layer for the map dynamically on the map surface
    myLayer = document.createElement(‘div’);
    myLayer.style.position = "absolute";
    myLayer.style.top = "0px";
    myLayer.style.left = "0px";
    myLayer.style.width = "500px";
    myLayer.style.height = "400px";
    myLayer.style.zIndex = 1000;
    map.AddCustomLayer(myLayer);
}

function CreateMap()
{
    var mapOptions = new VEMapOptions();
    mapOptions.LoadBaseTiles = false;
    map = new VEMap(‘myMap’);
    map.onLoadMap = EventMapLoaded;
    map.LoadMap(null,1,null,null,null,null,null,mapOptions);
    map.HideDashboard();
    map.HideScalebar();
}
</script>
</head>
<body onload="CreateMap();">
<div id=’myMap’ style="position:relative; width:500px; height:400px;"></div>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s