Bing Maps Silverlight Control Integration with SharePoint 2010 – Integration of Silverlight 4 with SharePoint 2010

In this article I have demonstrated how we can integrate a Silverlight Application with SharePoint 2010. I have used Bing Maps Control for Silverlight as example.

Development Environment

I have used below development Environment for this application

1. Visual Studio 2010 Ultimate Edition

2. SharePoint 2010 Server

3. Silverlight 4.0 Toolkit

4. Bing Maps Silverlight Control SDK

Before starting development you have to install “Bing Maps Silverlight Control SDK” as a prerequisite. You can download the same from “Bing Maps Silverlight Control SDK” .Once you are done with the setup of Development environment the first thing you need to do is to register and create an account at https://www.bingmapsportal.com/ . Once you registered on bing maps portal, you need to provide below information to get an access key for using Bing Maps.

Note: Bing Maps Silverlight Control SDK has development help file attached. If you are new to this control you can use that help file as reference.

Now you are ready to start the development. I have divided the application into 3 parts to understand the development in better way.

1. Create a Silverlight Bing Map Control Application

2. Create a SharePoint Application and Integrate with Silverlight

3. Host Silverlight Web Part to SharePoint Site.

Create a Silverlight Bing Map Control Application :

To start up with Silverlight application, Open Visual Studio 2010 and Select “Silverlight Application Project” from new project window. Give the Application name “silverlightbingmapcontrol” and click on “OK“.

Once you click on “OK” button, you will get another popup window automatically which will ask permission to create a web application which will host your silverlight application in a ASP.NET web application.

Just click on “OK” . It will automatically create a ASP.NET web application which will automatically run to host your silverlight web application.

Once you have done with creation of your Silverlight application the next task is to add the Reference of “Silverlight Bing Map Control” API. As a prerequisite you have already installed the Bing Map SDK to your Development system. So, right click on your Silverlight solution select “Add Reference” and then select the “Microsoft.Maps.MapControl.Common.dll” and “Microsoft.Maps.MapControl.dll”

Now we are left with one more configuration which is use of “Bing Map Web Services”. This web services is used to add additional functionalites to Bing Map control.

To add the reference of web service just right click on the “Silverlight Application” and click on “Add Service Reference”. Then Enter http://dev.virtualearth.net/webservices/v1/geocodeservice/geocodeservice.svc into the Address field and click Go. Give GeocodeService into the Namespace text box and click OK.

Below image showing the overall presentation of Silverlight Application

Now Design one simple XAML file to host the Silverlight Map Control. Below is the sample XAML Code. Where I have used one search text box, one button to search and one Silverlight Bing Map Control

<UserControl x:Class="silverlightbingmapcontrol.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="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal" Grid.Row="0" >
            <TextBox MinWidth="150" Foreground="YellowGreen" Background="#555555" Width="300" Name="txtLocation" />
            <Button Name="Search" MinWidth="100" MinHeight="30" Content="Search" Background="Black" Click="Search_Click">
            </Button>
        </StackPanel>
        <m:Map Name="BingMap"   CredentialsProvider="Your Key" Grid.Row="1"/>
    </Grid>
</UserControl>

You are done. Most interesting point is, whenever you will place the map control with Credentials provider (The Key which you have got by registering the site https://www.bingmapsportal.com/ ) you can view the Map control .
Below is the Snaps from the design view of the application.

To Test your application, just run it. Your corresponding ASP.NET web application will host silverlight application automatically and show you the Silverlight Map control inside asp.net web page.

Now we can integrate the silverlight application with our SharePoint application. But to make it little bit more interesting I have used Bing Map Web Service to locate particular location with in map.

I have used the same code snippet from Bing SDK which is common to read the GeoCode for particular location. Using Bing Maps Geocode Service we can retrieve the coordinates of the user location inputs.

        /// <summary>
        /// Geocodes the specified STR address.
        /// This method accepts a geocode query string as well as a ‘waypoint index’, which will be used to track each asynchronous geocode request.
        /// </summary>
        /// <param name="strAddress">The STR address.</param>
        /// <param name="waypointIndex">Index of the waypoint.</param>
        private void Geocode(string strAddress, int waypointIndex)
        {
            // Create the service variable and set the callback method using the GeocodeCompleted property.
            GeocodeService.GeocodeServiceClient geocodeService = new GeocodeService.GeocodeServiceClient("BasicHttpBinding_IGeocodeService");
            geocodeService.GeocodeCompleted += new EventHandler<GeocodeService.GeocodeCompletedEventArgs>(geocodeService_GeocodeCompleted);
            GeocodeService.GeocodeRequest geocodeRequest = new GeocodeService.GeocodeRequest();
            geocodeRequest.Credentials = new Credentials();
            geocodeRequest.Credentials.ApplicationId = ((ApplicationIdCredentialsProvider)BingMap.CredentialsProvider).ApplicationId;
            geocodeRequest.Query = strAddress;
            geocodeService.GeocodeAsync(geocodeRequest, waypointIndex);
        }

GeocodeCompleted property of the service client variable is called when the Bing Maps Web Services geocode request gets returned value.

        /// <summary>
        /// Handles the GeocodeCompleted event of the geocodeService control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="silverlightbingmapcontrol.GeocodeService.GeocodeCompletedEventArgs"/> instance containing the event data.</param>
        private void geocodeService_GeocodeCompleted(object sender, GeocodeService.GeocodeCompletedEventArgs e)
        {
            GeocodeResult result = null;

            if (e.Result.Results.Count > 0)
            {
                result = e.Result.Results[0];
                if (result != null)
                {
                    this.ShowMarker(result);
                }
            }

        }

Showmarker() method used to mark the orange point on the search location

        /// <summary>
        /// Shows the marker.
        /// </summary>
        /// <param name="result">The result.</param>
        private void ShowMarker(GeocodeResult result)
        {
            MapLayer myLayer = new MapLayer();
            BingMap.Children.Add(myLayer);
            Ellipse point = new Ellipse();
            point.Width = 15;
            point.Height = 15;
            point.Fill = new SolidColorBrush(Colors.Orange);
            point.Opacity = 0.65;
            GeocodeLocation gloc = result.Locations[0];
            Location location = new Location(gloc.Latitude, gloc.Longitude);
            MapLayer.SetPosition(point, location);
            MapLayer.SetPositionOrigin(point, PositionOrigin.Center);
            myLayer.Children.Add(point);
        }

Now we just need to call the Geocode() method to call on the search button click.

  /// Handles the Click event of the Search control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="System.Windows.RoutedEventArgs"/> instance containing the event data.</param>
        private void Search_Click(object sender, RoutedEventArgs e)
        {
            Geocode(txtLocation.Text, 0);
        }

We are done. Run the Application once again. Give some valid data to search :). You will get one Orange Pointer Point out the location that you have searched!!

Now we are done with the First steps of development.

Create a SharePoint Application and Integrate with Silverlight

This step is quite simple but very important step. First create one sample SharePoint 2010 Project under same solution. Select “Empty Share Point Project”

Give the Project name and click on “OK“. The next screen will appear as below.

This will ask you for the site location and trust level type. You can go with the default selection. Click on “OK”. You are done with the SharePoint Project Creation.
Now you have to add one SharePoint Module with this project. A module contains files that are included in a SharePoint application when it is deployed. To add a module, right click on SharePoint Project and Click on Add New Item.

Give the module name and click on “Add”. After that Right Click on the module and click on “Properties”

In the properties windows “Select Project Output Reference” and do the setting as below diagram.

Keep in mind, you need to select the Deployment Type as “ElementFile” and Project name should be the name of your “Silverlight Solution”. Click on the OK. Now go to “Element.XML” File under the SharePoint Module. Verify the path for the Silverlight “.xap” File. You need to provide the same url while you will add the Silverlight Web part inside SharePoint Site.

Now, you are done with SharePoint Project. Build and Deploy it. Just right click on the SharePoint Project and select Deploy. You are done with the deployment.

Host Silverlight Web Part to SharePoint Site

Hosting of Silverlight Web Part is quite similar that we generally used for our normal web parts. First of all you need to open the sharepoint Page in Edit Mode, Go To Insert and Select Web Part. Under the category section select “Media and Content” category and select “Silverlight Web Part” from Web Part . Click on Add.

You will see one AJAX Popup will apear and you need to input the url for the Silverlight Application Package (xap) file. Provide the url which you have already specified in Element. XML file inside the SharePoint Module.