Building Silverlight Bing Maps based API with Cloud application in SharePoint 2010
January 6, 2012 Leave a comment
Developing Bing Maps API based Silverlight applications are quite easy integrating with Windows Azure , SQL Azure databases with Microsoft SharePoint 2010. Bing Maps API provides a rich set of geolocation APIs which helps to easy integrate with Silverlight, Windows Azure application.
- To use Bing Maps with Silverlight Web applications , you need to get the Bing Maps Developer key which can be obtained from www.bingmapsportal.com , register there with your Windows Live ID & get a developer key by clicking on create or view key.
- Next, you need keep the key in clipboard & should be used while developing your Silverlight application. Now create a new Silverlight application from Visual Studio & modify the following XAML into it.
- Lets the install the following SDKs for developing Bing Maps based apps with Silverlight:
- Bing Maps Silverlight Control SDK –
- http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=beb29d27-6f0c-494f-b028-1e0e3187e830
-
- Visual Studio 2010 SharePoint Power tool –
http://visualstudiogallery.msdn.microsoft.com/en-us/8e602a8c-6714-4549-9e95-f3700344b0d9
- Visual Studio 2010 SharePoint Power tool –
- Write in MainPage.XAML :
<UserControl x:Class=”SimpleBingMap.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:m=”clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl”
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
mc:Ignorable=”d”
d:DesignHeight=”300″ d:DesignWidth=”400″>
<Grid x:Name=”LayoutRoot” Background=”White” HorizontalAlignment=”Stretch”
VerticalAlignment=”Stretch” Width=”888″ Height=”394″>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”888*” />
<ColumnDefinition Width=”314*” />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=”auto” />
<RowDefinition Height=”*” />
</Grid.RowDefinitions>
<StackPanel Grid.ColumnSpan=”2″>
<TextBlock Text=”Map Me!” FontWeight=”Bold” FontSize=”14″ Width=”888″ />
<StackPanel Orientation=”Horizontal” HorizontalAlignment=”Stretch” Margin=”12,0,12,0″>
<TextBox x:Name=”txtbxLatitude” Width=”322″ Text=”Type your latitude here,e.g. 47.7656″ FontSize=”10″ />
</StackPanel>
<StackPanel Orientation=”Horizontal” HorizontalAlignment=”Stretch” Margin=”12,0,12,0″>
<TextBox x:Name=”txtbxLongitude” Width=”322″ Text=”Type your longitude here, e.g. -122.9957″ FontSize=”10″ />
</StackPanel>
<StackPanel Orientation=”Horizontal” HorizontalAlignment=”Stretch” Margin=”12,0,12,0″>
<Button x:Name=”btnFindMe” Content=”Map It!” Width=”65″ Click=”btnFindMe_Click” />
</StackPanel>
</StackPanel>
<m:Map CredentialsProvider=”Av1a04p5K8Ubd97aV5dMMX7tRSbDxWz8hm01_4ZA8BA2kE7o56VvsNfjMOOrTnV5″ x:Name=”MyMap” Grid.Row=”1″ Mode=”AerialWithLabels” HorizontalAlignment=”Stretch” VerticalAlignment=”Stretch” Margin=”0,14,0,0″ Grid.ColumnSpan=”2″>
<m:Map.Children>
<m:MapLayer x:Name=”PushPinLayer” />
</m:Map.Children>
</m:Map>
</Grid>
</UserControl>
- Write in MainPage.XAML.CS:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Maps.MapControl;
namespace SimpleBingMap
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void btnFindMe_Click(object sender, RoutedEventArgs e)
{
Location myLocation = newLocation();
myLocation.Latitude = Double.Parse(txtbxLatitude.Text);
myLocation.Longitude = Double.Parse(txtbxLongitude.Text);
// Create a new pushpin to add to the map.
Pushpin myPPin = newPushpin();
myPPin.Width = 7;
myPPin.Height = 10;
myPPin.Location = myLocation;
PushPinLayer.AddChild(myPPin, myLocation, PositionOrigin.Center);
// Set the main view of the map using location with a zoom level
MyMap.SetView(myLocation, 10);
}
}
}
- Map yourself in Bing Maps API by providing Latitude & Longitude:
- Now, it’s time to integrate with your SharePoint 2010 website. Open the Add Documents Library option & Click on Add, Click browser & paste the path of Silverlight .xap file in SharePoint directory.
- Click on Site Settings & Click on Edit Page to open the .xap file in SharePoint Web Part, Now open the insert tab-> Click on Media Content-> Silverlight Web Part -> paste the path of the Silverlight .xap file in the clipboard. Access it in Silverlight portal.
- Configure the height & width according to configuration :
- That’s it, The SharePoint applications is integrated with Silverlight web part along with Bing Maps API integrated in Cloud.
Anindita's Blog 
You must be logged in to post a comment.