Add Custom Pushpin - Bing Maps SDK - Windows 8

Introduction

My quest to work on Bing Maps SDK (available at the below link) has started creating a basic map and adding various points to it. At first I started adding new locations in the map control itself and then adding a custom pin using the code-behind. 

The following post gives a very simple tip on how to add a pushpin (custom) to Bing Maps in your Windows 8 application. 

Background

I have been interested in using Bing Maps SDK since the release of the beta and got very much involved right after Build Conference 2013. I have been playing with it quite often on various occasions. I have done/followed the basic example available at the MSDN site and then moved on to work/implement my own creations/usages.

Using the code 

Steps to have Bing Maps SDK installed on your computer:

• You have to be on a Windows 8 machine and have VS 2012 (Express or any paid version) installed on your computer 
• Download the SDK here: http://visualstudiogallery.msdn.microsoft.com/ebc98390-5320-4088-a2b5-8f276e4530f9
• After you have installed the SDK, you have to get a key for your application. Please follow this link below and it should be a couple of steps to get a key for your application: bingmapsportal 
• Once you have those two you should be ready to add Bing Maps to your Windows 8 application 

Following the steps below would give you a base to start Bing Maps in your Windows 8 application: 

1. Create a new project in VS 2012 (I am using Express edition here, and any edition would work). 



I have selected Windows Store Application on the left and a Blank Template and given it a name.

2. Once VS creates your blank Windows 8 application, you will have the following files in your Solution Explorer:

 

• MailnPage.xaml is what we will be working on, but before we move on to the code that adds Bing Maps to our application, we have to 
• Change the Solution Configuration Platform from "Any CPU" to "x64" (you can also select any one of the following options, "x86" , "x64", ARM ).
• Right click on Solution file in your Solution Explorer and you will see the following window, please make the change marked in RED and click OK.



• Add the following References to your project by right clicking References and following the marked section in the image below. 
• Bing Maps for C#, C++, or Visual Basic
• Microsoft Visual C++ runtime package



3. Now we jump once, to celebrate the big thing, because the steps we did are going to enable our application to use Bing Maps.
• Open MainPage.xaml.
• Add a using for Bing Maps.
• Add a control for Bing Maps in the application main grid as below.



You may already be know how to add a using statement in a XAML file.

XML

xmlns:bm ="using:Bing.Maps"

xmlns defines the name space and "bm" is the name we are giving the reference. We are going to use bm to create/refer to Bing Maps reference in our application. And the using statement is for the Bing Maps.

And now if you look at the Grid, we added a new Map control

XML

<bm:Map x:Name="bingMap" Credentials="PLEASE PUT YOUR KEY HERE">  </bm:Map>

We gave it a name using the Name tag and the Credentials property is where you give your Bing Maps key that we got in the beginning. 

Now you are set to write some backend code that reads the data (locations) and puts pins on the Map.

4. I am going to show the code first and then explain what I am doing here:
XML

var locationList = new List<Location>
{
    new Location( double.Parse("+42.32460"),  double.Parse("-071.069970")),
    new Location( double.Parse("+37.242268"),  double.Parse("-081.248898")),
    new Location( double.Parse("+25.672805"), double.Parse("-080.379635")),
    new Location( double.Parse("+42.082917"), double.Parse("-070.925096")),
};

var i = 1;

foreach (var location in locationList)
{
    var pushpin = new Pushpin(){Text = i.ToString(), 
           Background = new SolidColorBrush(Color.FromArgb(100,100,100,(byte)i))};
    MapLayer.SetPosition(pushpin,location);
    bingMap.Children.Add(pushpin);
    i++;
}

Since this is just a small beginner level application that tells you how to add Bing Maps to your application, I am not doing anything fancy here. 

In the MainPage constructor, I added the above code:

1. I am creating a locationlist, a list of Location type objects. A Location object takes two double values, one for Latitude and the other for Longitude.
2. Since we are going to add these four points on the Map I gave it a loop.
3. I am creating a custom Pushpin object for the above four Location(s), giving a text to identity, and a color to differentiate them.
4. MapLayer is a reference to your map that we added. So we set the position of the map layer, the position where our pushpin objects should be located on the Map, and then add them to bingMap which is the ID of our Map control that we put in MainPage.xaml.
5. Run the application and you see the following.

I know I chose a wrong background color but you could see those four locations on the map (I had to zoom in to get this view, but by default the zoom level shows the whole world). 

You see 1 & 4 close to Boston, 2 in VA, and 3 in FL.

You can change the background color to anything you want, you can also add a custom image instead of a circle dot. Add any text to the pushpin and do many more customizations. 

Things to Remember

• Make sure you get a Bing Maps Key.
• Make sure you install Bing Maps SDK.
• Make sure before you add the references to the application, change the mode of the solution to any of the three x86, x64, ARM. Adding ahead of the change would throw an error.
• Make sure you play more with it and add your links below for more people to explore the SDK.