Microsoft Lync 2010 and Bing Maps Integration

Recently I was working on a demo where I wanted to show Bing Maps and Microsoft Lync integrated together. This is something I have been wanting to do for a while but just never seemed to have time to get around too. I had put this off as I was expecting it to take me a bit of time to learn how to develop with Lync. I was very surprised at how easy it was. For those not familiar with Microsoft Lync, it is one of Microsoft’s platforms for creating unified communications. In the past this was known as Office Communicator. Office 365 also makes Lync available to it’s users. The Development API’s for Lync allow you to easily create applications using Silverlight or WPF.

Integrating communication tools with Bing Maps opens the doors to a whole range of interesting applications. I have worked with a number of customer over the years that have done this to create applications targeted towards:

  • Disaster management
  • Team collaboration and planning
  • Asset tracking and management
  • Various management applications

By no means is this a definitive list of possible solutions. Imagine being able to view the location of all your stores, staff or assets and being able to instantly connect with them with a click of a button using Lync directly from the map. In this blog post I’m going to give you a walkthrough of how to create a very simple integration using Lync with the Bing Maps Silverlight control.

Installing the Lync SDK

Download the Microsoft Lync 2010 SDK and run the executable. Note that you will need to have the Lync client installed already on your computer and will also need a Lync account. Don’t have a Lync account? Why not create an Office 365 trial account and make use of Lync there. For those integrating Bing Maps with Office 365 or SharePoint here is a good development resource: http://bingmapsdemos.sharepoint.com

Creating the project

In Visual Studios you will now find under the Silverlight section of the new Project panel a Lync Silverlight Application project. Select this  and name your project.

image

When the application is first loaded you will see that there is a simple presence indicator on Page.xaml. One of the first things you will want to do is test this out. Simply change the source parameter to your email address. If you are logged into the Lync client on your computer and press F5 a web page should with the presence indicator. If you had set the Silverlight application as the start up project this should work fine, however if you are using a web application load the Silverlight project you will likely see “Unknown Contact”. Since we are creating a web page we will need to correct this. This can easily be done by adding localhost as a trusted site in the internet options. To do this follow these steps:

  • In internet explorer go to Tools –> Internet Options
  • Then select the Security tab and click on “Trusted sites”
  • Click on the “Sites” button.
  • Add http://localhost

If you refresh the page or re-run the project you should now see your contact appear. Now that we have verified that you can get to Lync work in your application we can start fresh by removing sample code and working with the base Grid.

Adding Bing Map’s

Start off by adding a references to the Bing Maps libraries as documented here. Now lets add a simple map instance to Page.xaml. Your markup should look like this:

<UserControl x:Class="BingMapsLync.Page"
    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:Microsoft.Lync.Controls;assembly=Microsoft.Lync.Controls" 
    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">
        <m:Map Name="MyMap" CredentialsProvider="YOUR_BING_MAPS_KEY"/>
    </Grid>
</UserControl>

Now that we have a map we will want to add a pushpin to mark a users location and then add an infobox to display that users contact information.

Creating an Infobox control

I like using MapLayers to help separate different layers of data. We will want to MapLayers. One for pushpins and another for the infobox. By using layers we help ensure that the infobox appears above all the pushpins. When it comes to creating an Infobox in the Bing Maps Silverlight control I like to create a simple UserControl and add it to the map once and then simply update it’s DataContext to refresh it’s appearance. I also like to keep things clean so create a folder in your project called “Views”. Then add a new UserControl to this folder called “Infobox”. We are going to keep it simple and have a Lync contact card and close button in this Infobox. To help with scaling create a StackPanel as the base element and then add a grid inside of this. This will allow our grid to expand with the content while at the same time the Stackpanel will keep it from filling the full screen. Inside the grid you will first want to add in a Lync Contact Card. This can easily be done by opening up the Toolbox in Visual Studios and location the Lync SDK Controls section. Then simply drag and drop the contact card to the grid. Next set the source to Binding. After doing this you can add a simple close button. Your xaml should look something like this:

<UserControl  x:Class="BingMapsLync.Views.Infobox"
    xmlns:controls="clr-namespace:Microsoft.Lync.Controls;assembly=Microsoft.Lync.Controls" 
    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">

    <StackPanel>
        <Grid>
            <controls:ContactCard Source="{Binding}"/>

            <Button Content="X" Width="15" Height="25"  Margin="5" 
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Click="CloseBtn_Click"/>
        </Grid>
    </StackPanel>
</UserControl>

In the code behind we will want to handle the click event of the close button. The code behind should look like this:

using System.Windows;
using System.Windows.Controls;

namespace BingMapsLync.Views
{
    public partial class Infobox : UserControl
    {
        public Infobox()
        {
            InitializeComponent();
        }

        private void CloseBtn_Click(object sender, RoutedEventArgs e)
        {
            this.Visibility = System.Windows.Visibility.Collapsed;
        }
    }
}

Adding the Infobox to the Map

As I mentioned before we will want two MapLayers in the map, one for pushpins and one for the Infobox. As this is a simple example I’ll add a pushpin directly into the MapLayer for simplicity. For the pushpin I’ll also add the users email address as the Tag property and add a mouse down event to the pushpin for the end user to click. The Infobox will be added to the second map layer and we will set the MapLayer.PositionOffset and MapLayer.PositionOrigin properties so the infobox shows up nicely. The Page.xaml markup should now look like this:

<UserControl x:Class="BingMapsLync.Page"
    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:Microsoft.Lync.Controls;assembly=Microsoft.Lync.Controls" 
    xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
    xmlns:views="clr-namespace:BingMapsLync.Views"         
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot">
        <m:Map Name="MyMap" CredentialsProvider="YOUR_BING_MAPS_KEY">
            <m:Map.Children>
                <m:MapLayer Name="UserLayer">
                    <m:Pushpin Name="UsersPin" Location="0,0" Tag="Contacts_Email@Email.com" MouseLeftButtonDown="PushpinClicked"/>
                </m:MapLayer>
                <m:MapLayer>
                    <views:Infobox x:Name="Infobox" Visibility="Collapsed" 
                                   m:MapLayer.PositionOffset="0,-25" 
                                   m:MapLayer.PositionOrigin="BottomLeft"/>
                </m:MapLayer>
            </m:Map.Children>
        </m:Map>
    </Grid>
</UserControl>

We now just need to handle the mouse down event on the pushpin in the code behind (Page.xaml.cs). When the pushpin is clicked we will want to set the position of the Infobox, pass the Tag property of the pushpin as the DataContext to the Infobox, and then make the Infobox visible. The code behind should look like this:

using System.Windows.Controls;
using System.Windows.Input;
using Microsoft.Maps.MapControl;

namespace BingMapsLync
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
        }

        private void PushpinClicked(object sender, MouseButtonEventArgs e)
        {
            Infobox.DataContext = (sender as Pushpin).Tag;
            MapLayer.SetPosition(Infobox, (sender as Pushpin).Location);
            Infobox.Visibility = System.Windows.Visibility.Visible;
        }
    }
}

Now if we run the application we should end up with a map with a pushpin on it. If you click on the pushpin you should see the Lync contact card. You can then use Lync to contact that user using email, IM, or phone directly from the map.  In the end you should end up with something like this:

image

Note this will open up your standard Lync client. However you can make use of more of the Lync SDK to create more advance implementations.

Advertisements

3 thoughts on “Microsoft Lync 2010 and Bing Maps Integration

  1. Pingback: Microsoft Lync 2010 and Bing Maps Integration « Ricky’s Bing Maps Blog « JC’s Blog-O-Gibberish

  2. great Howto! it worked fine for me…but what would be cool is to set the pushpin in the location set in lync…any hints about how to do it?

    • Taking a quick look this seems to be pretty easy to do. YOu will need to do it from code. The following allowed me to get the location as a string. This will need to be geocoded before being displayed on the map. Here is the general idea:

      try
      {
      LyncClient _LyncClient = LyncClient.GetClient();

      Contact foundContact = _LyncClient.ContactManager.GetContactByUri("contacts@email.com");
      string resultString = foundContact.GetContactInformation(ContactInformationType.LocationName).ToString();
      //Geocode users location if it has a value...
      //https://rbrundritt.wordpress.com/2012/01/06/bing-maps-rest-service-net-libraries/
      //Display user location on the map...
      }
      catch (NotStartedByUserException)
      {
      MessageBox.Show("Lync is not running");
      }

      You should be able to pull the list of contacts a user has an do something similar.

Leave a Reply

Fill in your details below or click an icon to log in:

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