CUBE4

SharePoint Blog

My Bing Maps and SharePoint Mash up Part 3 C# Development

Now comes the exciting part, we actually get to write some code and make some things happen, prior to this has been a lot of plumbing to give us a strong foundation on which to build upon, but now we are ready to finally put all the pieces together and get it up on SharePoint along with our Lists we created way back in Part 1.

Open up MainPage.xaml.cs this is the code behind to the canvas we developed in Part 2.

To save time later the first thing we will do is include the references we need, so at the top with the other similar statements add the following using statements:

using Microsoft.SharePoint.Client;

using Microsoft.Maps.MapControl;

using System.Windows.Media.Imaging;


This is one for the SharePoint Client Object Model, one for the Bing Map SDK and finally the Windows Imaging one to assist in displaying the logo’s we saw back in part one.

We also need a global object of ListItemCollection as we are going to use this in a few methods. So add this line before the MainPage() function starts.

ListItemCollection fastfooditems;

The next method we need can be automatically generated if you switch back to our xaml file and double click on the map, you will end up with an empty function like so:

private void FastFoodMap_Loaded(object sender, RoutedEventArgs e)

    {

    }

The first objective of this function will be to get into SharePoint, open the current Web and select the FastFood list we created back in Part 1. This can easily be achieved with the following code:

ClientContext context = ClientContext.Current;

Web web = context.Web;

List fastfoodlist = web.Lists.GetByTitle(“FastFood”);

If you are wanting to have the Map on multiple Webs instead of getting the Current web your going to have to get one by URL instead.

The next objective now we have the list is to actually get the items we want, for this we need to write a small bit of CAML and populate a CamlQuery object.

CamlQuery query = new CamlQuery();

query.ViewXml = “<View>

<Query><Where><Eq>

<FieldRef Name=’Show’ />

<Value Type=’Choice’>Yes</Value>

</Eq></Where></Query></View>”;

This piece of CAML simply gets all items where the column Show is equal to Yes. This is done so we can toggle certain list items on or off without having to edit any of our application. Finally we finish off with the following code to execute our query asynchronously in another Thread.

fastfooditems = fastfoodlist.GetItems(query);

context.Load(fastfooditems);

context.ExecuteQueryAsync(requestSucceeded, requestFailed);

This method is going to attempt to get our items from SharePoint if it succeeds it will call requestSucceeded if it fails requestFailed. Therefore we need to generate these methods.

private void requestSucceeded(object sender, ClientRequestSucceededEventArgs e)

{

}

private void requestFailed(object sender, ClientRequestFailedEventArgs e)

{

}

In my application I have left requestFailed blank, but you may want to add more code to help troubleshoot any problems you may be experiencing. In requestsucceded we need to call the Dispatcher to invoke a function to populate our PinLayer with PushPIns. So add the following line of code to requestSucceeded:

    Dispatcher.BeginInvoke(AddFastFoodPins);

As well as defining a method for AddFastFoodPins:

private void AddFastFoodPins()

{}

The objective of this method is to add the actual pins to the PinLayer for each list item our query retrieved.

First thing we are going to need is a foreach loop to cycle through our collection of ListItem’s in our ListItemCollection fastfooditems:

    foreach (ListItem item in fastfooditems)

{

We then need to create a new Pushpin:

Pushpin pin = new Pushpin();

I then set the following options on the pin:

pin.Tag = item["ID"].ToString();

double latitude = (double)item["Lat"];

double longitude = (double)item["Long"];

Location loc = new Location(latitude, longitude);

pin.MouseEnter += new MouseEventHandler(pin_MouseEnter);

I chose to Tag the pin with the ID column from our FastFood list so that each Pin had a unique identifier, this will help us grab more data for particular pins later on. There are several events that can happen to a pin i.e. MouseEnter, MouseDown, MouseUp etc. Intellisense will give you a good idea of what’s available in this example we will be using the MouseEnter event, if you allow intellisense it will even create the appropriate method for you.

The last line of code we need to get this Pin on the Map is just adding it to our PinLayer:

PinLayer.AddChild(pin, loc);

So all together your function should look something like this:

private void AddFastFoodPins()

{

try

{

foreach (ListItem item in fastfooditems)

{

Pushpin pin = new Pushpin();

pin.Tag = item["ID"].ToString();

double latitude = (double)item["Lat"];

double longitude = (double)item["Long"];

Location loc = new Location(latitude, longitude);

pin.MouseEnter += new MouseEventHandler(pin_MouseEnter);

PinLayer.AddChild(pin, loc);

}

}

catch (Exception e) { Description.Text = e.Message; }

}

Note: in addition I added a try/catch and used the Description textblock we added to our XAML in Part 2 to assist with any troubleshooting that might be required.

So last but not least is the pin_mouseEnter event receiver, the objective of this method is to retrieve the Pushpin we have invoked the event with, get its pin.Tag, remembering this is where we stored the unique value from our fastfooditems list collection. Then find the ListItem in that collection with the same ID. Finally we can use this ListItem to populate the rest of the panel next to our map, there is some extra code there to create an image so we can display it on our Image Component as well as convert the Website column into a URL to use on the HyperLinkButton:

private void pin_MouseEnter(object sender, MouseEventArgs e)

{

Pushpin pin = (Pushpin)sender;

String ID = pin.Tag.ToString();

foreach (ListItem item in fastfooditems)

{

if (item["ID"].ToString().Equals(ID))

{

Label.Text = item["Title"].ToString();

Description.Text = item["Info"].ToString();

FieldUrlValue url = (item["Logo"as FieldUrlValue);

BitmapImage bmi = new BitmapImage(new Uri(url.Url , UriKind.RelativeOrAbsolute));

Logo.Source = bmi;

Address.Text = item["Address"].ToString();

WebsiteTitle.Text = “Website”;

Website.NavigateUri = new Uri(item["Website"].ToString(), UriKind.RelativeOrAbsolute);

}

}

}

Now we must upload the project to SharePoint, to do that go to Build and BuildFastFoodMaps fixing any errors that it highlights. Once the build process has completed successfully head over the project directory in windows explorer and locate the .xap file this is the Silverlight file we need.


Upload this file to any document library on your SharePoint Site and navigate to the page you want to insert it.

Simply edit the page as normal, and go to Insert on the ribbon and then Web Part and insert the Silverlight Web Part which is found under Media and Content.


As soon as you click add you’ll be prompted to the location of your Silverlight .xap file, so point it to the location you uploaded it to.


The last thing to do is edit the Web Part and set the width and height to match the size of the canvas we defined in our xaml in Part 2. Once your done you should end up with something like this:


Mouse over the variety of pins to see the content change in the right pane like this:


Hope you have enjoyed this three part tutorial on how to get a Bing Maps and SharePoint mash up operational. Just in case you’re still having trouble I have uploaded .stp files for both the Logos and FastFood list as well as the xap and source code.

If this was for production you could obviously package it up to be deployed as a SharePoint feature and create the lists automatically in list definitions.

[twitter style="horizontal" float="left"]

About Chris Grist

Chris SharePoint Architect for Beach Energy in Adelaide, South Australia. Chris has specialised in SharePoint for the last few years and has over 12 years experience in the IT Industry. Catch Chris on twitter at @griStdoG View all posts by Chris Grist →
This entry was posted in SharePoint Development and tagged , , , . Bookmark the permalink.

Leave a Comment

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>