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

Johannes Kebeck's Blog

09-25-2007, 12:50 PM

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 <a href="http://asp.net/ajax/">free download</a> 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: <a href="http://blu1.storage.msn.com/y1pgaVuGim1rV2ZhEwOqGzst_Uql-Z7D9F3btgun5ipb9NNIKyD5r2_Wioo9lFfjxtIKkgAdgCX2mVb-iO3qN0bMNBQu1xz5OE5"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=01-small src="http://blufiles.storage.msn.com/y1pLfDzppuxasgSsmtWQVL0FxTnzzTDeqsyR0zZB7BUihKeHYF LafWmphmNsJ9Qk9zJRsAF0vTqdJo" border=0></a> 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: <a href="http://blufiles.storage.msn.com/y1pLfDzppuxashTzT9PcEUgpd0UfdyQFUy575IiPeivYQtBXv8 scfhCOaO1WiRT7chuw_xiKfOar80"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=02-small src="http://blufiles.storage.msn.com/y1pLfDzppuxashvSBKJzT_Dpmx6kE05DfMxqbvv635aSjT3Ttv 1kRQ5Dofuixpn6I5sC7ZOMRXey3M" border=0></a> 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. <ul> <li>The first one is basically a header and just for design. <li>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 <a href="http://asp.net/AJAX/AjaxControlToolkit/Samples/Accordion/Accordion.aspx">here</a>.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. <li>The third <div> element will host our Virtual Earth Map.</ul><pre><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>
 </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 Shapes</Header>
 <Content>
 <input id="cbTrafficCams" type="checkbox" onclick="AddShapes('cbTrafficCams',pplTrafficCam,VEShapeTyp e.Pushpin,51.501002490610155,-0.1260852813720587,'Parliament Square','<img src=\'http://www.tfl.gov.uk/tfl/livetravelnews/trafficcams/cctv/546501.jpg\'/>','<img src=\'Camera.png\'/>' )" /><a href='javascript:ShowLocation(51.50192414334902, -0.13169646263123205, 17);'>Traffic Cams</a><br />
 </Content>
 </ajaxToolkit:AccordionPane>
 </Panes>
 </ajaxToolkit:Accordion>
</div>
<div id="divMap" style="position:absolute; top:65px; left:250px; width:400px; height:400px;"></div>
</pre><a href="http://11011.net/software/vspaste"></a>
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.<pre><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="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></pre><a href="http://11011.net/software/vspaste"></a>
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.<pre><body onload="GetMap();" onresize="Resize();"></pre><a href="http://11011.net/software/vspaste"></a>
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:<pre>var map = null;</pre><a href="http://11011.net/software/vspaste"></a>
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 <a href="http://msdn2.microsoft.com/en-us/library/bb412546.aspx">LoadMap</a>-method have a look at the SDK. Afterwards we execute the function Resize().<pre>function GetMap()
{
map = new VEMap('divMap');
map.LoadMap(new VELatLong(51.461962075378054, -0.9260702133178665), 18, 'h', false);
Resize();
}</pre><a href="http://11011.net/software/vspaste"></a>
<table cellspacing=0 cellpadding=2 width=783 border=1>
<tbody>
<tr>
<td valign=top width=781>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 <a href="http://maps.live.com/?mkt=en-us">Live Search Maps</a>. 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): <a title="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" href="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">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</a> 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: <a href="http://blufiles.storage.msn.com/y1pLfDzppuxasigQqmM3Ms7xLundLWQjuD0_UjzZ57QCF5y8Ne MIny-j6ZSa-CS1Cw3_31f4vpQhrY"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=image src="http://blufiles.storage.msn.com/y1pLfDzppuxasikiWqnqjzBmOh7QEBXzTuF4AYitL9JDwTdn6n _DLXoqjuImXzSogp9tyEdOYoHLGQ" border=0></a> 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: <a href="http://blufiles.storage.msn.com/y1pLfDzppuxasiCeXzj1rUxHYP-lfztRLCZxg3_r3ZFLM69h7gbRBWGV5zuIwm-L7iPCsj1aPPhwHs"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=05-small src="http://blufiles.storage.msn.com/y1pLfDzppuxasitaTOjcMbie_EdVPsBDd1i-9FH8II6DSDGcrOVRKGsF26whDso5WUZDdhscchZKHk" border=0></a> </tbody></table>
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:<pre>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);
}
</pre><a href="http://11011.net/software/vspaste"></a>
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 <a href="http://msdn2.microsoft.com/en-us/library/bb429585.aspx">Resize</a>-method from the VE MapControl and the we display a <a href="http://msdn2.microsoft.com/en-us/library/bb412549.aspx">minimap</a>. 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:
<a href="http://blufiles.storage.msn.com/y1pLfDzppuxasiwd8p-CxORCiz_ygHI3rWTOU5G6bNVUi2hN_Eq_UXM4O0Z6eNQu4Mrgw 6ogK-BVxQ"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=03-small src="http://blufiles.storage.msn.com/y1pLfDzppuxasiqtDHzAnZJ209iXQGGC1OkfZOzpDaQigrK4YP fRFf9WVhsrbgIhm20mu334C2teIU" border=0></a>
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.:
<a href="http://blufiles.storage.msn.com/y1pLfDzppuxashzzHa4r8kum5o9OYC3DA06Nxmwq_czmOUaU-9MFs8sc8maN20B0RkA7RvPaKLYZK8"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" height=285 alt=image src="http://blufiles.storage.msn.com/y1pLfDzppuxashVX13XByKTDRGUZ2-vNcJ6NvS3FJGzBPUdpjkTksFNvAC3drGAf7iFqzTODM2TkUQ" width=400 border=0></a>
We will define a global variable for our layer:<pre>var pplTrafficCam = new VEShapeLayer();</pre>
<a href="http://11011.net/software/vspaste"></a>In the GetMap-function we set the name for this layer<pre>pplTrafficCam.SetTitle('pplTrafficCam');</pre><a href="http://11011.net/software/vspaste"></a>
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:
<ul>
<li>the name of the control so that we can check if it has been activated or deactivated
<li>the name of the layer we want to add the shape to
<li>the <a href="http://msdn2.microsoft.com/en-us/library/bb412419.aspx">type of the VEShape and its location</a>
<li>the title of its infobox and its details as well as
<li>the icon we want to use to mark the position of our VEShape</ul>
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=\'http://www.tfl.gov.uk/tfl/livetravelnews/trafficcams/cctv/546501.jpg\'/>'. This image is being created by traffic cams and made available on the web site '<a href="http://www.tfl.gov.uk/tfl/livetravelnews/realtime/road/default.asp">Transport for London</a>'.
If the checkbox has been deactivated we will <a href="http://msdn2.microsoft.com/en-us/library/bb429616.aspx">delete all points</a>. Otherwise we will <a href="http://msdn2.microsoft.com/en-us/library/bb412479.aspx">add the layer to the map</a>, define the <a href="http://msdn2.microsoft.com/en-us/library/bb412535.aspx">VEShape-object</a> and <a href="http://msdn2.microsoft.com/en-us/library/bb412436.aspx">add it to the layer</a>.<pre>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);
}
}</pre><a href="http://11011.net/software/vspaste"></a>
This is already it. Just for better usability we have added a hyperlink on the web site which <a href="http://msdn2.microsoft.com/en-us/library/bb412439.aspx">centers the map</a> on the location where we just added the pin. This hyperlink will execute the following JavaScript.<pre>function ShowLocation(lat, lon, lvl)
{
var cp = new VELatLong(lat, lon);
map.SetCenterAndZoom(cp, lvl);
}
</pre><a href="http://11011.net/software/vspaste"></a>
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:
<a href="http://blufiles.storage.msn.com/y1pLfDzppuxasjQ9EPdHyj3QP83hXvEijC2MyRq9xN0_GOUelY JMA-wuT6jGTMFIxhN8QAZa3ajdOw"><img style="border-right:0px;border-top:0px;border-left:0px;border-bottom:0px" alt=06-small src="http://blufiles.storage.msn.com/y1pLfDzppuxashIyp4RajvezxjVA3SpVoiMaEazuBAVJzZ2Zfw EylBIVpgjLyzKJs3eUTOffBQ0Q4s" border=0></a>
The <a href="http://mappointemea.members.winisp.net/IndividualShapes01/IndividualShapes01.aspx">sample application is also available here</a> and contains as always a download-link for the complete source-code.<img src="http://c.services.spaces.live.com/CollectionWebService/c.gif?cid=4819404664324524694&page=RSS%3a+How+to+bring+your+own+content+to+Virtu al+Earth+(Part+2)&referrer=" width="1px" height="1px" border="0" alt=""><img style="position:absolute" alt="" width="0px" height="0px" src="http://c.live.com/c.gif?NC=31263&NA=1149&PI=88469&RF=&DI=3919&PS=85545&TP=johanneskebeck.spaces.live.com&GT1=JohannesKebeck">

Click here to view the article. (http://JohannesKebeck.spaces.live.com/Blog/cns!42E1F70205EC8A96!1792.entry)