Welcome to MapForums!

Register, sign in, or use Facebook Connect above to join in and participate in the forum.

When you are signed in, this message, the ads in this row, and the red-underlined link ads all go away.

Subscribe to receive our newsletter.
Subscribe Unsubscribe
Results 1 to 2 of 2

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

This is a discussion on How to bring your own content to Virtual Earth (Part 2) within the Bing Maps Blogs & Tweets forums, part of the Blogs category; Set up the Framework and add Individual Shapes In this part we will set the framework for our sample applications ...

  1. #1
    Johannes Kebeck's Blog is offline Senior Member Green Belt
    Join Date
    Sep 2007

    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

    • 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>
    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 ShapesHeader>
    <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 />
    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" />

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

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


    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) {
    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.

    Click here to view the article.

  2. #2
    apollolm is offline Junior Member White Belt
    Join Date
    Oct 2007

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

    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?


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. How to bring your own content to Virtual Earth (Part 1)
    By Johannes Kebeck's Blog in forum Bing Maps Blogs & Tweets
    Replies: 0
    Last Post: 09-15-2007, 03:25 PM
  2. Virtual Earth @ WPC
    By VirtualEarth MSDN Blog in forum Bing Maps Blogs & Tweets
    Replies: 0
    Last Post: 09-15-2007, 02:17 PM
  3. MSN Virtual Earth.
    By Eric Frost in forum News and Announcements
    Replies: 0
    Last Post: 11-03-2006, 11:27 AM
  4. Virtual Earth 4
    By Eric Frost in forum Bing Maps and MapPoint Web Service
    Replies: 0
    Last Post: 10-31-2006, 10:17 PM
  5. Virtual Earth Video
    By Eric Frost in forum Bing Maps and MapPoint Web Service
    Replies: 0
    Last Post: 08-22-2005, 03:59 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59