Building Silverlight Bing Maps based API with Cloud application in SharePoint 2010


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.

  • Write in MainPage.XAML :

<UserControl x:Class=”SimpleBingMap.MainPage”

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

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

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

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.
Advertisements
%d bloggers like this: