Use Bing Maps as a Dashboard Visualization in SharePoint 2010

In my previous two posts, I have shown how to define a SharePoint list from external data, and how to integrate a simple map into SharePoint.

Now I would like to show how they can be used together in a Dashboard style visualization.

My external list is a collection of Airports around the world (along with descriptions and geographical locations).

I want to create a new list that allows users to place travel requests between two airports, and then visualize those requests on a map like this:

This SharePoint page will consist of a Map WebPart and a List.

Step 1: Create a geographically aware list

I created a Travel Requests List using two columns of External Data from my external Airports List:

Step 2: Read the contents of the Travel Requests list via the REST interface

SharePoint 2010 has the the great facility that allows you to access list data via REST.

Since I am using JQuery in the Map component, this is really useful.

The REST interface (in my instance is http://winsuite2010/sites/FlightTracks/_vti_bin/listdata.svc/TravelRequests )

Here is a fragment of my Travel Requests list:

<pre id="line1"> <m:properties>
        <d:ContentTypeID>0x010013786946E27C1041A4AAE48EEB53186C</d:ContentTypeID>
        <d:Title>PDC Conference</d:Title>
        <d:Approved m:type="Edm.Boolean">true</d:Approved>
        <d:OriginCity>Paris</d:OriginCity>
        <d:OriginCountry>France</d:OriginCountry>
        <d:OriginName>Charles De Gaulle</d:OriginName>
        <d:DestinationCity>Los Angeles</d:DestinationCity>
        <d:DestinationCode>LAX</d:DestinationCode>
        <d:DestinationCountry>United States</d:DestinationCountry>
        <d:DestinationLatitude m:type="Edm.Double">33.9425</d:DestinationLatitude>
        <d:DestinationLongitude m:type="Edm.Double">-118.407222</d:DestinationLongitude>
        <d:DestinationName>Los Angeles International</d:DestinationName>
        <d:OriginCode>CDG</d:OriginCode>
        <d:OriginLatitude m:type="Edm.Double">49.016667</d:OriginLatitude>
        <d:OriginLongitude m:type="Edm.Double">2.55</d:OriginLongitude>
        <d:Id m:type="Edm.Int32">3</d:Id>
        <d:ContentType>Item</d:ContentType>
        <d:Modified m:type="Edm.DateTime">2011-01-01T12:11:24</d:Modified>
        <d:Created m:type="Edm.DateTime">2011-01-01T12:11:24</d:Created>
        <d:CreatedById m:type="Edm.Int32">1</d:CreatedById>
        <d:ModifiedById m:type="Edm.Int32">1</d:ModifiedById>
        <d:Owshiddenversion m:type="Edm.Int32">1</d:Owshiddenversion>
        <d:Version>1.0</d:Version>
        <d:Path>/sites/FlightTracks/Lists/Travel Requests</d:Path>
      </m:properties>
</pre>

Step 3: Adapt the map rendering Javascript to display travel paths

Using JQuery getJSON method, we can easily call this REST service, loop through the elements and add them as geographic objects to the map.


var originIcon = "<div class='OriginAirport'></div>"
var destinationIcon = "<div class='DestinationAirport'></div>"

function GetMap() {
 map = new VEMap('myMap');
 map.LoadMap(null, 1);
}

$(document).ready(function () {
 GetMap();
 GetLocations();
});

function GetLocations() {

 $.getJSON('http://winsuite2010/sites/FlightTracks/_vti_bin/listdata.svc/TravelRequests', function (data) {
 var count = 0;
 $.each(data.d.results, function (i, result) {

 var origin = new VELatLong(result.OriginLatitude, result.OriginLongitude);
 var originShape = new VEShape(VEShapeType.Pushpin, origin);
 originShape.SetCustomIcon(originIcon);
 map.AddShape(originShape);

 var destination = new VELatLong(result.DestinationLatitude, result.DestinationLongitude);
 var destinationShape = new VEShape(VEShapeType.Pushpin, destination);
 destinationShape.SetCustomIcon(destinationIcon);
 map.AddShape(destinationShape);

 var line = new VEShape(VEShapeType.Polyline, [origin, destination]);
 line.HideIcon();

 map.AddShape(line);
 });
 });
}

Step 4: Create better icons for PushPins (Optional)

Add a SharePoint Mapped Folder to Template->Layouts->Styles

Step 5: Define Pushpin look (optional)

Create an empty stylesheet (CSS) file. I called mine FlightTracks.css
I wanted to define the icons in CSS for the origin and destination airports. I wanted to draw circles and didn’t want to use a graphic.

 .OriginAirport
 {
    height: 1em;
    width: 1em;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    border: 0.2em solid #888943;
    background-color: #CACC7F;
    margin: auto;
 }

  .DestinationAirport
 {
    height: 1em;
    width: 1em;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    border: 0.2em solid #B25900;
    background-color: #FF8000;
    margin: auto;
 }

Step 6: Add reference to StyleSheet in in WebPart (Optional)

You can just add the SharePoint CssRegistration control:


<SharePoint:CssRegistration runat="server" ID="css" EnableCssTheming="true" Name="FlightTracks.css" />

Fun Fact: The circle effect is not supported by IE8 and below and will appear as squares. It works with IE9 as well as all major CSS 3 compliant browsers (Firefox, Chrome etc)

Advantages of this approach:

  • Lightweight way of displaying a map and results in SharePoint
  • Works on almost every client / device

Disadvantages of this approach:

  • Requires Internet connection on client machine to display map
  • Internet facing sites may not want to expose the SharePoint REST service in this way
  • Map WebPart does not truly integrate with SharePoint list

[/sourcecode]

Advertisements

2 thoughts on “Use Bing Maps as a Dashboard Visualization in SharePoint 2010

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s