RSS

Tag Archives: pushpin

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.

<my:Map x:Name="map" CredentialsProvider="YOUR_BING_MAP_API_KEY" Height="600" >
</my:Map>

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.

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

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.

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

That ‘s it!

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

 
1 Comment

Posted by on June 12, 2012 in Silverlight, Windows Phone 7, XAML

 

Tags: ,