My Bing Maps and SharePoint Mash up Part 2 XAML Development

So hopefully you found Part 1 nice and easy and are all setup and ready to open Visual Studio 2010.

Select New Project…

Then Select Silverlight and Silverlight Application and give the project and name and click OK.

On the next screen just leave the defaults and click OK.

We have two sets of References to add before we continue the first are the Microsoft.Maps assembly’s to do this right click References under FastFoodMaps1 not the .Web section and select Add Reference browse to C:\Program Files (x86)\Bing Maps Silverlight Control\V1\Libraries and add both .dll files in.

We now need to repeat the process for the SharePoint Silverlight Client Library assembly’s these can be found by default: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin\ select and import both.

You now should have everything wired up ready to go to start the development process. The first file we are going to work with is MainPage.xaml this gives us a split design view of what the Silverlight output is going to look like. The first you’re going to have to do is register the Maps SDK in the XAML, this can be achieved by adding the following xaml to the UserControl tab:

xmlns:m=”clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl”

The next step is to decide on the height and width of the canvas, in this example I have gone with 461x832px you will notice the canvas instantly change. Your UserControl tag is now finished and should look something like:

<UserControl x:Class=”FastFoodMaps1.MainPage”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″

xmlns:m=”clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl”

mc:Ignorable=”d”

d:DesignHeight=”461″ d:DesignWidth=”832″>

The rest of the XAML we are going to add will all be inside the <Grid> tag.

Next you can add the Bing map with the following tag

<m:Map Width=”632″ VerticalAlignment=”Top” HorizontalAlignment=”Left” Name=”FastFoodMap” Center=”-34.74728823685061, 138.62963899970055″ ZoomLevel=”13″ CredentialsProvider=”yourBingMapKey “ Loaded=”FastFoodMap_Loaded” Height=”461″>

</m:Map>

You will need to change the Center location to the one you want to use as well as the ZoomLevel as to how deep you want the map to load by default. I’ve made this a bit smaller than our canvas so we can display other data to the right. You should end up with something like this in the preview window:

To be able to add location pins we are going to add a Layer to the Map, so inside the <m:Map></m:Map tags add the following code:

<m:MapLayer x:Name=”PinLayer” Visibility=”Visible”>

</m:MapLayer>

This won’t really give you much indication that it is there, but we will notice it at the end when we add data to the layer.

The rest of the XAML below is used to add a some components to the right side of our canvas to help display data later you should end up with XAML looking like this:

<UserControl x:Class=”FastFoodMaps1.MainPage”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″

xmlns:m=”clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl”

mc:Ignorable=”d”

d:DesignHeight=”461″ d:DesignWidth=”832″>

<Grid x:Name=”LayoutRoot” Background=”White”>

<m:Map Width=”632″ VerticalAlignment=”Top” HorizontalAlignment=”Left” Name=”FastFoodMap” Center=”-34.74728823685061, 138.62963899970055″ ZoomLevel=”13″ CredentialsProvider=”Ajyh9Pdyi7otKRx3BqPFeXjbzTghFQwee2H7oM-Ml7V0aJR_bxmY7dFSiXNce36r” Loaded=”FastFoodMap_Loaded” Height=”461″>

<m:MapLayer x:Name=”PinLayer” Visibility=”Visible”>

</m:MapLayer>

</m:Map>

<Rectangle Width=”200″ HorizontalAlignment=”Right” Fill=”LightGray” />

<TextBlock x:Name=”Label” Width=”200″ Height=”25″ VerticalAlignment=”Top” HorizontalAlignment=”Right” TextAlignment=”Center” FontSize=”10″ FontWeight=”Bold” TextWrapping=”Wrap”/>

<Image x:Name=”Logo” Margin=”632,72,0,218″ />

<TextBlock x:Name=”Description” Width=”200″ Margin=”632,249,0,93″ TextWrapping=”Wrap” />

<TextBlock x:Name=”Address” Width=”200″ Margin=”632,26,0,395″ TextWrapping=”Wrap” TextAlignment=”Center” />

<TextBlock x:Name=”WebsiteTitle” Width=”200″ Margin=”632,390,0,31″ FontWeight=”Bold” TextWrapping=”Wrap” TextAlignment=”Center” />

<HyperlinkButton Name=”Website” Width=”200″ Margin=”632,390,0,28″ />

</Grid>

</UserControl>

Which in turn gives you:

Easy so far right? ? In Part 3 we will look at wiring this up with some C# code to SharePoint and displaying it on the site.

[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 →