Custom Pushpin in Bing Map for Windows Store App (XAML)


Introduction

In this article we would see how to add a custom pushpin to the Bing Map in a Windows Store App (XAML). To get started about Bing Maps you need to follow my previous posts.

1. Bing Map for Windows Store Apps

2. Starting Bing Map for Windows Store App (XAML)

3. Enabling Location Capability with Bing Map in Windows Store App (XAML)

Creating a Custom Pushpin

To create a custom pushpin we need to create a User Control. To create a user control in a Windows Store project; right click on the project/folder and select Add and then select New Item. Give a proper name, and start designing.

I have designed something like following, where I would be displaying the Latitude and Longitude of the Location selected on the Map.

Adding pushpin to Bing Map

The following simple line of code would help you to add a pushpin to the Map.

Now my objective is to add a pushpin, when user clicks/taps on the map. So basically I would subscribe to the “Tapped” event of the Map. I have subscribed it from XAML, you could also do it from code behind.

Getting the Location from Map

We could get the Location from the Bing Map pixel (i.e. the point user tapped/clicked on the map). And we would set the location of the pushpin to the same.

Now let’s run the application.

Pretty disturbing right! Observing the following screenshot; you could see the pushpin on the startup of the app. This is because we had designed the user control to be like this.

Now to fix this, you might need to change the margin of your user control to something like the following. The idea is the user control would be drawn from its extreme top left corner.

Now after fixing the above, if you run the app, you could see the pushpin exactly on the point you tapped/clicked.

Hope this article helps, thanks for reading.

Full Source code: Click Here

Category : Bing Map, Windows 8, Windows Store, Xaml Metro App
Tags : , , ,