Share via

Integrating MSN Virtual Earth and MapPoint Web Service

  • Article

I've written a few applications using MapPoint's Web Service (MWS) and MSN Virtual Earth (VE), so I figured it might be helpful if I wrote a how to (C#). The flow of the data is fairly simple:

  • User makes a request from a web page (default.aspx)
  • The information is posted to a javascript function which creates a URL string based on the user's input (ve.js)
  • The URL string is posted to a codebehind file of another aspx page (FindNearby.aspx.cs)
  • A stringbuilder is created based on results and posted back to the web page from which if came and uses functions from the map control to render maps and plot pushpins (mapcontrol.js)

There are 4 files you'll need to work with: 

  1. mapcontrol.js - downloaded from Virtual Earth and saved locally to your project.
  2. VE.js - contains functions for XML translation from MWS and sending URLs strings to ASP .Net files
  3. default.aspx - this page contains page elements such as input fields and user interface
  4. FindNearby.aspx - this page will parse a url string onload and hit MWS for geocoding the point and finding the nearest locations

MapControl.js

Since this is downloaded from VE, you won't need to to make any changes to this file.

 

VE.js

The following code should be included in ve.js.

//Create an ActiveXObject 

function GetXmlHttp()
{
 var x = null;
 try { x = new ActiveXObject("Msxml2.XMLHTTP") }
 catch(e)  { try { x = new ActiveXObject("Microsoft.XMLHTTP") }
 catch(e)  { x = null } }
 if(!x && typeof XMLHttpRequest != "undefined") { x = new XMLHttpRequest() }
 return x;
}

//Parse the response from FindNearby.aspx.cs and evaluate

function MWSRequest(url)
{
 var xmlhttp = GetXmlHttp();
 if(xmlhttp)
 {
  xmlhttp.open("GET", url, true);
  xmlhttp.onreadystatechange=function()
  {
   if(xmlhttp.readyState==4)
   {
     var html = xmlhttp.responseText;
     eval(html);
   }
  }
  xmlhttp.send(null);
 }
}

//Create a URL string that will hit FindNearby.aspx

function FindNearby()
{
  var url = "FindNearby.aspx?";
  var p = document.getElementById('TextBox1');
  url += "&pc=" + p.value;
 
  MWSRequest(url);

}

 

Default.aspx

In default.aspx you'll want to include javascript links to mapcontrol.js and ve.js.

    <script src="MapControl.js"></script>
    <script src="VE.js"></script>

Add an onclick() event to your button which calls the FindNearby() javascript function.

<INPUT onclick="FindNearby()" type="button" value="Go!!">

 

FindNearby.aspx

First thing to do is delete all code from FindNearby.aspx except this line:

<%@ Page language="c#" Codebehind="FindNearby.aspx.cs" AutoEventWireup="false" Inherits="VEMWS.FindNearby" %>
Note: this will be specific to your project and file name. My project name is VEMWS and my file is FindNearby.aspx.

Next open FindNearby.aspx.cs and in the Page_Load method add your MWS code. You can use any of the MWS methods such as Find, FindAddress or FindNearby. I've used Find below. You'll need to import the MWS WSDL and add using [ProjectName].[MWSWebServiceName]; to the top of the file.

   string inputPlace = Request["pc"];
   
   FindServiceSoap findService = new FindServiceSoap();
   findService.Credentials = new System.Net.NetworkCredential(MWSUsername, MWSPassword);
   findService.PreAuthenticate = true;
   findService.UserInfoFindHeaderValue = new UserInfoFindHeader();
   findService.UserInfoFindHeaderValue.DefaultDistanceUnit = DistanceUnit.Mile;
   
   FindSpecification findSpec = new FindSpecification();
   findSpec.DataSourceName = "MapPoint.NA";
   findSpec.InputPlace = inputPlace;
   findSpec.Options = new FindOptions();
   findSpec.Options.Range = new FindRange();
   findSpec.Options.Range.Count = 1;
   findSpec.Options.Range.StartIndex = 0;
   findSpec.Options.ResultMask = FindResultMask.LatLongFlag;
   findSpec.Options.SearchContext = 244;
   findSpec.Options.ThresholdScore = .85;
   
   FindResults findResults = findService.Find(findSpec);
   
   FindNearbySpecification findNearbySpec = new FindNearbySpecification();
   findNearbySpec.DataSourceName = "MapPoint.FourthCoffeeSample";
   findNearbySpec.Distance = 50;
   findNearbySpec.Filter = new FindFilter();
   findNearbySpec.Filter.EntityTypeName = "FourthCoffeeShops";
   findNearbySpec.LatLong = findResults.Results[0].FoundLocation.LatLong;
   
   FindResults findNearbyResults = findService.FindNearby(findNearbySpec);

//Then take the results from MWS, create a StringBuilder to create the map control. The stringbuilder is creating javascript code which

   StringBuilder output = new StringBuilder();
   output.Append("var map = null;");
   output.Append("map = new VE_MapControl(" +
                 Convert.ToString(findResults.Results[0].FoundLocation.LatLong.Latitude) +
                 ", " +
                 Convert.ToString(findResults.Results[0].FoundLocation.LatLong.Longitude) +
                 ", " +
                 "13, " +
                 "'h', " +
                 "'absolute', 160, 300, 660, 450);");
       output.Append("document.body.appendChild(map.element);");

//Add pushpins to the VE map based on the results from MWS

       for(int i = 0; i < findNearbyResults.Results.Length; i++)
       {
        output.Append("map.AddPushpin('");
      output.Append(i);
      output.Append("',");
      output.Append(findNearbyResults.Results[i].FoundLocation.LatLong.Latitude);
      output.Append(",");
      output.Append(findNearbyResults.Results[i].FoundLocation.LatLong.Longitude);
      output.Append(", 200, 200, 'pin', '<img border = \"0\" src=\"https://demo.mappoint.net/tap/HTML/RedCircle" +
                    (i + 1) +
                    ",%208,8.gif\">" +

//Finally, output stringbuilder

       Response.Write(output.ToString());

And that's how it's done.