Via Virtual Earth

Creating Your First Virtual Earth v1 Page (Part 2) RSS

This article is written for an old version of the Virtual Earth platform. While still available for reference purposes, it is unlikely to work if implemented.

In the first part of this article you learned how to add and use the Virtual Earth map control in your own web page. In this article you will discover how to use some of the other controls that make up the Virtual Earth product.

This article is also available in PDF format.

By the end of this article we will have extended the page we build in part 1 to use the compass control, include the Scratchpad, show the zoom bar and display a scale on the map. The end result should appear as seen in Figure 1.

Figure 1

Setting up the script for the other controls

In part 1 we discovered that the script for the Virtual Earth Map Control can be found at http://virtualearth.msn.com/js/MapControl.js. There is another script file that contains the other controls and widgets that are used with the Virtual Earth map control. This other script file can be found at http://virtualearth.msn.com/js/ve.js.

Again in order to use this script on your site you will need to copy the jscript file to your own domain. If you try to use the script file from the VirtualEarth domain the user will either receive security warnings or not see the controls at all.

You will then need to import that script:

<script src="/ViaVirtualEarth/Portals/0/VE.js"></script>

It is important to note that the other widgets assume that the map control on your page is named �map�.

The Compass control

The first control we are going to add is the compass control. This provides a great way for navigating around the map. The compass is represented by an image, it is best to use a gif with transparency so that the compass does not cover any more of the map than is needed. You can create your own image or copy the image used with this example.

In the OnPageLoad method you can create and position the compass control by creating an element of the document called �VE_Compass� and then setting the element property of VE_Compass.

It is a good idea to extract this out into its own method that is called from the OnPageLoad method.

function CreateCompass()
{
  var el=document.createElement("div");
  el.id="VE_Compass";
  el.style.background="url(images/compass.gif)";
  el.onmousedown=VE_Compass._MouseDown;
  el.onmouseup=VE_Compass._MouseUp;
  el.onmousemove=VE_Compass._MouseMove;
  el.style.position="absolute";
  el.style.top = 100;
  el.style.left = 15;
  el.style.zIndex=31;
  el.style.width = 93;
  el.style.height = 91;
  VE_Compass.element=el;
  document.body.appendChild(el);
}

function OnPageLoad()
{
  CreateCompass();
  ...

The page should now display a compass in the top left corner of the map that you can use to navigate around the map.

The Map Scale Widget

The map scale widget provides feedback as to the scale of the map being displayed. This is useful for estimating distances. The widget is represented by a table with 2 rows. The name of the table and the rows must be exactly as defined in the code below. These names are used by the other code in the VE.js file to update the scale when the map changes.

First add a table to the HTML on the page

<table id="VE_MapScale" cellpadding="0" cellspacing="0" unselectable="on">
  <tr>
    <td>
      <div id="VE_MapScaleLabel" unselectable="on">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="VE_MapScaleBar" unselectable="on">
      </div>
    </td>
  </tr>
</table>

Then add some style class to represent how the scale is displayed. You can play around with these to get a scale widget that you like the look of.

#VE_MapScale
{
  position: absolute;
  width: 150px;
  height: 18px;
  padding: 0;
  margin: 0;
  z-index: 31;
}

#VE_MapScaleLabel
{
  height: 22px;
  font-family: Verdana;
  font-size: 12pt;
  color: black;
  overflow: hidden;
}

#VE_MapScaleBar
{
  width: 150px;
  height: 5px;
  background: green;
  overflow: hidden;
}

To position the scale on the map and update it to display the initial scale, add the following lines to the end of the OnPageLoad method.

PositionElement(document.getElementById("VE_MapScale"), 300, 550, 150, 18);
UpdateMapScale();

Finally the scale needs to be updated each time a zoom has ended. In the OnPageLoad function we added a handler for this event in part 1. Now we need to add a call to update the map scale.

map.onEndZoom=function(e)
{
  document.getElementById("info").innerHTML =
    'Latitude = ' +
    e.latitude +
    ', Longitude = ' +
    e.longitude+'), Zoom=' +
    e.zoomLevel;
  UpdateMapScale();
}

The Zoom control

The zoom control provides a slick user interface for zooming in and out of the map. It also provides visual feedback as to the amount a map can be zoomed and where the current map is on that scale.

In order to add a zoom control to the page we must first add some style classes that describe how the control will look. The control consists of 4 parts; the main bar, the slider, the zoom-out (minus) on the left and the zoom-in (plus) on the right. Each of these parts needs an image file that will be displayed to represent that part of the control.

For this sample I have created simple images that you can copy to get started. The zoom styles in your page should look like this:

.VE_ZoomControl_minus
{
  position: absolute;
  width: 26px;
  height: 32px;
  background: url(images/ZoomOut.gif);
  display: inline;
  text-align: center;
  text-decoration: none;
  color: black;
}

.VE_ZoomControl_plus
{
  position: absolute;
  width: 26px;
  height: 32px;
  background: url(images/ZoomIn.gif);
  display: inline;
  text-align: center;
  text-decoration: none;
  color: black;
}

.VE_ZoomControl_bar
{
  position: absolute;
  width: 128px;
  height: 32px;
  background: url(images/ZoomBar.gif);
  display: inline;
}

.VE_ZoomControl_slider
{
  position: absolute;
  width: 8px;
  height: 24px;
  background: url(images/ZoomSlider.gif);
  overflow: hidden;
  display: inline;
}

The code to create the zoom control can then be added to the end of the OnPageLoad function that we are using to initialise the controls on the page.

var zm=VE_ZoomControl.Create(5, 550, 9, "absolute");
document.body.appendChild(zm);

In order for the zoom control to reflect the current zoom level it will need to be set after each zoom has occurred. So as before with the scale control we need to update the control in the onEndZoom function.

map.onEndZoom=function(e)
{
  document.getElementById("info").innerHTML =
    'Latitude = ' + e.latitude +
    ', Longitude = ' + e.longitude +
    '), Zoom=' + e.zoomLevel;
  UpdateMapScale();
  VE_ZoomControl.SetZoomLevel(map.GetZoomLevel());
}

At this stage we have a web page with a map and three great controls for interacting with the map. The page should look something like that shown in figure 2.

Figure 2

The next control we are going to explore is the most complicated and the one that has the most compelling features; the scratch pad.

Using the Scratch Pad

As with the other controls we need to set the styles for the Scratch Pad. We will start using the same style as Virtual Earth presents.

.VE_Panel_el
{
  overflow: hidden;
  z-index: 31;
  border: 1px solid #cbcbcb;
  padding: 0;
  margin: 0;
  background: white;
}

.VE_Panel_title
{
  position: absolute;
  padding-top: 2px;
  padding-left: 5px;
  overflow: hidden;
  z-index: 32;
  font-family: Verdana,sans-serif;
  font-size: 8pt;
  font-weight: bold;
  color: rgb(230,250,255);
  text-transform: uppercase;
  cursor: default;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.VE_Panel_title_blue
{
  background: #0030cc;
}

.VE_Panel_cb
{
  padding-left: 1px;
  width: 18px;
  height: 18px;
  color: white;
  text-align: center;
  font-size: 7pt;
  font-family: Verdana;
  font-weight: bold;
  overflow: hidden;
  cursor: pointer;
}

.VE_Panel_cb_blue
{
  background: #001d7a;
  border: solid 2px #0030cc;
}

.VE_Panel_tb
{
  height: 18px;
  padding-top: 3px;
  padding-left: 2px;
  font-family: Verdana,sans-serif;
  font-size: 8pt;
  overflow: hidden;
}

.VE_Panel_tb_blue
{
  background: #ccd8ff;
}

.VE_Panel_tb td
{
  font-family: Verdana,sans-serif;
  font-size: 8pt;
}

.VE_Panel_tb a
{
  color: #000080;
}

.VE_Panel_tb a: hover
{
  color: #ff9900;
}

.VE_Panel_body
{
  padding: 5px;
  font-family: Verdana,sans-serif;
  font-size: 8pt;
  overflow: auto;
}

At the end of the OnPageLoad function we can then create and show the Scratch Pad. We need to set the width and height of the window in order that the scratchpad can position itself accordingly. We then call CreatePanel on the Scratch Pad followed by Show.

windowWidth=700;
windowHeight=500;
VE_Scratchpad.CreatePanel();
VE_Scratchpad.Show();

If you view the page in your browser you will now see that the Scratch Pad looks similar to how it looks on the Virtual Earth site, figure 3.

Figure 3

We can now set some properties of the Scratch Pad to change the way it appears. Let�s start with the welcome message or introText as it is named in the Virtual Earth Scratch Pad. It can be set by adding the following simple line before you call CreatePanel on the Scratch Pad:

VE_Scratchpad._introText="Your scratchpad is empty.";

We can also change the Scratch Pad menu items. This is done by the Virtual Earth Scratch Pad in a GetToolbar function. If we provide out own version of this function then we can change the menu. This GetToolbar function simply returns an HTML string of the contents of the menu at the top of the Scratch Pad. In this example we will have Clear and Email (as per the Virtual Earth Scratch Pad) and also an Add menu item. Again this should be declared before we call CreatePanel.

VE_Scratchpad._GetToolbar=function()
{
    var html="<table cellpadding=\"0\" cellspacing=\"0\" ";
    html+="border=\"0\" align=\"left\">";
    html+="<tr><td valign=\"top\" align=\"center\">";
    html+="<a href=\"javascript:VE_Scratchpad.Clear();\" ";
    html+="oncontextmenu=\"return false;\">Clear Pad</a> | ";
    html+="<a href=\"javascript:VE_Scratchpad.Email();\" ";
    html+="oncontextmenu=\"return false;\">Email this...</a> ";
    html+="</td></tr><tr><td> </td></tr></table>";
    return html;
}

These two menu items are calling the VEScratchpad.Clear() and VEScratchpad.Email() functions already declared in Virtual Earth. We can leave them as is to use those functions or we could change them.

Lets change the VEScratchpad.Email function.

VE_Scratchpad.Email=function()
{
  var body="";
  var urlprefix=GetUrlPrefix();
  var first=true;
  var ids="";
  var e=VE_Scratchpad.entities;
  if(e==null||e.length==0)
  {
    alert("Nothing to send!");
    return;
  }
  
  var lengthToSend=Math.min(MaxScratchpadItemsToSend,e.length);
  for(var i=0;i<lengthToSend;i++)
  {
    var escapedID=escape(e[i].GetSerializedId());
    if(!escapedID) {continue;}
    
    body+=escape(e[i].name+"\n"+e[i].description+"\n\n");
    
    if(!first) { ids+=","; }
    
    ids+=escapedID;
    
    first=false;
  }
  
  var allids=escape("Virtual Earth Scratch Pad from Dr. Neil\n" + urlprefix + "\n\n");
  
  window.open('mailto:?subject=My%20Virtual%20Earth%20Scratch%20Pad&body=' + allids + body);
}

Add an item to the scratch pad

Now we can code the Add function to add a new point to the scratch pad. We will use the center point of the map for our location.

VE_Scratchpad.Add=function()
{
  VE_Scratchpad.AddLocation(
    "Point",
    map.GetCenterLatitude(),
    map.GetCenterLongitude(),
    "my added point",
    "LOC");
}

There are things we could do to improve the way this looks. Of course changing the text would be a good idea too!

First we can �steal� some of the look and feel from the cascading style sheet that Virtual Earth uses.

.VE_Pushpin
{
    width: 23px;
    height: 17px;
    font-family: Arial,sans-serif;
    font-weight: bold;
    font-size: 8pt;
    color: White;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    text-align: center;padding-top: 1px;
}

.VE_Pushpin_blue
{
    background: url(http://virtualearth.msn.com/i/pins/blue.gif);
    z-index: 19;
}

On the Virtual Earth site, next to each Scratch Pad item is a cross to remove the item. In the Scratch Pad we have created that cross image needs to be represented on our site. The code in the Virtual Earth Scratch Pad functions is looking for an image with the url <your url>/i/remove.gif. This gif image should be 11x11 pixels in size.

It would be good to add content to the Scratch Pad based on a search.

Finding

In order to do a search we can use the Virtual Earth Search Manager. The only downside of this is that we need to access content that is out side of our domain and that will bring up a security warning to the end user.

IMPORTANT: This will only work if the browser allows cross domain data access. By default many browsers don�t allow this.

In Internet Explorer you can change the access permissions to allow cross domain data access by following these steps:

1. From the Tools menu select Internet Options
2. Select the security tab
3. Click Custom Level
4. In the list find the Miscellaneous section
5. Change the 'Access data sources across domains' to Prompt

Figure 4 � Setting the access permissions to allow cross domain access

At the end of the body section of the HTML page add an input and button control to all the user to enter some text to search for and click the button to start the search.

<input type="button" value="Find" onclick="DoFind()" id="FindButton" name="FindButton" style="position:absolute;left:10px;top:700"/>
<input type="text" name="WhereText" size="20" id="WhereText" style="position:absolute;left:60px;top:700"/>

To the script section of our page add a DoFind function.

function DoFind()
{
  var where = document.getElementById("WhereText").value;
  VE_SearchManager._ResetPaging();
  VE_SearchManager._CancelAllRequests();
  VE_SearchManager.searchPage="http://virtualearth.msn.com/search.aspx";
  VE_SearchManager._DoSearch(where, where);
}

This page will perform a search and center the map at location found. It would now be great to add the found location to the Scratch Pad. In order to achieve this we will need to do more of the search ourselves and create a function to get called when the search has completed.

The new Dofind method now performs much of the activity done in the VE_SEarchManager._DoSearch function.

function DoFind()
{
  var where = document.getElementById("WhereText").value;
  var a="";
  var b=escape(where);
  var c=map.GetLatitude(0);
  var d=map.GetLongitude(windowWidth);
  var e=map.GetLatitude(windowHeight);
  var f=map.GetLongitude(0);
  var g="";
  var i="";
  var r=0;
  var url="http://virtualearth.msn.com/search.aspx"+"?a="+a+"&b="+b+"&c="+c+"&d="+d+"&e="+e+"&f="+f+"&g="+g+"&i="+i+"&r="+r;
  
  if(!VE_SearchManager.xmlHttp)
  {
    VE_SearchManager.xmlHttp=GetXmlHttp();
  }
  
  var xmlHttp=VE_SearchManager.xmlHttp;
  if(xmlHttp)
  {
    xmlHttp.open("POST",url,true);
    xmlHttp.onreadystatechange=FindResponseHandler;
    VE_SearchManager.searching=true;
    xmlHttp.send("");
  }
}

FindResponseHandler=function()
{
  var x = VE_SearchManager.xmlHttp;
  if(x.readyState==4)
  {
    VE_SearchManager.searching = false;
    var code = x.responseText;
    
    try
    {
      eval(code);
    }
    catch(ex){}
    
    VE_Scratchpad.AddLocation(
      document.getElementById("WhereText").value,
      map.GetCenterLatitude(),
      map.GetCenterLongitude(),
      "",
      "LOC");
  }
}

Conclusion

We have now created a web page that allows us to search for a location and add that location to our scratch pad.

The full listing for the page is shown in the listing below.

<html>
  <head>
    <title>My Virtual Earth</title>
    <style type="text/css" media="screen">
    <!--
    .pin
    {
      width:44px;height:17px;
      font-family:Arial,sans-serif;
      font-weight:bold;font-size:8pt;
      color:White;overflow:hidden;
      cursor:pointer;text-decoration:none;
      text-align:center;background:#0000FF;
      border:1px solid #FF0000;
      z-index:5;
    }
    
    #VE_MapScale
    {
      position: absolute;
      width: 150px;
      height: 18px;
      padding: 0;
      margin: 0;
      z-index: 31;
    }
    
    #VE_MapScaleLabel
    {
      height: 22px;
      font-family: Verdana;
      font-size: 12pt;
      color: black;
      overflow: hidden;
    }
    
    #VE_MapScaleBar
    {
      width: 150px;
      height: 5px;
      background: green;
      overflow: hidden;
    }
    
    .VE_ZoomControl_minus
    {
      position: absolute;
      width: 26px;
      height: 32px;
      background: url(images/ZoomOut.gif);
      display: inline;
      text-align: center;
      text-decoration: none;
      color: black;
    }
    
    .VE_ZoomControl_plus
    {
      position: absolute;
      width: 26px;
      height: 32px;
      background: url(images/ZoomIn.gif);
      display: inline;
      text-align: center;
      text-decoration: none;
      color: black;
    }
    
    .VE_ZoomControl_bar
    {
      position: absolute;
      width: 128px;
      height: 32px;
      background: url(images/ZoomBar.gif);
      display: inline;
    }
    
    .VE_ZoomControl_slider
    {
      position: absolute;
      width: 8px;
      height: 24px;
      background: url(images/ZoomSlider.gif);
      overflow: hidden;
      display: inline;
    }
    
    .VE_Panel_el
    {
      overflow: hidden;
      z-index: 31;
      border: 1px solid #cbcbcb;
      padding: 0;
      margin: 0;
      background: white;
    }
    
    .VE_Panel_title
    {
      position: absolute;
      padding-top: 2px;
      padding-left: 5px;
      overflow: hidden;
      z-index: 32;
      font-family: Verdana,sans-serif;
      font-size: 8pt;
      font-weight: bold;
      color: rgb(230,250,255);
      text-transform: uppercase;
      cursor: default;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    
    .VE_Panel_title_blue
    {
      background: #0030cc;
    }
    
    .VE_Panel_cb
    {
      padding-left: 1px;
      width: 18px;
      height: 18px;
      color: white;
      text-align: center;
      font-size: 7pt;
      font-family: Verdana;
      font-weight: bold;
      overflow: hidden;
      cursor: pointer;
    }
    
    .VE_Panel_cb_blue
    {
      background: #001d7a;
      border: solid 2px #0030cc;
    }
    
    .VE_Panel_tb
    {
      height: 18px;
      padding-top: 3px;
      padding-left: 2px;
      font-family: Verdana,sans-serif;
      font-size: 8pt;
      overflow: hidden;
    }
    
    .VE_Panel_tb_blue
    {
      background: #ccd8ff;
    }
    
    .VE_Panel_tb td
    {
      font-family: Verdana,sans-serif;
      font-size: 8pt;
    }
    
    .VE_Panel_tb a
    {
      color: #000080;
    }
    
    .VE_Panel_tb a: hover
    {
      color: #ff9900;
    }
    
    .VE_Panel_body
    {
      padding: 5px;
      font-family: Verdana,sans-serif;
      font-size: 8pt;
      overflow: auto;
    }
    
    .VE_Pushpin
    {
      width: 23px;
      height: 17px;
      font-family: Arial,sans-serif;
      font-weight: bold;
      font-size: 8pt;
      color: White;
      overflow: hidden;
      cursor: pointer;
      text-decoration: none;
      text-align: center;padding-top: 1px;
    }
    
    .VE_Pushpin_blue
    {
      background: url(http: //virtualearth.msn.com/i/pins/blue.gif);
      z-index: 19;
    }
    
    -->
    </style>
    <script src="MapControl.js"></script>
    <script src="VE.js"></script>
    <script>
      var map = null;
      
      function CreateCompass()
      {
        var el = document.createElement("div");
        el.id="VE_Compass";
        el.style.background="url(images/compass.gif)";
        el.onmousedown=VE_Compass._MouseDown;
        el.onmouseup=VE_Compass._MouseUp;
        el.onmousemove=VE_Compass._MouseMove;
        el.style.position="absolute";
        el.style.top = 100;
        el.style.left = 15;
        el.style.zIndex=31;
        el.style.width = 93;
        el.style.height = 91;
        
        VE_Compass.element=el;
        
        document.body.appendChild(el);
      }

      function OnPageLoad()
      {
        CreateCompass();
        
        map = new VE_MapControl(32.69, -117.13, 12, 'r', "absolute", 10, 100, 700, 500);
        document.body.appendChild(map.element);
        
        var updateInfo = function(e)
        {
          document.getElementById("info").innerHTML =
            'Latitude = ' + e.latitude +
            ', Longitude = ' + e.longitude +
            ', Zoom=' + e.zoomLevel;
        }
        
        map.onEndContinuousPan = updateInfo;
        map.onEndZoom = updateInfo;
        
        map.onMouseClick = function(e)
        {
          map.RemovePushpin('pin');
          map.AddPushpin('pin', e.latitude, e.longitude, 88, 34, 'pin', 'MyPin');
        }
      
        PositionElement(document.getElementById("VE_MapScale"), 300, 550, 150, 18);
        UpdateMapScale();
      
        var zm = VE_ZoomControl.Create(5,550,9,"absolute");
        document.body.appendChild(zm);
        
        windowWidth=700;
        windowHeight=500;
      
        VE_Scratchpad.Add=function()
        {
          VE_Scratchpad.AddLocation(
            "Point",
            map.GetCenterLatitude(),
            map.GetCenterLongitude(),
            "my added point",
            "LOC");
        }
      
        VE_Scratchpad.Email=function()
        {
          var body="";
          var urlprefix=GetUrlPrefix();
          var first=true;
          var ids="";
          var e=VE_Scratchpad.entities;
          if(e==null||e.length==0)
          {
            alert("Nothing to send!");
            return;
          }
          
          var lengthToSend=Math.min(MaxScratchpadItemsToSend,e.length);
          for(var i=0;i<lengthToSend;i++)
          {
            var escapedID=escape(e[i].GetSerializedId());
            if(!escapedID) {continue;}
            
            body+=escape(e[i].name+"\n"+e[i].description+"\n\n");
            
            if(!first) { ids+=","; }
            
            ids+=escapedID;
            
            first=false;
          }
          
          var allids=escape("Virtual Earth Scratch Pad from Dr. Neil\n" + urlprefix + "\n\n");
          
          window.open('mailto:?subject=My%20Virtual%20Earth%20Scratch%20Pad&body=' + allids + body);
        }
      
        VE_Scratchpad._GetToolbar=function()
        {
          var html="<table cellpadding=\"0\" cellspacing=\"0\" ";
          html+="border=\"0\" align=\"left\">";
          html+="<tr><td valign=\"top\" align=\"center\">";
          html+="<a href=\"javascript:VE_Scratchpad.Clear();\" ";
          html+="oncontextmenu=\"return false;\">Clear Pad</a> | ";
          html+="<a href=\"javascript:VE_Scratchpad.Email();\" ";
          html+="oncontextmenu=\"return false;\">Email this...</a> ";
          html+="</td></tr><tr><td> </td></tr></table>";
          return html;
        }
      
        VE_Scratchpad._introText="Your scratchpad is empty.";
        VE_Scratchpad.CreatePanel();
        VE_Scratchpad.Show();
      }
      
      function ChangeMapStyle()
      {
        var Aerial = document.getElementById("AerialStyleCheck");
        var Vector = document.getElementById("VectorStyleCheck");
        var s = 'r';
        if (Aerial.checked && Vector.checked)
        {
          s = 'h';
        }
        else if (Aerial.checked)
        {
          s = 'a';
        }
        map.SetMapStyle(s);
      }
      
      function DoPanUp()    { map.ContinuousPan(0,  -10, 20); }
      function DoPanDown()  { map.ContinuousPan(0,   10, 20); }
      function DoPanLeft()  { map.ContinuousPan(-10, 0,  20); }
      function DoPanRight() { map.ContinuousPan(10,  0,  20); }
      
      function DoZoomIn()  { map.ZoomIn(); }
      function DoZoomOut() { map.ZoomOut(); }
      
      function DoFind()
      {
        var where = document.getElementById("WhereText").value;
        var a="";
        var b=escape(where);
        var c=map.GetLatitude(0);
        var d=map.GetLongitude(windowWidth);
        var e=map.GetLatitude(windowHeight);
        var f=map.GetLongitude(0);
        var g="";
        var i="";
        var r=0;
        var url="http://virtualearth.msn.com/search.aspx"+"?a="+a+"&b="+b+"&c="+c+"&d="+d+"&e="+e+"&f="+f+"&g="+g+"&i="+i+"&r="+r;
        
        if(!VE_SearchManager.xmlHttp)
        {
          VE_SearchManager.xmlHttp=GetXmlHttp();
        }
        
        var xmlHttp=VE_SearchManager.xmlHttp;
        if(xmlHttp)
        {
          xmlHttp.open("POST",url,true);
          xmlHttp.onreadystatechange=FindResponseHandler;
          VE_SearchManager.searching=true;
          xmlHttp.send("");
        }
      }
      
      FindResponseHandler=function()
      {
        var x = VE_SearchManager.xmlHttp;
        if(x.readyState==4)
        {
          VE_SearchManager.searching = false;
          var code = x.responseText;
          
          try
          {
            eval(code);
          }
          catch(ex){}
          
          VE_Scratchpad.AddLocation(
            document.getElementById("WhereText").value,
            map.GetCenterLatitude(),
            map.GetCenterLongitude(),
            "",
            "LOC");
        }
      }
    </script>
  </head>
  <body onLoad="OnPageLoad()">
    <div id="info" style="font-size:10pt">
    </div>
    <div id="MapStyle" style="POSITION:absolute;LEFT:470px;TOP:60px">
      <input id="VectorStyleCheck" type="checkbox" name="VectorStyleCheck" onclick="ChangeMapStyle()" checked="checked">
      Street Style
      <input id="AerialStyleCheck" type="checkbox" name="AerialStyleCheck" onclick="ChangeMapStyle()">
      Aerial Style
    </div>
    
    <input type="button" value="Pan Up" onclick="DoPanUp()" id="PanUpButton" name="PanUpButton" style="position:absolute;left:60px;top:600"/>
    <input type="button" value="Pan Left" onclick="DoPanLeft()" id="PanLeftButton" name="PanLeftButton" style="position:absolute;left:10px;top:630"/>
    <input type="button" value="Pan Right" onclick="DoPanRight()" id="PanRightButton" name="PanRightButton" style="position:absolute;left:100px;top:630"/>
    <input type="button" value="Pan Down" onclick="DoPanDown()" id="PanDownButton" name="PanDownButton" style="position:absolute;left:45px;top:660"/>
    <input type="button" value="Zoom In" onclick="DoZoomIn()" id="ZoomInButton" name="ZoomInButton" style="position:absolute;left:250px;top:630"/>
    <input type="button" value="Zoom Out" onclick="DoZoomOut()" id="ZoomOutButton" name="ZoomOutButton" style="position:absolute;left:340px;top:630"/>

    <table id="VE_MapScale" cellpadding="0" cellspacing="0" unselectable="on">
      <tr>
        <td>
          <div id="VE_MapScaleLabel" unselectable="on">
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div id="VE_MapScaleBar" unselectable="on">
          </div>
        </td>
      </tr>
    </table>
     
    <input type="button" value="Find" onclick="DoFind()" id="FindButton" name="FindButton" style="position:absolute;left:10px;top:700"/>
    <input type="text" name="WhereText" size="20" id="WhereText" style="position:absolute;left:60px;top:700"/>
  </body>
</html>