Customized PushPin on bing Map

This tutorial demonstrates how to create a pushpin from a specified image.



First add your image to the silverlight project.

Add the bing map control to the page.

[sourcecode language="xml"]
<my:Map x:Name="map" CredentialsProvider="YOUR_BING_MAP_API_KEY" Height="600" >
</my:Map>
[/sourcecode]

Define a control template inside the required page or inside App.xaml page. Things we declare in App.xaml are global. If you need to use bing map on several pages App.xaml is preferred. So we maintain code reusability.

For this example, I define control template in one of my inside page within PhoneApplicationPage.Resources section.

[sourcecode language="xml"]
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="PushpinControlTemplate" TargetType="my:Pushpin">
<Image x:Name="pinImage" Height="64" Source="/Images/push_pin.png"/>
</ControlTemplate>
</phone:PhoneApplicationPage.Resources>
[/sourcecode]

Value of TargetType  attribute consists of your bing map control namespace which can be found in your xaml page. Here, it 's 'my'.

To display the pushpin add this code.
Here we should specify the relevant control template that we need.

[sourcecode language="csharp"]
Pushpin pin1 = new Pushpin();
pin1.Location = new GeoCoordinate(51.5171, 0.1062);
pin1.Template = (ControlTemplate)(this.Resources["PushpinControlTemplate"]);
map.Children.Add(pin1);
map.SetView(pin1.Location, 10);
[/sourcecode]

That 's it!

If you can not see the pushpin, set the Build Action of the image to Content and try.