SharePoint 2010 JavaScript OM Mashup with Bing Maps

BingMashup-Sample.zip

I was looking into a map scenario a few weeks back, and came across the Bing Maps AJAX control which is controlled via JavaScript.  I thought it would be cool to pull SharePoint list data via the SharePoint JavaScript client object model, and tie that into the Bing Maps AJAX control.  The map control takes in a latitude and longitude, then maps the location.  You can control the look of the pin icon, the map, and the description associated with the mapped location.  The initial problem is that most people don’t keep track of latitude and longitude, they keep track of addresses.

Luckily the Bing Maps group thought of that, and they exposed a Geocode web service that takes in an address and returns an object with the latitude and longitude.  The trick is that the web service isn’t ASP.Net AJAX aware, so you can’t just point a ServiceReference control at the end point and get a nice JavaScript proxy class back.  Also, in order to authenticate to the Bing Maps web services, you need to setup an application key with the service that is passed as the ApplicationID.  With those limitations, I decided to write a proxy WCF web service that is ASP.Net aware, and handles the call to the Bing Maps Geocode web service.

Sample

At the end of the day, I came up with the following sample.  It’s pretty hardcoded with regards to the SharePoint List and column names.  This could be taken the next step in turning this into a web part with exposed properties for which SharePoint list to pull from, and which columns make up the address.  You can also be pretty creative with the look of the pin and description to make the map more interactive.  The sample consists of the following:

• Bing_GeoCodeServiceProxy.svc – Takes in the address, calls the Bing Maps GeoCode service, returns a custom Address object that contains the latitude and longitude that you can map.  In my case, this web service is hosted in a virtual directory under my SharePoint 2010 site. 
   

  • Bing_GeoCodeServiceProxy class is decorated with AspNetCompatibilityRequirements attribute.  This allows you to add it to the ServiceReference ASP.Net control and get a JavaScript proxy back to make getting the data via JavaScript easy.

   [ServiceContract(Namespace = "")]
  [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
  public class Bing_GeoCodeServiceProxy
  

  • Project has a Service Reference pointing to https://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc/mex

     

  • GetAddress method that does the work of calling the Bing Maps Geocode service

     

  • Exposes an Address class that provides properties to map and display the address

     

• BingMashup.aspx – SharePoint 2010 project that deploys an ASPX page to _Layouts.  The page takes address information from a list called Customers and plots the addresses on a map.  There’s nothing in the code behind, as all the magic is handled in the markup and JavaScript.

   

  • Contains a ServiceReference control to load up a JavaScript proxy class for the proxy WCF Service.  Note that this uses a SciptManagerProxy instead of a ScriptManager control.  This is because the SharePoint 2010 master page uses a ScriptManager.  In order to add additional references, you need to use the ScriptManagerProxy.

 

• • The JavaScript is likely over documented in the sample, so hopefully it will be easy to follow. The main methods are:

    • retrieveListItems  -  This method actually does the SharePoint list lookup asynchronously.

       

    • onSharePointQuerySucceeded  -  This is the method that is called when the SharePoint lookup succeeds.  This method loops through the returned list items, and passes the addresses to the GetLatLong method.

       

    • GetLatLong – Makes the async web service call to get the latitude and longitude for the address.

       

    • PlotAddress – This is called when the proxy web service calls return, then plots the address on the map.

       

• Customers List – This is an out of the box SharePoint 2010 Contacts list, using the default Contact content type.  The list lookup is context driven, so if you browse the page at https://yourserver/sites/test/_layouts/BingMashUp/BingMashup.aspx, then there would need to be a Customers list in https://yourserver/sites/test.  This list exposes the following fields used by the sample:

   

  • Full Name – used to display the contacts name as the Pin on the map.  Also used to display the name in the description when you hover over the location.

     

  • Address, City, and State – These are combined to get the full address that is passed into the proxy WCF service, and eventually into the Bing geocode service.

 

Runtime

Let’s look at what the sample looks like at runtime.  When you browse, the page, it renders the text “Click here to view map”

Click the text, and the following happens:

• Displays a SharePoint Notification in the page using SP.UI.Status.addStatus()

• Makes an async call to retrieve the addresses from the Customers list in the current site using the SharePoint object model

   

• Makes an async call to the custom proxy WCF service to pull the info from Bing Maps GeoCode Service

   

• Plots the addresses as they are returned using the list information to populate the pin and description

• Removes the notification

 

Full sample solution is attached to the blog post.  Some points to make about the sample:

• Using Bing Maps SDK in development is free, but there is licensing if used in production.  Contact your licensing person for pricing.

   

• You need to generate a key to authenticate your calls into the Bing Maps web services at https://www.bingmapsportal.com.  The SDK is also linked from that site, and is very easy to follow with interactive samples. 
   

• Edit the GeoCodeServiceProxy.csproj file and edit the IISUrl and IISAppRootUrl to match an IIS Web Site on your dev box.  When you open the project, Visual Studio 2010 will ask you if you want to create the virtual directory.  The URL has to be valid for that to work.

• Once you get your Bing Maps key, it needs to be entered where it states “Enter Your Key Here” in the Bing_GeoCodeServiceProxy.svc.cs file:

• Update the ServiceReference in BingMashup.aspx.  This should be the URL to your web service that you entered in the GeoCodeServiceProxy.csproj file.

   

• On the Bing Mashup project properties, set the Site URL property to your local SharePoint Server.

 

• Technorati Tags: SharePoint 2010,SP2010,Bing Maps,Mashup,Javascript,Client OM

Comments

• Anonymous
  September 03, 2010
  I'm really glad I came across to your article as this is really helpful. Thank you for sharing this tutorial.