Samples
“How To” Articles
Color Boxes
AdSense
Articles
Map of Bellevue
Media Player
Resources - Link List
Product List
Page Layout Samples
Features
Secure Page
Multilingual
Photo Gallery

Tandem Server CMS

Getting Started Guide

by John Webb

Interactive maps with Virtual Earth and Tandem Server

03/20/2008

Click the 'Show the Traffic' button to show live traffic

Adding interactive Maps to your site is easy with Virtual Earth.

1. Sign up for an account using Microsoft Passport http://dev.live.com/virtualearth/

2. Select “Use the Interactive SDK Now” http://dev.live.com/virtualearth/sdk/

a. Use the “I want to:” menu to select options

b. Click the “Source Code” tab

c. Copy the Source Code and paste in textpad

3. Remove unnecessary HTML from source code (See example below)

a. Keep only the <script> tags, functions, <div>, and <input> tags
Note: You need to remove the <html>, <head>, and <body> tags because Tandem Server already includes them.

b. Add Try Catch function (see code sample below)
Note: Since you are removing the "onload..." from the body tag you need to add the Try/Catch to fire the getMap() function

4. Log in to the Tandem Server content management system

a. Select the page you want to add the map to

b. Edit the content section

c. Click the HTML view tab at the bottom of the editor

d. Paste the map source code in to the editor

e. Save and Preview your new map

Before cleanup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap(Location, 9);
         }

         function ShowTraffic()
         {
            map.LoadTraffic(true);
            map.ShowTrafficLegend(50,50);
            map.SetTrafficLegendText("The traffic dude!");
         }

         function ClearTraffic()
         {
            map.ClearTraffic();
         }
      </script>
   </head>
   <body onload="GetMap();" style="font-family:Arial">
      <h3>Show the Traffic</h3>
      <p> </p>
      <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
      <input id="showtraffic" type="button" value="Show Traffic" onclick="ShowTraffic();"/>
      <input id="cleartraffic" type="button" value="Clear Traffic" onclick="ClearTraffic();"/>
   </body>
</html>

After Cleanup and Adding Try Catch function:

         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap(Location, 9);
         }

         function ShowTraffic()
         {
            map.LoadTraffic(true);
            map.ShowTrafficLegend(50,50);
            map.SetTrafficLegendText("The traffic dude!");
         }

         function ClearTraffic()
         {
            map.ClearTraffic();
         }
      </script>

      <h3>Show the Traffic</h3>
      <p> </p>
      <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
      <input id="showtraffic" type="button" value="Show Traffic" onclick="ShowTraffic();"/>
      <input id="cleartraffic" type="button" value="Clear Traffic" onclick="ClearTraffic();"/>