VirtualEarth SDK insight

Welcome to the Virtual Earth SDK insight. This article will present overviews of mapping concepts using Microsoft Virtual Earth. The intent of this post is to present conceptual solutions to some potential issues in the implementation of Virtual Earth in your web applications.

This site is new, so please check back for more examples as they become available. If there are certain issues that you would like to have addressed, please feel free to contact me.

First thing first

Here are the most important features of the Virtual Maps:

1. Map vision in 4 modes: Road, Aerial, Hybrid, and Bird’s Eye (Mostly developed in big towns)
2. Zooming: different zooming levels.
3. Map search: - Finding a certain location you want (e.g. your hometown). In case there is more than a location having the same name, you will have the possibility of choosing from the options listed in a window that will appear on the map.
4. Routes: - Given 2 points, the API offers you directions, distances in KM or Miles (this can be chosen by code and the option can be used by the map users too if they are given some radio buttons in the interface)
5. Tools: Map Cruncher

More useful information can be found on the official Virtual Earth website http://dev.live.com/virtualearth/ .You will find there the latest news about this subject, events, tools and many more.

More of the features of the Map plus a lot of useful source code can be found here . The examples are relevant and diverse.

Many more articles can be found at this link .

Here you can download the SDK .

Virtual Earth can show a 3D vision of the world too. The application is called (you guessed ;) ) Virtual Earth 3D

If you find any other articles and sites that integrate Virtual Earth Maps, feel free to add the links as a comment to this article.

What I like most about this map is that it seems to have many more locations than the other maps. It's true that maybe not all locations are as detailed as you would expect, but at least they exist on the map (e.g. : Locations with <5000> Maps but you won't find them).

And now, lest begin with some examples of what you can do when integrating Virtual Earth on a website. Together with some friends I participated on a project that consisted in a website for a travel agency. The site needed to offer the possibility of visualizing all the existing offers, booking, searching for offers, and many more. Well, the project is still under development but we managed to integrate Virtual Earth so far to help us for example: visualize the offers on a map, where you can "walk" wherever you like to find the offers in the geographical location that you seek to spend your holiday in; or offer the agencies operators the help of simply clicking on a map to add a new location.

Adding push pins on Virtual Earth Map from an XML

First, you need a method in your site that can make an XML with the fields that you want from a database, but I won't touch this subject now. For the following example we will presume it exists. The elements and , call them how do you want, are compulsory in order to populate the map with pins on specific locations. Other information are welcome, but you can decide what is important to you. In the next example I will need the name of the location, the X and Y of the push pin and some other fields that will fill the information window when you roll over the pin.

The XML:


< offersmap >
< offer >
< location >
< name > Constanta < /name >
< lat > 44.1723548929595 < /lat >
< long > 28.5946655273438 < /long >
< /location >
< offerType > Super Deal < /offerType >
< roomType > Ensuit < /roomType >
< accomodation > Perla < /accomodation >
< id > 13 < /id >
< /offer >
< offer >
< location >
< name > Timisoara < /name >
< lat > 45.7560272216797 < /lat >
< long > 21.2063598632813 < /long >
< /location >
< offerType > Super Deal < /offerType >
< roomType > Ensuit < /roomType >
< accomodation > Cerbul < /accomodation >
< id > 14 < /id >
< /offer >
< offer >
< location >
< name > Brasov < /name >
< lat > 45.6774024963379 < /lat >
< long > 25.6036376953125 < /long >
< /location >
< offerType > Super Deal < /offerType >
< roomType > Double < /roomType >
< accomodation > President < /accomodation >
< id > 16 < /id >
< /offer >
< /offersmap >

Like I said, we won't stop now and discuss how this XML was made with information from the database. But we will talk about how to get those exact floating point numbers that represent the position of the push pin on the map later (in another article).
The script that loads the API:

< type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6">
< /script >

Now lets continue with the reading from the XML, put the push pins on the map and help the user interact with the map.

< script type="text/javascript" >


var harta = null;
var latLong=null;
function GetMap(){
harta = new VEMap('divHarta');
harta.LoadMap(new VELatLong(47.330912, 23.610992), 6, 'r', false);
harta.SetMapStyle(VEMapStyle.Hybrid);
harta.AttachEvent("onmouseover",ShapeInfo);
latLong = VELatLong(45,26);// change this to center your own map
latLong = harta.GetCenter();
}
var xmlDoc
function loadXML()
{
GetMap();
//Code for IE
if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load("../OffersMap.xml"); //chenge the location of the file
getMessage()
}
//Code for Mozilla
else if (document.implementation && document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.load("../OffersMap.xml"); //change the location of the file
xmlDoc.onload=getMessage
}
else
{
alert('Your browser cannot handle this script');
}
}


var point1
function getMessage()
{

var i;
for (i=0;i < xmlDoc.getElementsByTagName('offersmap').item(0)
.childNodes.length;i++){
var lat =xmlDoc.getElementsByTagName('offersmap').item(0).getElementsByTagName('offer')
.item(i).getElementsByTagName('location').item(0).getElementsByTagName('lat')
.item(0).firstChild.data;
var lng =xmlDoc.getElementsByTagName('offersmap').item(0).getElementsByTagName('offer')
.item(i).getElementsByTagName('location').item(0).getElementsByTagName('long')
.item(0).firstChild.data;
var name = xmlDoc.getElementsByTagName('offersmap').item(0).getElementsByTagName('offer')
.item(i).getElementsByTagName('location').item(0).getElementsByTagName('name')
.item(0).firstChild.data;
var id= xmlDoc.getElementsByTagName('offersmap').item(0).getElementsByTagName('offer')
.item(i).getElementsByTagName('id').item(0).firstChild.data;
var offerType=xmlDoc.getElementsByTagName('offersmap').item(0)
.getElementsByTagName('offer').item(i).getElementsByTagName('offerType')
.item(0).firstChild.data;
var roomType=xmlDoc.getElementsByTagName('offersmap').item(0).
getElementsByTagName('offer').item(i).getElementsByTagName('roomType').
item(0).firstChild.data;
var accomodation=xmlDoc.getElementsByTagName('offersmap').item(0).
getElementsByTagName('offer').item(i).getElementsByTagName('accomodation').
item(0).firstChild.data;

pioneza = new VELatLong(parseFloat(lat), parseFloat(lng));

var shape = new VEShape(VEShapeType.Pushpin, pioneza );
shape.SetTitle(name);
shape.SetDescription(id+'. '+'Accomodation: '+accomodation+' '+ 'Offer Type: '+offerType+' '+’, RoomType: '+roomType);

harta.AddShape(shape);
}
}
//when you mouse over the push pin, the title of the shape, in this
// case the name of the location will be populated in a textbox for
// further use
function ShapeInfo(e){

var Ashape;
Ashape = harta.GetShapeByID(e.elementID);

document.getElementById("Text1").value = Ashape.GetTitle();
// using an HTML textBox with id=”Text1”
}


< /script >
This is how the mouse hovering the push pin looks like:


Finding a location

You can use the finding location feature and integrate it in your website. All you need is an HTML textbox and an HTML “Find” button. This is the JavaScript code for the FindLoc() method:

function FindLoc(){
var aFindString = document.getElementById("txtHTMLFind").value;


var numResults=1;
try
{
harta.Find(null, aFindString, null, null, 0, numResults,true, true, true, true, MoreResults);

}
catch(e)
{
alert(e.message);
}
}

function MoreResults(){
}


Just add the code where you have invoked the map. For more information about the Find method you can consult the reference manual. This is a powerful method if you use all the fields provided. Here, this is is the result after searching for "Paris": A Paris-centered image at a predefined zoom.



More Virtual Earth tricks and hacks are to be posted, so stay tuned.