MapForums

Johannes Kebeck's Blog · #1 (**permalink**) 09-25-2007

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

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
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
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 Demosh1>td>
  <td style="width:140px; min-width:140px; text-align:right"><a>Version 5<br />a>td>
  tr>
  table>
 div>
 <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">
  <Panes>
  <ajaxToolkit:AccordionPane ID="paneIndividualShapes" runat="server">
  <Header>Individual ShapesHeader>
  <Content>
  <input id="cbTrafficCams" type="checkbox" onclick="AddShapes('cbTrafficCams',pplTrafficCam,VEShapeTyp  e.Pushpin,51.501002490610155,-0.1260852813720587,'Parliament Square','','' )" /><a href='javascript:ShowLocation(51.50192414334902, -0.13169646263123205, 17);'>Traffic Camsa><br />
  Content>
  ajaxToolkit:AccordionPane>
  Panes>
  ajaxToolkit:Accordion>
 div>
 <div id="divMap" style="position:absolute; top:65px; left:250px; width:400px; height:400px;">div>

In the 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 Demostitle>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="shortcut icon" href="IMG/favicon.ico" />
  <script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5" type="text/javascript">script>
  <script src="JS/MyScript.js" type="text/javascript">script>
  <link href="CSS/StyleSheet.css" rel="stylesheet" type="text/css" />
 head>

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

-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 (1

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);

    Resize();

}

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):
http://maps.live.com/default.aspx?v=2&cp=51.461213~-0.926116&style=h&lvl=18&tilt=-90&dir=0&alt=-1000&encType=1

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;

    mapDiv.style.width = mapWidth + "px";

    mapDiv.style.height = mapHeight + "px";

    accordion.style.height = (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

pplTrafficCam.SetTitle('pplTrafficCam');

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 ''. 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,ic  on)

{
 if (document.getElementById(control).checked == false) {

        layer.DeleteAllShapes();

    }
 else {
 //Add the Shape-Layer
  try
         {

            map.AddShapeLayer(layer);

        }
 catch(e)

        {

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

        shape.SetTitle(title);

        shape.SetDescription(desc);

        shape.SetCustomIcon(icon);

        layer.AddShape(shape);

    }

}

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.

Click here to view the article.

apollolm · #2 (**permalink**) 10-16-2007

Nice work!
I came across this site when looking into a problem I'm having with Virtual Earth JS reference and the AJAX Tookit Accordion control.

All works well in IE, but in Firefox, having the accordion and the Virtual Earth reference causes the Accordion Content to briefly appear when the page loads, then vanish. Viewing the HTML source DOES show the content, and links are still clickable in the Accordion Pane, but all of the content is invisible.

Commenting out the Virtual Earth Javascript reference makes the accordion pane show up properly.

Any ideas why this might be?

Thanks,
Ryan

LinkBacks (?) LinkBack to this Thread: http://www.mapforums.com/how-bring-your-own-content-virtual-earth-part-2-a-6418.html
Posted By	For	Type	Date
VIRTUAL EARTH	This thread	Refback	12-11-2007 01:41 PM
hosthg » Blog Archive » How to bring your own content to Virtual Earth (Part 2)	This thread	Pingback	10-28-2007 09:26 AM
Hannes's Virtual Earth Blog on Technorati	This thread	Refback	09-26-2007 07:50 AM
The Magazine for MapPoint - MP2K Magazine	This thread	Refback	09-25-2007 09:29 PM

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How to bring your own content to Virtual Earth (Part 1)	Johannes Kebeck's Blog	Virtual Earth Blogs	0	09-15-2007 03:25 PM
Virtual Earth @ WPC	VirtualEarth MSDN Blog	Virtual Earth Blogs	0	09-15-2007 02:17 PM
MSN Virtual Earth.	Eric Frost	News and Announcements	0	11-03-2006 11:27 AM
Virtual Earth 4	Eric Frost	MapPoint Web Service and Virtual Earth	0	10-31-2006 10:17 PM
Virtual Earth Video	Eric Frost	MapPoint Web Service and Virtual Earth	0	08-22-2005 03:59 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

MapForums

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

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

LinkBacks (?) LinkBack to this Thread: http://www.mapforums.com/how-bring-your-own-content-virtual-earth-part-2-a-6418.html

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads

LinkBacks (?)
LinkBack to this Thread: http://www.mapforums.com/how-bring-your-own-content-virtual-earth-part-2-a-6418.html