Download Sample Project (41.34 kb)

Some of the cool applications on smart phones are developed to help present information to the user based on their geo locations. And lot of time it involves using maps. Since Windows 7 Phone development platform is based on Silverlight, use of Bing Maps Silverlight Control comes as a natural choice. But so far there is not a official release of the control specific to Windows 7 Phone. Good news is that since Windows 7 Phone SDK is built on top of Silverlight 3 platform, you can use current release of Bing Maps Control for Silverlight with a small caveat. In this post I will discuss how to use Bing Maps in Windows 7 Phone.

First thing first. You will need to make sure that you all the tools needed for Bing Maps development. I have explained this in my earlier post Using Bing Maps In Silverlight 4. The steps to use Bing Maps Silverlight Control are exactly the same as in your conventional Silverlight application development.

How to use Bing Maps in Windows 7 Phone

• Create Windows 7 Phone project in Visual Studio 2010
• Add reference to following assemblies in your project from location where you installed Bing Maps SDK.
  • Microsoft.Maps.MapControl
  • Microsoft.Maps.MapControl.Common

  Now compile the project to make sure that the reference to Bing Maps are correctly included. This is where you will hit the first road block. You will get a compile time error.

  error CS0234: The type or namespace name 'Maps' does not exist in the namespace 'Microsoft' (are you missing an assembly reference?)
  The primary reference "Microsoft.Maps.MapControl" could not be resolved because it has an indirect dependency on the framework assembly "System.Windows.Browser, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e" which could not be resolved in the currently targeted framework. "Silverlight,Version=v4.0,Profile=WindowsPhone". To resolve this problem, either remove the reference "Microsoft.Maps.MapControl" or retarget your application to a framework version which contains "System.Windows.Browser, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e".

  Here is little piece of information you will need to know and is very important. As per Silverlight documentation for Windows 7 Phone namespace System.Windows.Browser is not supported on the device. Good news is that you can add reference to this assembly from the folder where your Silverlight assemblies are installed by Visual Studio. For example in my case the location is C:\Program Files\Microsoft Silverlight\4.0.50524.0\System.Windows.Browser.dll. Adding reference to this assembly does not mean that you can actually use all the APIs from this namespace. If you will try, you will get run time errors. Remember that this namespace is not supported in Windows 7 Phone platform. Now compile the project again and you should be good to go.

• Now implement the code that will fetch data that needs to be used to render locations on Bing Maps. In previous post How to use WCF in Windows 7 Phone, I described use of WCF. In the sample project attached with the post, I am using WCF service to get geo locations that I want to plot on Bing Maps on Windows 7 Phone.

As I mentioned in previous posts about Windows 7 Phone development, you can cut and paste code from your regular Silverlight application in Windows 7 Phone application and it will work as long as you are not using any APIs that is not supported on Windows 7 Phone.

Download Sample Projects (188.73 kb)

Some time back I wrote about using Bing Maps Silverlight control. Recently I was developing an application for a client using Bing Maps silverlight control and realized that there have been some changes since I last wrote about it. So this series of posts is focused on some of the following topics.

• How to use Bing Maps Silverlight control?
• How to add push pins or location markers on Bing Maps?
• How to add tool tip to push pin or location on Bing Map?
• How to use WCF in silverlight application?
• How to use Bing Maps web service in Silverlight application?
• .... and more...

How to use Bing Maps Silverlight control?

As I discussed in my previous post that first you need to make sure that you have all the necessary tools on your development machine. So here is some content from previous post.

Set up development enviroment

Before you can start developing your silverlight application using Bing Map Silverlight control, you will need to do following things.

• Create a developer account at Bing portal
• As part of registration process, you will also be required to a credential key that is used with each request that you send to Bing web service to access data.
• Download Bing Map Control SDK and install on your development machine

Create or Update Project

I will recommend reading on Creating a Basic Application Using the Silverlight Map Control. There have been some namespace changes as well as assembly name changes since last version of the control. Therefore it is important to follow the latest article about assembly and namespace references. Following snapshot shows the references of BingMaps control assemblies that you are going to need in your project.

Add Pushpin to Map Control

As I mentioned in my previous post about BingMaps control, the control is a container that can host other child windows. Pushpin is nothing but another control that you add to the map control itself. So you add a map layer to the map and then add Pushpin controls to this map layer. Following code snippet from the sample shows how push pin were added.

void AddMapPushPin(ByteBlocksActivityService.GeoLocation loc)
{
Pushpin pin = new Pushpin();
Location pinLocation = new Location() 
  { Longitude = loc.Longitude, Latitude = loc.Latitude };
pin.Location = pinLocation;
GetLocationDetails(pin);
_mapLayer.AddChild(pin, pinLocation, PositionOrigin.BottomRight);
}

You may be wondering what is GeoLocation parameter to this method. This is one of the objects that I defined in my data service. I will discuss more about how to use WCF in silverlight application in subseuent posts. You can see it is pretty straight forward to add push pin to Bing Map control. You can provide your own image to be used as push pin as well. For me the standard image provided by the map control itself did the job.

Add title to Pushpin

A blank push pin is not going to provide much of information to the users. So it will be helpful if we could display some text on it as well. Depending on image used for displaying push pin, you will have very limited space. So you have to keep the title short so that it fits. This text could be some abbreviation.

You will use Content property of Pushpin control to set text to be displyed on the pushpin as shown in the code below.

pin.Content = address.CountryRegion;

Add Tool tip to Pushpin

As i mentioned above, a blank Pushpin does not provide much of information to your users. And there is not much you can display in Content. As with any visual controls, Tooltip is one of the best ways to convey information to users. This is where you can get really creative about displaying details about location or pushpin to your user. For this post, I will keep this display of tool tip to displaying address corresponding to the pin location.

As I mentioned earlier that Pushpin is nothing but another UIElement or control hosted inside Map control. So you can use TooltipService to add tool tip to Pushpin. Following code snippet shows how I added address as tool tip to Pushpin

var tooltipText = "Unkown";
if (e.Result.Results.Count != 0)
{
 var address = e.Result.Results[0].Address;
 tooltipText = address.FormattedAddress;
 pin.Content = address.CountryRegion;
}
System.Windows.Controls.ToolTipService.SetToolTip(pin, tooltipText);

I got address for the given location using ReverseGeoCode service from Bing Maps SOAP Services. I will discuss this in detail when I discuss about how to use Bing Maps SOAP Services in Silverlight applications.

Sample Project

You can download the sample project to play with maps. Remember that you will need to get your own Bing Maps Developer key from Microsoft to use the control.

In one of my earlier posts Convert IP Addresss To Geo Location, I discussed how you can query a web service or database to get geo-location of that internet service provider. Now what do you do with that geo-location or spatial information. For one of the current Data Visualization projects I am working on, I had to show these locations on the map as well. The application is a Silverlight application so obvious choice was to find a control or component that I could drop in silverlight. And you pretty much have the answer, Use Bing Map Silverlight Control.

In this post I am going to discuss some of the following topics.

• How to use Bing Silverlight Map Control?
• How to add push pins to bing map?
• How to add legends or some text to Silverlight Bing Map?
• How to add regular silverlight controls on Bing Map control?

The documentation for Bing Map Silverlight control is still maturing and lacks lot of details. So most of the discussion in this post is based on personal experience and conversations I had through news groups and forums.

Set up development enviroment

Before you can start developing your silverlight application using Bing Map Silverlight control, you will need to do following things.

• Create a developer account at Bing portal
• As part of registration process, you will also be required to a credential key that is used with each request that you send to Bing web service to access data.
• Download Bing Map Control SDK and install on your development machine.

Create Project and lets roll

Microsoft has provided a good walk through on Creating a Basic Application Using the Silverlight Map Control. I will strongly recomment going through it if its first time for you in Bing Map development.

Adding PushPin to Bing Map

Now that you have a vanilla implementation of map showing in your application. Next I want to add indicztors on the map to show location of internet service providers for which I have geo corodinates. There are few ways you can do. The most basic thing that you need to keep in mind is that Bing Map control is like any other silverlight control and can act as a container for other silverlight control. That means that I can just draw any shapes or objects at given corodinates. Well, you got it. Bing Map SDK provides some of these indicator controls out of the box. And one of them is PushPin. So what you need to do is crate instances of PushPin objects, set their longitude and latitude and add them as children of map control. Following code snippet shows how I added a collection of PushPin objects to my map control.

foreach(var loc in locations)
{
	var pp = new Pushpin() 
	  {Location = new Location(loc.Latitude, loc.Longitude)};
	UserLocationsMap.Children.Add(pp);
}

Adding DataGrid to Bing Map

Next task I had to do was to provide some summary of the data on the map itself. More precisely, I wanted to show how many service provides from each country I have in my database. For demo purposes I just needed to show name and count. I decided to add a DataGrid to map to show this data. Later on I am going to handle click events in this grid to have some interaction with the map as well. Since I already knew where I wanted to place the grid and what columns needed to be shown, I could just add this through XAML file itself. Following XAML snippet from the application shows how I have added a text block and data grid to Bing Map control as children.

<m:Map CredentialsProvider="xxxxxxxxxx" Name="UserLocationsMap">
 <m:Map.Children>
  <o:ShadowText x:Name="MapTitleText" ForegroundTop="Black" ForegroundBottom="Orange"
      Text="ISP Locations" FontFamily="Verdana" FontSize="24"
      HorizontalAlignment="Left" Margin="20,75,50,10"/>
	<StackPanel x:Name="CountryListPanel" Margin="20,250,50,10" Orientation="Vertical">
	 <data:DataGrid x:Name="CountryCountGrid" Width="150" Height="250"
	   AutoGenerateColumns="False" HorizontalAlignment="Left">
	  <data:DataGrid.Columns>
	   <data:DataGridTextColumn Header="Country" Width="SizeToHeader" Binding="{Binding Name}" />
	   <data:DataGridTextColumn Header="Count" Width="SizeToHeader" Binding="{Binding Count}" />
	  </data:DataGrid.Columns>
	 </data:DataGrid>
	</StackPanel>
	</m:Map.Children>
</m:Map>

Postioning on Map control

This is something you will have to play very close attention to. There is a difference between how controls or objects placed on map control. You must have noticed that when I added PushPin to map, I used longitude and latitude to position them on the map. But when I added DataGrid and ShadowText controls, I used Margin to control the placement. Most of the indiccator or layer objects that are provided in Bing Map SDK use gro-location values (longitude and latitude) to place object. But when you add regular silverlight controls on map, then you will control the position using Margin relative to origin of map control.