How to bring your own content to Virtual Earth (Part 2)

Set up the Framework and add Individual Shapes

In this part we will set the framework for our sample applications and provide the first module which adds individual VEShape-objects to the map. To make it a bit more interesting we will not just add any content but (near) real-time information from a traffic cam.

As mentioned in part 1 the VE MapControl is an AJAX control and since I like the idea of partial page-updates so much we will embed our samples not just in a simple HTML-page but in an AJAX-enabled ASP.NET page. Microsoft provides ASP.NET AJAX as an extension to its Visual Studio. It is available for free download and you can also download for free the ASP.NET AJAX Control Toolkit which provides a number of valuable controls.

Once you have installed the ASP.NET AJAX extensions and the ASP.NET AJAX Control Toolkit you have 2 new templates in your Visual Studio. We are going to develop an ‘ASP.NET AJAX Control Toolkit Web Site’ so that is the template we select:


The wizard will automatically generate a new project, add the necessary DLL’s, the modifications in the web.config and also add ScriptManager to the Default.aspx page:


This ScriptManager is the first important part to AJAX-enable our web site. Now we start adding content. We do that within 3 <div> elements.

  • The first one is basically a header and just for design.
  • The second one – divAccordion – will host an ‘Accordion’ from the ASP.NET AJAX Control Toolkit. This is a nice option for our sample applications since we can easily group content types in different panes and hide inactive panes in a way that we only see the header. You will find some explanations and a preview of the Accordion-control here.We define styles for the header and the content part of the accordion in a CSS and assign these styles to the control. The last parameter of the accordion – AutoSize="Fill" – makes sure that the Accordion always uses all available space in the <div> element. Then we add an ‘AccordionPane’ to the control and within this pane we embed an HTML-control of type checkbox. Next we attach the JavaScript function ‘AddShapes’ to the onclick-event of this control and send a couple of parameters to this function. We will have a look at the meaning of these parameters a little bit later. And finally we create a hyperlink which executes another JavaScript and centers the map on the location where we added the pin.
  • The third <div> element will host our Virtual Earth Map.
<div style="position:absolute; top:0px; left:0px; width:100%; height:60px;" class="header">
    <table style="width:100%" >
        <tr style="vertical-align:top">
            <td style="width:140px; min-width:140px"><img src="IMG/VirtualEarth.gif" alt="Virtual Earth Logo" style="margin-left:5px;" /></td>
            <td><h1 style="min-width:400px">Virtual Earth Demos</h1></td>
            <td style="width:140px; min-width:140px; text-align:right"><a>Version 5<br /></a></td>
<div id="divAccordion" style="position:absolute; top:60px; left:0px; width:240px; margin-left:5px;">
    <ajaxToolkit:Accordion ID="Accordion1" runat="server" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" AutoSize="Fill">
            <ajaxToolkit:AccordionPane ID="paneIndividualShapes" runat="server">
                <Header>Individual Shapes</Header>
                    <input id="cbTrafficCams" type="checkbox" onclick="AddShapes('cbTrafficCams',pplTrafficCam,VEShapeType.Pushpin,51.501002490610155,-0.1260852813720587,'Parliament Square','<img src=''/>','<img src='Camera.png'/>' )" /><a href='javascript:ShowLocation(51.50192414334902, -0.13169646263123205, 17);'>Traffic Cams</a><br />
<div id="divMap" style="position:absolute; top:65px; left:250px; width:400px; height:400px;"></div>

In the <head> of our site we include the JavaScript which implements the Virtual Earth MapControl and also a second one – MyScript.js – which will contain our own code. Well, and of course we also have to include the CSS.

<head runat="server">
    <title>Virtual Earth Demos</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="IMG/favicon.ico" />
    <script src="" type="text/javascript"></script>
    <script src="JS/MyScript.js" type="text/javascript"></script>
    <link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" />

Now we attach our first 2 JavaScript-functions to the body of our web site. One which is being executed when we load the page and another one which is always executed when we resize the browser window. We will use the former to load the Virtual Earth map and the latter to resize our controls in order to use all available screen estate.

<body onload="GetMap();" onresize="Resize();">

Now let’s have a look at our JavaScript – MyScript.js. We define the map as a global variable so that we can access this object from different functions:

var map = null;

The function that will be executed when we load the page is the function GetMap(). It instantiates the Virtual Earth MapControl in our <div>-element with the ID ‘divMap’ and then loads the map centered on the latitude and longitude as shown below. We also determine the zoom-level (18) and the style (‘h’) we want to use and make sure that we don’t switch off the interactivity (false). For more parameters of the LoadMap-method have a look at the SDK. Afterwards we execute the function Resize().

function GetMap()
    map = new VEMap('divMap');
    map.LoadMap(new VELatLong(51.461962075378054, -0.9260702133178665), 18, 'h', false);

Tip: There are many ways to determine the latitude and longitude of a location. Usually you would use a geocoder for this but for a single pair of latitude and longitude coordinates you can also use Live Search Maps. Center the map on your location and then select ‘Share => Permalink’ from the menu. The URL you see contains the latitude and longitude of the center-point (cp) as well as the zoom-level (lvl):

If you have up to 200 points you can add them to a collection in Live Search Maps and share the collection. The URL just contains a Collection-ID which is apparently not helpful but if you open the URL you see that you can subscribe to a RSS-feed:
In fact the RSS-feed is a GeoRSS-feed and if you look at it a bit closer you get all the latitudes and longitudes:

After this short excursion let’s go back to our script. I mentioned that the GetMap() function calls the Resize()-function and here it is:

function Resize()
    var mapDiv = document.getElementById("divMap");
    var accordion = document.getElementById("Accordion1");
    var windowWidth = document.body.clientWidth;
    var windowHeight = document.body.clientHeight;
    var mapWidth = windowWidth - 255;
    var mapHeight = windowHeight  - 70; = mapWidth + "px"; = mapHeight + "px"; = (windowHeight - 65) + "px";
    map.Resize(mapWidth, mapHeight);
    map.ShowMiniMap(mapWidth-205, 13, VEMiniMapSize.Large);

We retrieve the size of the browser client window and adjust the height of the Accordion as well as the height and width of the map. Afterwards we call the Resize-method from the VE MapControl and the we display a minimap. By default the minimap is attached to the Virtual Earth dashboard but I prefer to have it at the right hand side.

At this point you are not quite ready to display a VEShape but you can already admire your first results:


Now let’s go for our shape. Since version 5 Virtual Earth supports the concepts of layers. You can still add shapes to the base layer of the map as you did in version 4 but the layer-concept is much more flexible and allows you to organize different types of content in different layers.:


We will define a global variable for our layer:

var pplTrafficCam = new VEShapeLayer();

In the GetMap-function we set the name for this layer


And then we have the function which is being executed when the onclick-event of the checkbox in our web site is being clicked. As you can see further down this is a very generic script which takes all the necessary information as input-parameters of the function:

  • the name of the control so that we can check if it has been activated or deactivated
  • the name of the layer we want to add the shape to
  • the type of the VEShape and its location
  • the title of its infobox and its details as well as
  • the icon we want to use to mark the position of our VEShape

If you have a look at the parameters we use when we call the JavaScript from you see that the details for the infobox are referencing an image ‘<img src=’’/>&#8217;. This image is being created by traffic cams and made available on the web site ‘Transport for London‘.

If the checkbox has been deactivated we will delete all points. Otherwise we will add the layer to the map, define the VEShape-object and add it to the layer.

function AddShapes(control,layer,type,lat,lon,title,desc,icon)
    if (document.getElementById(control).checked == false) {
    else {
        //Add the Shape-Layer

        //Add the Shape
        var shape = new VEShape(type, new VELatLong(lat,lon));

This is already it. Just for better usability we have added a hyperlink on the web site which centers the map on the location where we just added the pin. This hyperlink will execute the following JavaScript.

function ShowLocation(lat, lon, lvl)
    var cp = new VELatLong(lat, lon);
    map.SetCenterAndZoom(cp, lvl);

Now we’re really done. We have our framework for the further samples and a first one which shows us the images from the traffic cam at ‘Parliament Square’ in London:


The sample application is also available here and contains as always a download-link for the complete source-code.

This entry was posted in Virtual Earth. Bookmark the permalink.

2 Responses to How to bring your own content to Virtual Earth (Part 2)

  1. Cheng says:

    Thats the best Virtual Earth tutorial i can find on the web, thanks Hannes!!!

  2. youssef says:

    thanks it is really nicebut i have a question i need to interact with the map deeply…for example i want to add a push pin with my mouse in any location and store that location … other words need to take data from the mapif u can tell me or tell me about a book it will be very nice and thanks again for this tutorial

Leave a Reply

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

You are commenting using your 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