How to add tool tip to Pushpin in Bing Map Silverlight control

Download Sample Projects (188.73 kb)

bing maps silverlight control

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.

bing maps assemblies

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;
_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

push pin tool tip

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.

bing maps push pin tool tip

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.




4.0 °C / 39.2 °F

weather conditions Clear

Monthly Posts

Blog Tags