Integrating MSN Virtual Earth and MapPoint Web Service


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=\"http://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.

Comments (3)
  1. Scott says:

    This is really helpful. I have a slightly different requirement and I was wondering if you knew of any ASP.NET 2.0 C# code samples that might accomplish what I need. I need to take a series of lat/lon coordinates out of a SQL Server 2005 database and render then all at once on a map via an ASP.NET 2.0 web site built with Visual Web Developer 2005 Express. The database part is pretty easy for me but I’m not familiar with VE and am new to C#. As many code samples as possible would help. Thanks.

    +++++

    You should check the MSDN forums and ViaVirtualEarth.com. These are the community sites supporting developers. As a tip, you’ll want to control the number of points you render onto a VE map (300 is about the max for perf reasons). Also, the architecture is pretty much hit your SQL db using C# (ASP .NET) and use StringBuilder to store your VE output.

    CP

  2. ConocoPhilips (COP) replaced their MapPoint Web Service Station Finder and Trip Planner with Virtual

Comments are closed.

Skip to main content