Hands-On LabGetting Started with Geospatial Applications using SharePoint 2010, SQL Azure and Bing Maps

Lab version: 1.0.0

Last updated: 5/20/2023

CONTENTS

OVERVIEW................................................................................................................................................. 3

EXERCISE 1: CREATING DATA FOR THE SHAREPOINT LIST.............................................................5Task 1 – Creating a SQL Azure Database..............................................................................................5

Task 2 – Creating an Application ID to Secure the SQL Azure Connection...........................................8

Task 3 – Creating an External Content Type......................................................................................10

Task 4 – Setting Permissions for an External Content Type...............................................................14

EXERCISE 2: CREATE A SILVERLIGHT APP WITH THE BING MAPS SILVERLIGHT CONTROL....16

EXERCISE 3: QUERY SHAREPOINT EXTERNAL LIST AND DISPLAY DATA ON THE MAP.............24Task 1 – Adding Code to the Silverlight Application...........................................................................24

Task 2 – Deploying Silverlight Web Part in SharePoint:.....................................................................30

Overview

This lab provides and introduction to working with SQL Azure, SharePoint and the Bing Maps Silverlight Control demonstrating the techniques to display data that lives in SQL Azure, but is rendered using the Business Connectivity Services (BCS) in SharePoint through an external list (which dynamically loads data from external data systems).

External lists are a great way to store small geospatial datasets or attributes of larger datasets. This allows for easy storage and maintenance of data in SharePoint. This could include:

1) Points data up to 1000 individual locations. E.g. company building locations. The latitude and longitude of these locations can be stored in the SharePoint list and the whole list or a filtered list retrieved. For larger point datasets above 1000 locations SQL Server 2008 or SQL Azure spatial should be considered as it allows data to be efficiently stored and filtered with spatial queries.

2) Attribute data for complex geospatial information, e.g. company sales information per state. The state polygons would be stored in SQL Server 2008 or SQL Azure spatial, and the attributes for the state stored in the list. Hence an organization could maintain data in SharePoint lists and combine with polygon data for visual display.

Note: To obtain geo-code data for street addresses, consider using the Bing Maps SOAP or REST Web Services: http://msdn.microsoft.com/en-us/library/cc966793.aspx.

For loading more complex spatial data with SharePoint, considering using the DataConnector project on Codeplex: http://dataconnector.codeplex.com .

System Requirements

You must have the following items to complete this lab:

Windows Server 2008

SharePoint Server 2010

Visual Studio 2010

Visual Studio 2010 SharePoint Power tool -http://visualstudiogallery.msdn.microsoft.com/en-us/8e602a8c-6714-4549-9e95-f3700344b0d9

Microsoft Silverlight Plug-in for Browsers - http://www.microsoft.com/getsilverlight/

Bing Maps Silverlight Control SDK - http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=beb29d27-6f0c-494f-b028-1e0e3187e830

Microsoft Silverlight Developer runtime – http://go.microsoft.com/fwlink/?LinkID=188039

Estimated time to complete this lab: 45 minutes.

Exercise 1: Creating Data for the SharePoint list

In this first exercise, you will first create some data in SQL Azure and then you render that data in SharePoint using BCS and an external list. Having the data in an external list will enable you to code against the list data and expose this in a Bing Maps control. When integrating SQL Azure with BCS, you first need to create a new table in SQL Azure that you can expose in SharePoint by using the BCS. To do this, you’ll need to have your Windows Azure account up and running. If you do not have your Windows Azure account and developer key, make sure you acquire those first.

Task 1 – Creating a SQL Azure Database

1. Navigate to either http://windows.azure.com or http://msdn.microsoft.com/en-us/windowsazure/default.aspx, and log on to Azure using your Live ID. You should see something similar to the following image.

Figure 1Azure Platform

2. Click Database, and then click on the database under your subscription. In the ribbon, click Create. Provide a database name (e.g. Stores) and leave the other defaults (Web edition and 1GB). (Note that you may need to first create a Server. To do this, click a New SQL Azure Server and following the wizard.)

3. Click the Firewall Rules accordion control to manage your firewall rules. Note that you’ll need to ensure that you have the firewall of your machine registered here so you can access the SQL Azure database. For demo purposes, create a firewall rule that is open for your machine name, for example, MyServer with the rule 0.0.0.0-255.255.255.255.

4. Be sure to make note of the server name and admin user name. You can manage and reset the admin password by clicking Reset Admin Password.

Note: You may want to take some time at this point to explore the Windows Azure developer portal a little more.

5. After you create your SQL Azure database, you can now navigate away from the portal and open SQL Server 2008 R2 Management Studio.

6. When prompted, provide the name of your server (e.g. yourservername.database.windows.net), and enter the logon information. Also, click the Options button to expose the Connection Properties tab, and select Customers (or whatever you named your SQL Azure database). Then click Connect.

Figure 2Connect to Server Dialog

7. When SQL Server connects to your SQL Azure database, click the New Query button as illustrated in the following image.

Figure 3New Query button

8. You now have a query window with an active connection to your account. Note that you can also create a new database here via SQL scripts if you wanted. You created a database through the Windows Azure developer portal, but you can also create a database through script. For example, the following script creates a new database called Stores. You type this script in the query window and then click the Execute Query button:

Create Database Stores

9. Now that you have the Stores database, you need to create a table called StoreInformation. To do this, type the following SQL script and click the Execute Query button:

SQLCREATE TABLE [StoreInformation]( [StoreID] [int] IDENTITY(1,1)NOT NULL PRIMARY KEY CLUSTERED, [StoreTitle] [nvarchar](8)NULL, [StoreName] [nvarchar](50)NOT NULL, [StoreAddress] [nvarchar](50)NOT NULL, [StorePhoneNumber] [nvarchar](50)NULL, [Latitude] [nvarchar](30)NULL, [Longitude] [nvarchar](30)NULL, [Hours] [nvarchar](30)NULL, [Timestamp] [timestamp] NOT NULL,)

10. You’ll now want to create a set of records for your new database table. To follow is an example of adding one record. Add several more records to your SQL Server table. You can copy and paste the following into the Query Window and click Execute to add a set of records to the SQL Azure database.

SQL

INSERT INTO [StoreInformation]([StoreTitle],[StoreName],[StoreAddress],[StorePhoneNumber],[Latitude],[Longitude],[Hours])

VALUES ('1-C', 'LLK', 'Stanton, Denver, CO, USA','322-555-0188', '39.6274999999999998', '-104.221', '12'), ('2-C', 'Contoso', 'East King Alfred Mall, Denver, CO, USA','322-555-0188', '39.556473221', '-104.001', '12'), ('3-C', 'Jackson', 'Eastside Mall, Denver, CO, USA','322-555-1128', '39.1121112321', '-104.112', '12'), ('4-C', 'Hockey', 'Westside Mall, Denver, CO, USA','322-555-8839', '39.221232122', '-103.999', '12'), ('5-C', 'REI', 'Kareen Area Mall, Denver, CO, USA','322-555-9910', '39.4432344432', '-104.019', '12'), ('6-C', 'Cantrell', 'Saanich Mall, Denver, CO, USA','322-555-0029', '39.61029102211', '-103.892', '12'), ('7-C', 'PIA', 'Debson-Heights Mall, Denver, CO, USA','322-555-1028', '39.11211212112', '-104.001', '12'), ('8-C', 'Jacks', 'Perial Mall, Denver, CO, USA','322-555-2271', '38.209102912', '-103.920', '12'), ('9-C', 'TTT', 'Downtown Mall, Denver, CO, USA','322-555-1121', '39.00001920192', '-104.110', '12'), ('10-C', 'AI', 'Southside Mall, Denver, CO, USA','322-555-8878', '39.2291829182', '-104.001', '12'),('11-C', 'J and J', 'Westmont Mall, Denver, CO, USA','322-555-9280', '39.62888392819', '-104.555', '12')

11. Close the SQL Server 2008 R2 Management Studio when you’ve completed adding records.

Task 2 – Creating an Application ID to Secure the SQL Azure Connection

In SharePoint 2010, the Secure Store Service (SSS) replaced the single sign-on (SSO) service that you may have used in SharePoint 2007. The SSS is a claims-aware authorization service that uses a secure database to store user credentials such as user names and passwords. These credentials are mapped to the secure database by using application IDs, which are then used as an authorization handshake with external data sources.

The application ID is important when trying to connect to SQL Azure because SQL Azure does not live within the same domain as your SharePoint server. Thus, you require a way to pass a separate set of credentials along to SQL Azure when connecting using the BCS. You manage the SQL Azure credentials by first creating an application ID and then passing those credentials along to SQL Azure at the time of connection. The user is prompted upon first connecting to SQL Azure, which then allows you to interact with the SQL Azure database.

1. Open SharePoint Central Administration, and under Application Management, click Manage Service Applications.

2. Under Secure Store Service, click the Secure Store Service link (this is the Secure Store Service Application proxy link). (If there is no Secure Store Service instance created, you need to create a new Secure Store Service instance. To do this, click New on the SharePoint ribbon and select Secure Store Service. Provide a name for the service, accept the default options, and then click OK.)

3. After you’ve clicked the Secure Store Service link, click New, as illustrated in the following image.

Figure 4Edit Ribbon

4. On the Target Application Settings page, provide a Target Application ID (for example, AzureSQLAppID), Display Name (SQL Azure App ID), and Contact E-mail (can be any email address), leave the other default options, and click Next.

Figure 5Setting page

5. On the Field page of the wizard, add a descriptive name for the User Name and Password fields. Select User Name and Password in the Field Type lists. Select the Masked check box to mask the Password field.

Figure 6Field page

6. In the final step of the wizard, enter a valid Windows Active Directory alias to be the Target Application Administrator—this is required so that a valid user is associated with the application ID. Click OK when done to complete the creation of the application ID.

Figure 7Wizard

When you’ve completed the new application ID wizard, your new ID will appear in the application ID list.

Task 3 – Creating an External Content Type

1. Navigate to your SharePoint site.

2. Click Site Actions, and then select Edit With SharePoint Designer.

3. When SharePoint Designer opens, click External Content Types in the left navigation pane.

Figure 8Left Navigation pane

4. On the SharePoint Designer ribbon, click External Content Type to create a new one.

5. Provide a Name and Display Name (for example, StoreDataECT), set the Office Item Type to Contact, leave the default namespace, ensure that Offline Sync For External List is enabled, and then select the Click Here To Discover External Data Sources And Define Operations link.

Figure 9External Content Type Information

6. Click the Add Connection button to add the connection to your SQL Azure database.

Figure 10Add connection dialog

7. When prompted, enter the name of the SQL Azure server (for example, mydb.database.windows.net), the database name (for example, Stores), and provide a display name for the external content type (for example, StoreData from Azure).

8. Before clicking OK, click Connect With Impersonated Identity, and enter the name of the application ID you created earlier (for example, AzureSQLAppID).

Figure 11SQL Server Connection dialog

9. Now click OK to connect to SQL Azure and move onto the next process of creating the external content type.

10. When you are prompted for your SQL Azure credentials, enter the user name and password that was created when you first created the SQL Azure database.

11. After authenticating with SQL Azure, SharePoint Designer will load the connection into your existing list of external content type connections, and the connection will display in the Data Source Explorer. Navigate down to the table level, right-click the StoreInformation table you created earlier, and select Create All Operations.

Figure 12StoreInformation context menu

12. In the Operations wizard, you need to designate a primary key, so make sure the StoreID is mapped to the Map To Identifier by first checking the StoreID checkbox and then selecting the Map To Identifier check box. Clear the Timestamp checkbox because you will not expose this in the list. When complete, click Finish. You will also need to map the StoreName field to the Last Name Office property.

13. Click the Save button in the main SharePoint Designer ribbon after you complete the wizard. This saves the new external content type to the BDC Metadata Store in SharePoint.

14. With the external content type saved to SharePoint, you’ll now want to create a new list. To do this, click the Create Lists and Form button on the SharePoint Designer ribbon.

15. Provide a List Name (e.g. Store Locations) and List Description and accept the other default options.

You can now navigate to your SharePoint site to load your new list. However, you may discover the following message when you try to load the new list. This is because you have not yet configured the newly created external content type with any permissions.

Task 4 – Setting Permissions for an External Content Type

1. Navigate to SharePoint Central Administration, Manage Service Applications, and select Business Data Connectivity Services.

2. Find your newly created external content type in the list of external content types (for example, StoreDataECT), and either click it or select the check box beside it.

3. Click Set Object Permissions on the SharePoint ribbon.

4. Add the Active Directory alias of a valid user that you want to have permissions for the external content type (that is the external list) and click Add. Then select all of the check boxes you want to set for the permissions for that user, and click OK.

Figure 13Set Object Permissions dialog

5. To test the list, navigate back to the new Customer Data external list and reload the list.

6. The first time the external list is loaded, you’ll need to authenticate against the external content type with the credentials that are required to access the SQL Azure database and table. To do this, click the link “Click Here To Authenticate” as shown in the following image. (If you get a warning, click Continue to this Site).

Figure 14Home page

7. Enter the SQL Azure User Name and Password (you’ll need to enter the password twice), and click OK. The external list will now render, loading the data from SQL Azure as configured with the appropriate level of permissions for the list.

At this point, you now have a functioning external list that surfaces SQL Azure data in SharePoint. And although you’ve created a no-code solution, this type of solution could fall equally on the plates of a developer or an IT pro.

Exercise 2: Create a Silverlight App with the Bing Maps Silverlight Control

In this exercise, you will create a new Silverlight web application and use the Bing Maps Silverlight control

Note: Before starting, ensure you have installed Silverlight 4 Tools for Visual Studio 2010. This add-on for Visual Studio 2010 will install the necessary Visual Studio updates, Silverlight project templates, developer runtime, and SDK. For additional information read the overview

1. Launch Visual Studio 2010, and create a new Visual C# Silverlight Application. Change the name of your project to SharePoint2010HOL:

Figure 15New Project dialog

2. When prompted, check the default settings Host the Silverlight application in a new Web site and Silverlight 4, and accept the default project name.

Figure 16New Silverlight Application dialog

3. By default, two projects are created

a. SharePoint2010HOL: This is the Silverlight Application

b. SharePoint2010HOL.Web: This is the Web application that hosts the Silverlight control to display in the browser

Figure 17Solution Explorer pane

4. Delete the SharePoint2010HOLTestPage.html as you will not be using it.

5. Open SharePoint2010HOLTestPage.aspx.cs code-behind file and add following namespaces to the top.

C#

using System.Collections.Specialized;using System.Configuration;

6. Build the Application. You will now see that a .xap file called SharePoint2010HOL.xap is created and added to the SharePoint2010HOL.web project inside the ClientBin folder. This .xap file is the compiled Silverlight control. (Note: At this time, there is no content to be displayed yet.)

Figure 18Solution Explorer pane

7. Now, modify the SharePoint2010HOLTestPage.aspx to include the SharePoint2010HOL.xap. By that, we are hosting the Silverlight xap file in our Web Application.To do, so, open Default.aspx, and change the Head and the Body section of the code as follows

ASPX page

<head runat="server"> <title>SharePoint 2010 – Bing Maps Integration</title> <style type="text/css"> html, body { height: 100%; overflow: auto; } body { padding: 5; margin: 0; } #silverlightControlHost { height: 100%; text-align:center;

} </style> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript"> function onSilverlightError(sender, args) { var appSource = ""; if (sender != null && sender != 0) { appSource = sender.getHost().Source; } var errorType = args.ErrorType; var iErrorCode = args.ErrorCode;

if (errorType == "ImageError" || errorType == "MediaError") { return; } var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n";

errMsg += "Code: " + iErrorCode + " \n"; errMsg += "Category: " + errorType + " \n"; errMsg += "Message: " + args.ErrorMessage + " \n";

if (errorType == "ParserError") { errMsg += "File: " + args.xamlFile + " \n"; errMsg += "Line: " + args.lineNumber + " \n"; errMsg += "Position: " + args.charPosition + " \n"; } else if (errorType == "RuntimeError") { if (args.lineNumber != 0) { errMsg += "Line: " + args.lineNumber + " \n"; errMsg += "Position: " + args.charPosition + " \n"; } errMsg += "MethodName: " + args.methodName + " \n"; }

throw new Error(errMsg); } </script></head><body> <form id="form1" runat="server" style="height:100%"> <div id="silverlightControlHost"> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/SharePoint2010HOL.xap"/> <param name="onError" value="onSilverlightError" />

<param name="background" value="white" /> <param name="minRuntimeVersion" value="4.0.50401.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div> </form>

</body>

8. With the Silverlight project (SharePoint2010HOL) selected, and using Project…Add Reference from the file menu, add a reference to the Silverlight Map Control assemblies, which should be located in C:\Program Files\Bing Maps Silverlight Control\v1\Libraries\ (or) C:\Program Files (x86)\Bing Maps Silverlight Control\V1\Libraries. (Note: The path may be different if you have chosen custom location during install.)

Figure 19Add Reference dialog

9. Add a reference to the Map Control namespaces in MainPage.xaml by adding the following text to the User Control element:

XAML

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

XAML

Note: Your User Element Should be as follows:

<UserControl x:Class="SharePoint2010HOL.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:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">…

10. Add a Map element into the existing Grid element, with the attributes x:Name="MainMap” CredentialsProvider="<Your Bing Maps Key>" AnimationLevel="Full" Mode="AerialWithLabels" ZoomLevel="5" Center="38.000,-95.000". This will cause your map to display a hybrid map centered on US at zoom level 5.

Note: Replace <Your Bing Maps Key> with your actual Key. You can obtain your Bing Maps key from https://www.bingmapsportal.com/).

XAML

Note: Your Grid Element Should look as follows:

<Grid x:Name="LayoutRoot" Background="White"> <m:Map x:Name="MainMap" CredentialsProvider="<Your Bing Maps Key>" AnimationLevel="Full" Mode="AerialWithLabels" ZoomLevel="5" Center="38.000,-95.000"> </m:Map> </Grid> …

11. Open the MainPage.xaml.cs code-behind file and add following namespaces to the top.

C#

using Microsoft.Maps.MapControl;

12. Save MainPage.xaml. Press F5 to run the application. If prompted to enable debugging, do so

Figure 20Debugging Not Enabled warning

13. You should now see your Silverlight map appear in a new browser window.

Figure 21Silverlight map

Exercise 3: Query SharePoint External List and Display Data on the Map

In this exercise you will add code to the Silverlight application to query a SharePoint List and display the data on the Map. We will use the Store Location List that we created in Exercise 1.

Task 1 – Adding Code to the Silverlight Application

1. Add a Map.Children element into your existing Map element in your MainPage.xaml file.

2. Add three MapLayer elements into your newly created Map.Children element, respective to Polygons, Pushpins and Pop-up.

XAML

Note: Your Map.Children Element should now appear look like this

<m:Map x:Name="MainMap" CredentialsProvider="<Your Bing Maps Key>" AnimationLevel="Full" Mode="AerialWithLabels" ZoomLevel="5" Center="38.000,-95.000">

<m:Map.Children><m:MapLayer x:Name="PolygonsLayer"/><m:MapLayer x:Name="Pushpins"/><m:MapLayer x:Name="ContentPopupLayer"> <Canvas x:Name="ContentPopup" Visibility="Collapsed" Opacity="0.9"> <Rectangle x:Name="ContentPopupRectangle" Fill="White" Canvas.Left="0" Canvas.Top="0" Height="100" Width="300" RadiusX="10" RadiusY="10"/> <StackPanel Canvas.Left="10" Canvas.Top="10"> <TextBlock x:Name="ContentPopupText" FontSize="12" FontWeight="Bold" ></TextBlock> <TextBlock x:Name="ContentPopupDescription" Width=”275” FontSize="12" TextWrapping=”Wrap”/> </StackPanel> </Canvas></m:MapLayer></m:Map.Children></m:Map>

3. Add the following references (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ClientBin\) to the Silverlight project

Microsoft.Sharepoint.Client.Silverlight.dll

Microsoft.Sharepoint.Client.Silverlight.Runtime.dll.

4. Open the MainPage.xaml.cs code-behind file and add following namespaces to the top.

C#

using Microsoft.SharePoint.Client;

5. The next task is to query SharePoint List “Store Locations” and fetch data.

6. Add a new class in MainPage.xaml.cs for store details called StoreDetails. You’ll also need to add a using statement for the Location object (using Microsoft.Maps.MapControl) at the top of the new class.

C#

public class StoreDetails { public Location StoreLocation { get; set; } public string StoreName { get; set; } public string StoreAddress { get; set; } public string StorePhone { get; set; } public string StoreHours { get; set; }

}

7. In the MainPage Class, Create an event handler to handle page load event in the constructor of MainPage.xaml.cs

C#

public MainPage() { InitializeComponent(); this.Loaded += new RoutedEventHandler(MainPage_Loaded); } private void MainPage_Loaded(object sender, RoutedEventArgs e) { }

8. Declare a list in the MainPage class just before constructor. This will store the Store details fetched from the SharePoint list. Also create ClientContext and Web objects to access the current context of SharePoint environment within which the Silverlight module will run as a web part.

C#

ClientContext clientContext = null;Web web = null;

List<StoreDetails> storeDetailsList = new List<StoreDetails>();

IEnumerable<ListItem> bcsStoreList;

9. On the MainPage_Loaded event, call a function named GetListsDataFromSharePoint() to query SharePoint List

C#

private void MainPage_Loaded(object sender, RoutedEventArgs e){ GetListsDataFromSharePoint();}

10. Add the following functions in sequence

C#

private void GetListsDataFromSharePoint(){ GetSPListData(); }

The following function gets the List Data

C#

private void GetSPListData() { using (clientContext = new ClientContext("http://your_site_url")) { web = clientContext.Web; clientContext.Load(web);

var bcsListFromAzure = web.Lists.GetByTitle("Store Locations"); CamlQuery query1 = new CamlQuery(); IQueryable<ListItem> bcsListItems = bcsListFromAzure.GetItems(query1); bcsStoreList = clientContext.LoadQuery(bcsListItems);

clientContext.ExecuteQueryAsync(OnStoresRequestSucceeded, OnRequestFailed); } }

The following events handle the succeeded/Failed instances of the call to SharePoint list

C#

private void OnStoresRequestSucceeded(object sender, ClientRequestSucceededEventArgs e) { Dispatcher.BeginInvoke(FillStoreList); }

private void OnRequestFailed(object sender, ClientRequestFailedEventArgs e) { Dispatcher.BeginInvoke(() =>

{ MessageBox.Show("Error: " + e.Message); }); }

The following function fills the store list into a collection

C#

private void FillStoreList() { storeDetailsList.Clear();

foreach (var x in bcsStoreList) { StoreDetails objStoreDetails = new StoreDetails(); objStoreDetails.StoreName = x.FieldValues.ElementAt(3).Value.ToString(); objStoreDetails.StoreAddress = x.FieldValues.ElementAt(4).Value.ToString(); objStoreDetails.StorePhone = x.FieldValues.ElementAt(5).Value.ToString(); objStoreDetails.StoreHours = x.FieldValues.ElementAt(8).Value.ToString(); objStoreDetails.StoreLocation = new Location(Convert.ToDouble(x.FieldValues.ElementAt(6).Value.ToString()), Convert.ToDouble(x.FieldValues.ElementAt(7).Value.ToString())); storeDetailsList.Add(objStoreDetails); }

AddStoresToMap(); }

11. Note the function AddStoresToMap() in the previous step inside FillStoreList(). The Add stores to Map() plots these store locations on the Map. Implement this function as follows

C#

private void AddStoresToMap() { Pushpins.Children.Clear();

for (int i = 0; i < storeDetailsList.Count; i++) { string description = "Store: " + storeDetailsList[i].StoreName

+ "\nAddress: " + storeDetailsList[i].StoreAddress + "\nPhone: " + storeDetailsList[i].StorePhone + "\nHours: " + storeDetailsList[i].StoreHours;

CreatePushpin(storeDetailsList[i].StoreLocation, description); } }

C#

private void CreatePushpin(Location location, string description) { Pushpin pushpin = new Pushpin(); pushpin.Width = 7; pushpin.Height = 10; pushpin.Tag = description; pushpin.Location = location; Pushpins.AddChild(pushpin, location, PositionOrigin.Center);

pushpin.MouseEnter += new MouseEventHandler(Shape_MouseEnter); pushpin.MouseLeave += new MouseEventHandler(Shape_MouseLeave); }

C#

private void Shape_MouseEnter(object sender, MouseEventArgs e) {

if (sender.ToString() == "Microsoft.Maps.MapControl.Pushpin") { Pushpin content = sender as Pushpin; Canvas.SetZIndex(content, 500); ContentPopupText.Text = content.Name; ContentPopupDescription.Text = content.Tag.ToString(); } else { MapPolygon content = sender as MapPolygon; Canvas.SetZIndex(content, 500);

ContentPopupText.Text = "Polygon ID: " + content.Name; ContentPopupDescription.Text = content.Tag.ToString(); }

Point point = e.GetPosition(MainMap); Location location = MainMap.ViewportPointToLocation(point); MapLayer.SetPosition(ContentPopup, location); MapLayer.SetPositionOffset(ContentPopup, new Point(25, -50));

ContentPopup.Visibility = Visibility.Visible; }

private void Shape_MouseLeave(object sender, MouseEventArgs e) { UIElement content = sender as UIElement; Canvas.SetZIndex(content, 100); ContentPopup.Visibility = Visibility.Collapsed; }

12. Build the Solution. When you try to run this solution, you should see a runtime error. This is an expected outcome

Why does the application fail to run?

This Silverlight control is built to run within the context of SharePoint. As one can observe, the code tries to pick-up the current context and tries to resolve it to a SharePoint Web. However, at this time this code is not running inside SharePoint. This is the reason for the error. In the next steps we shall try and deploy the XAP file as a SharePoint web part.

Figure 22GetListData method

Task 2 – Deploying Silverlight Web Part in SharePoint:

1. Right-click on SharePoint2010HOL project and click Properties tab and note the Build output path

2. Clean the Solution (Right Click on Solution Name -> Clean) and rebuild it to generate new .xap file. The SharePoint2010HOL.xap file will be created in the ClientBin Folder of SharePoint2010HOL.Web project.

3. Launch the browser and Open your SharePoint site.

Figure 23Home page

4. Uploading the Silverlight Control to a list/library:Use an already existing library “Shared Documents”for uploading the Silverlight Control. Click on Shared Documents from the left navigation bar

Figure 24Left Navigation Bar

5. Once you are in the “Shared Documents” library, Select “Upload Document” from the ribbon menu

Figure 25Ribbon menu

6. Browse for the Silverlight control (SharePoint2010HOL.xap) from your local machine, and click OK button to upload the file

Figure 26Upload Document dialog

7. Your file should now appear in the Shared Documents document library.

Figure 27Shared Documents library

8. Create a new Page to host the Silverlight webpart. To do so, Select “More Options” from “Site Actions” Menu.

Figure 28Site Actions menu

9. Select “Page” from the list of available types, and Choose Web Part Page. Click the “Create” button

Figure 29Create menu

10. In the following Page, provide/select the following information:

a. Name: SharePoint2010-BingMaps

b. Layout: Header, Footer, 3 Columns

c. Save Location: Site Pages

Click “Create”. This will create a web part page for hosting the Silverlight web part.

11. The created page will open in Edit Mode now. Click on Add a Web Part in the Header WebPart Zone.

Figure 30Web Part page

12. From the Available Categories, Choose “Media and Content” and for the type of web part choose “Silverlight Web Part.” Click Add

Figure 31Create menu

13. Now the Web Part is successfully added. You need to set the path to the Silverlight Control. To do so, in the following pop-up window, provide the path to SharePoint2010HOL.xap file that we

uploaded to the Shared Documents folder. You can either use relative path or absolute path to the SharePoint2010HOL.xap file. In this case use absolute path

Figure 32Silverlight Web Part menu

14. Click OK, and browse to the webpage hosting the Silverlight Control. If you are prompted for Displaying mixed content, click “Yes.”

Figure 33Display mixed content dialog

15. The Silverlight web part should be successfully added now.

Figure 34Added Silverlight Web Part

To resize the web part, Click on the drop down icon on the top right corner of the web-part. Select Edit Web Part.

Figure 35Silverlight Web Part

16. Change the height and width as needed. You can set other properties too as needed.

Figure 36Web Part Properties pane

The Bing Maps Silverlight Web Part has been successfully created and deployed to SharePoint 2010 site. The Pushpins represent the Store Locations fetched from the SharePoint List. Move your mouse over the pushpins. The pop-up box should display the Store information corresponding to the Store

Figure 37Bing Map