RSS

Customized PushPin on bing Map

12 Jun

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.

Advertisements
 
1 Comment

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

 

Tags: ,

One response to “Customized PushPin on bing Map

  1. San

    May 14, 2013 at 10:03 am

    Hi, i’ve tried your codes here in my own application but i’m getting error like “Failed to create a ‘System.Type’ from the text ‘my:Pushpin’.” in App.g.i.cs file.

     

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

 
%d bloggers like this: