HowToPedia

• To submit an article for a new topic: Add a comment to this post using the link at the bottom and paste the text of your article.
• To suggest an improved or different solution to an existing topic: Add a comment to the post containing the How To topic your submission refers to.

Important: For material that has already been published, please include a link to the original version and a reference to the original author.

Description

Instructions

Add the following JavaScript code to your Virtual Earth application.

function AddCircle(latin, lonin, radius)
{
    var locs = new Array();
    var lat1 = latin * Math.PI/180.0;
    var lon1 = lonin * Math.PI/180.0;
    var d = radius/3956;
    var x;
    for (x = 0; x <= 360; x++)
    {
        var tc = (x / 90)* Math.PI / 2;
        var lat = Math.asin(Math.sin(lat1)*Math.cos(d)+Math.cos(lat1)*Math.sin(d)*Math.cos(tc));
        lat = 180.0 * lat / Math.PI;
        var lon;
         if (Math.cos(lat1)==0)
        {
            lon=lonin; // endpoint a pole
        }
        else
        {
            lon = ((lon1 - Math.asin(Math.sin(tc) * Math.sin(d)/Math.cos(lat1)) + Math.PI) % (2 * Math.PI)) - Math.PI;
        }
        lon = 180.0 * lon / Math.PI;
        var loc = new VELatLong(lat,lon);
        locs.push(loc);
    }
    var poly = new VEPolyline(999, locs, new VEColor(0,255,0,.5) , 4);
    return poly;
}

For more information

Check these resources for additional information:

• Original Thread on Windows Live Development forums: http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=730339&SiteID=1
• Drawing Lines and Polygons section on Virtual Earth SDK: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/VEMapControl/HTML/DrawingLines.asp?frame=true

Author: Ruprect8696

Description

Step-By-Step Instructions

The instructions and sample code are on this article on MSDN: Building a Mashup with the Windows Live Contacts Gadget and Virtual Earth:

For more information

Check these resources for additional information:

• Windows Live Contacts gadget beta: http://dev.live.com/contactsgadget/

Author: Koji Kato (MSFT)

Step-by-Step Instructions

To implement a 'Add a Contact to your Buddy List' feature to an HTML page, add the text below to the HTML page, replacing nada@nowhere.com with the address of the contact you want to add.

msnim:add?contact=nada@nowhere.com

How It Works

Windows Live Messenger includes the ability to use a protocol handler to interact with the Windows Live Messenger Client.  See the Windows Live Messenger Protocol Handler entry on the Glossary for more details about what a protocol handler is, and what other features you can implement using it.

What is a Protocol Handler. 

Example:

 mailto:nada@nowhere.com

• How to Add a Contact to a Buddy List from an HTML page
• How to Start a Chat Session with a Contact from an HTML page
• How to Start a Video Conversation with a Contact from an HTML page
• How to Start a Voice Conversation with a Contact from an HTML page

What is the HowToPedia?

How to Contribute Content to the HowToPedia?

Virtual Earth How To's:

• How To Add a Map to an existing HTML page
• How To Draw a Circle Given a Lat/Long and Radius (in miles)
• How To Integrate the Windows Live Contacts Gadget into a Virtual Earth mashup
• How To Find the User Location (Latitude and Longitude)

Windows Live Messenger How To's:

• How to Add a Contact to a Buddy List from an HTML page
• How to Start a Chat Session with a Contact from an HTML page
• How to Start a Video Conversation with a Contact from an HTML page
• How to Start a Voice Conversation with a Contact from an HTML page

Glossary Entries

• What is a Windows Live Messenger Protocol Handler?

List of Authors

• James Baker (MSFT)
• Koji Kato (MSFT)
• Federico Raggi (MSFT)
• Ruprect8696

Description

Display a Virtual Earth Map inside of a web page, as shown below:

Notes

• This how-to is based on the reference information and source code on the Virtual Earth Interactive SDK. The interactive SDK is a fantastic resource for VE development so check it out! 

Step-By-Step Instructions

Given the following, very bare, HTML page:

<html>
   <head>
      <title></title>
   </head>
   <body>
   </body>
</html>

Follow these instructions to add and display a Virtual Earth map.

1. Add a Content-Type metatag to the HEAD section of the HTML page
2. Insert a reference to the Virtual Earth Map JavaScript control on the HEAD section of the HTML page
3. Add a DIV element to the BODY of the HTML page. The id of the DIV will be used on (5.) to tell Virtual Earth where to display the map. 
4. (Optional) Set style options like width and height
5. Write a JavaScript function that loads the Virtual Earth Map control and set initial parameters. Note than we pass the id of the DIV we added on step (4.) to the map control creator (5.1). 
6. Add the JavaScript function to the Onload property of the HTML page BODY

Here is the modified code with the lines added or changed in bold. The numbers at the right show the corresponding instruction step.

<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">                    (1.)
      <script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>     (2.)
      <script>                                                                                                                          (5.)
      var map = null;
      function GetMap()
      {
         map = new VEMap('myMap');                                                                                       (5.1)
         map.LoadMap();
      }  
      </script>
   </head>
   <body onload="GetMap();">                                                                                               (6.) 
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>           (3.), (4.)
   </body>
</html>

Template Code

Copy and paste the following code to an HTML page in your application:

<html>
   <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
      <script>
      var map = null;
      function GetMap()
      {
         map = new VEMap('myMap');
         map.LoadMap();
      }  
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
   </body>
</html>

References

Check these resources for additional information:

• Virtual Earth Interactive SDK V3.1: http://dev.live-int.com/virtualearth/sdk/
• 'Displaying a Map' article on Virtual Earth Map Control SDK V3.1: http://dev.live-int.com/virtualearth/sdk/ref/HTML/DisplayingMap.htmint.com/virtualearth/sdk/ref/HTML/...

Author: Federico Raggi (MSFT)

Description

JavaScript code that discovers the latitude and longuitude of a user visiting a web page and centers a map around it.

Notes

• Works with Virtual Earth V3. It should also work with Virtual Earth V2, although I haven't tried it.
• Although there are probably better ways to solve this problem, I tried this one and it worked. If you know of alternative mechanisms, or have suggestions for improvement, please post them as a comment to this entry.
• I got the idea for this how-to from an article written by Yousef El-Dardiry and published on Via Virtual Earth.

Step-By-Step Instructions

1. Copy the template code and paste it into your application.
2. Invoke GoToUserLocation() from your application.

Notes:

• GoTOUserLocation should be called after the Virtual Earth mapping control has loaded
• Replace the 'map' object name on SetAutoLocateViewport by the name of the map object in your application.

How the code works:

The JavaScript code consist of three functions:

1. GoToUserLocation(): Invokes the remote Virtual Earth WiFi service by:
   1. Dynamically creating an HTML <script> tag
   2. Setting the 'src' (source) property of the <script> tag to the Virtual Earth WiFi service URL
   3. Appending the <script> tag to the page DOM tree. By appending the <script> element, we force the execution of the code pointed by the 'src' property, in this case the Virtual Earth WiFi service.
2. SetAutoLocateViewport(latitude, longitude, lvl, bl, msg): Centers the map around the latitude and longitude parameters passed to it. The Virtual Earth WiFi service invokes this function passing the user latitude, and longitude as first two parameters.
3. ShowMessage(msg): Displays an error message. The Virtual Earth WiFi service calls this function if it can't find the user location.

Template Code

// WiFiLocator.js
// --------------
// Finds current user latitude and longitude location using Virtual Earth's WiFi location service
//

// URL of Virtual Earth's location service
var WiFiLocatorUrl = "http://virtualearth.msn.com/WiFiIPService/locate.ashx"

// GoToUserLocation() invokes the remote Virtual Earth WiFi service by
// dynamically creating a <script> tag that points to the URL of the WiFi service

function GoToUserLocation()
{
       // Dynamically create <script> tag 
       oScript = document.createElement("script");

       // Set the 'src' property of the <script> tag to the URL of the Virtual Earth WiFi service
       oScript.setAttribute("src", WiFiLocatorUrl);

       // Append the <script> tag to the HTML page DOM tree.
       // This forces the execution of the remote script pointed by the 'src' property,
       // in this case, the Virtual Earth WiFi service.
       head = document.getElementsByTagName("head").item(0);
       head.appendChild(oScript);
}

// SetAutoLocateViewport() centers the map to the latitude and longitude passed to it as parameters.
// This function is invoked by the Virtual Earth WiFi service passing the latitude and
// longitude as the firts two parameters.

function SetAutoLocateViewport(latitude, longitude, lvl, bl, msg)
{
      // Creates a Virtual Earth Latitude/Longitud object...
      var latLong = new VELatLong(latitude, longitude);

     // ... and centers the map around it
     map.SetCenterAndZoom(latLong, 12);
}

// ShowMessage() is called by Virtual Earth WiFi service if it can't find the user location

function ShowMessage(msg)
{
       alert("Couldn't find user latitude and longuitude:" + msg);
}

Alternative Solutions

There are several services that provide IP to location translation services both free or for a charge. Here are a couple I found although I haven't tried them yet:

• Ip2Location.net
• HostIp

For more information

Check these resources for additional information:

• Virtual Earth Interactive SDK V3.1: http://dev.live-int.com/virtualearth/sdk/
• Yousef's article on ViaVirtualEarth: http://viavirtualearth.com/VVE/Articles/ObtainingV...
• <script> entry on DHTML Reference section on MSDN: http://msdn.microsoft.com/library/default.asp?url=...
• 'Script tag Hack' article on XML.com: http://www.xml.com/pub/a/2005/11/09/fixing-ajax-xm...

Author: Federico Raggi (MSFT)