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

About Anindita
Anindita Basak is working as Big Data Cloud Consultant in Microsoft. Worked in multiple MNCs as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: