Bing Maps Javascript Control as SharePoint Consumer Web Part

I previously showed you how to add the Javascript flavor of Bing Maps to a SharePoint 2010 page, and consume data from a SharePoint list via the handy REST interface.

However the benefits of SharePoint WebParts can be made more readily available by connecting to the List from where the data is published.

The code below extends the Web Part in order to connect to the list of travel requests.

This works by parsing the incoming data to a JSON array that can be easially passed to the ASPX page.

I constructed the JSON with the Json.NET open source library:

/// <summary>
 /// Property that will be read from the ASPX page
 /// </summary>
 public string FlightRequests { get; set; }

 private IWebPartTable _provider;
 private ICollection _tableData;

 public void SetConnectionInterface(IWebPartTable provider)
 _provider = provider;

 if (_provider != null)
 _provider.GetTableData(new TableCallback(GetTableData));

 /// <summary>
 /// Call back method for TableCallback
 /// </summary>
 /// <param name="tableData"></param>
 private void GetTableData(object tableData)
 // Set property to value
 _tableData = (ICollection)tableData;

 if (_provider != null)
 // Discover schema
 PropertyDescriptorCollection props = _provider.Schema;

 // String into which we will write our JSON
 StringBuilder sb = new StringBuilder();
 StringWriter sw = new StringWriter(sb);

 using (JsonWriter jsonWriter = new JsonTextWriter(sw))
 // This is going to be one looooooong string so that Javascript can use it.
 jsonWriter.Formatting = Formatting.None;

 if (props != null && props.Count > 0 && _tableData != null)

 // For each travel request
 foreach (DataRowView o in _tableData)
 int counter = 0;

 // For each 'column' in the list
 foreach (PropertyDescriptor prop in props)
 string propertyName = prop.DisplayName;

 // I really don't like this, but for a valid JSON string we need to strip out the ':' and spaces.
 propertyName = propertyName.Replace(':', ' ');
 propertyName = propertyName.Replace(" ", "");


 if (o[counter] is String)
 string value = o[counter] as String;
 // ... and the commas.. whos know what chaos may ensue?
 value = value.Replace(',', ' ');




 // Finally add this JSON to our FlightRequests string property.
 FlightRequests = sb.ToString();


Then in the ASPX file, get a reference to the string:

 var theFlightRequests = '<%= FlightRequests %>';

and in the Javascript file, process it with the following function:

function SetFlightRequests() {

 var results = JSON.parse(theFlightRequests);

 $.each(results.TravelRequests, function (i, result) {

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

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

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



Leave a Reply

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

You are commenting using your 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