Using Bing Maps Control in Your Windows Phone 7 Applications

Overview

Today's mobile phones aren't dumb like they were a decade ago. Today, the iPhone or the Droid-X can not only be used for communicating via voice calls but also facilitates instant messages, and can even serve as a GPS or a mapping device. Applications like Four-Square can pinpoint location of contacts on a map so that you can see (or can I say snoop) over where your friends have been to.

A Windows Phone 7 developer too can use the maps feature in his/her applications by using the Bing Maps control, which is the only officially supported control by Microsoft. Applications using Bing Maps can able be referred to as Bing Maps applications.

Getting Started

To get started with using the Bing Maps control in your Bing Maps application, you will need to get a Bing Maps key which is available by registering at https://www.bingmapsportal.com/ If you do not have a Windows Live profile, you will be prompted to create one. If you have one, you can just sign in.

Windows Live
Figure 1

Click on create or sign-in, depending on whether you have a Windows Live ID or not.

Once you complete your registration with the website, you will get to the "My Account" page:

My Account page
Figure 2

Once you have your account created, you will see the "Create or view Keys" Link on the left side of the page. Click that to create or retrieve your key.

You will be asked to fill in the description of your application.

a Bing Maps key is generated
Figure 3

For the article purposes, I will go ahead and create one called DemoBingMaps.

On submitting this information, a Bing Maps key is generated for me which looks like the example below:


Figure 4

We will use this key in our Bing maps application.

Complete details of getting a Bing Maps key for use in your application is available here: http://go.microsoft.com/fwlink/?LinkID=198152.



Using Bing Maps Control in Your Windows Phone 7 Applications

Using the Bing Maps Control in your Bing Maps Application

Let us get started developing our application.

Start Microsoft Visual Studio 2010 and select to create a new project. Select the template "Windows Phone Application" from the list of available templates under "Silverlight for Windows Phone".

Type in the name "BingMapsDemo" and click OK.

[figure5.jpg]
Figure 5

Once your click OK, the project is created. On the MainPage.xaml, drag and drop the Map control from the Toolbox.

[figure6.jpg]
Figure 6

By default, the control will only be the size of a button. Make sure you stretch it to a larger size suitable for your application. For our case, we will make it fit the width of the phone.

[figure7.jpg]
Figure 7

If you build and debug your application at this point, the map control will complain about invalid credentials.

To fix that issue, let us use the Bing Maps key we just obtained above in our application.

Here is the change we make to add the key

  <my:Map Height="375" HorizontalAlignment="Left" Name="map1" VerticalAlignment="Top" Width="456" CredentialsProvider="AtZjYxf45FIyRhN9hhrWbSCYzT8AjyoEbHQq8PNVr9iiO6dgZXJEw-ZFS7NjCVww" />

Note that adding Key directly in the xaml file is not recommended. Use a resource to assign the value.



Using Bing Maps Control in Your Windows Phone 7 Applications

If you want to change the default view rendered, you can set the mode to aerial instead of the default road. For our application we will have a default of aerial mode, so that we can see how the switch to road mode works.

Change your XAML file to contain the highlighted section.

  <my:Map Height="375" HorizontalAlignment="Left" Name="map1" VerticalAlignment="Top" Width="456" CredentialsProvider="AtZjYxf45FIyRhN9hhrWbSCYzT8AjyoEbHQq8PNVr9iiO6dgZXJEw-ZFS7NjCVww" Mode="Aerial" />

Let us add the functionality to switch between Aerial Mode and Road Mode on the maps.

Now, go ahead and add two buttons on the MainPage. Rename the content of the buttons as Aerial and Road.

Now on the Road Button, double click the button so that the event handler for click is created. In the event handler, add the following code:

   private void buttonRoad_Click(object sender, RoutedEventArgs e)
           {
               Microsoft.Phone.Controls.Maps.Core.MapMode m = new Microsoft.Phone.Controls.Maps.RoadMode();
               map1.SetMode(m, true);
           }
   
   Repeat the same with the Aerial button, with the following code
   private void buttonAerial_Click(object sender, RoutedEventArgs e)
           {
               Microsoft.Phone.Controls.Maps.Core.MapMode m = new Microsoft.Phone.Controls.Maps.AerialMode();
               map1.SetMode(m, true);
           }
 

Note that the only difference in the above code snippets is the MapMode; in one, it is RoadMode and in the other it is AerialMode. Now, to fancy our application, let us add a PushPin For that, we need to create an instance of the Pushpin class.

Let us start by adding a button with content "Add Push Pin" which will create a pushpin on the center of the currently visible map area.

Double click the button to wire up the Click Event handler. Add the following code in the button's click Event Handler.

   private void buttonPushPin_Click(object sender, RoutedEventArgs e)
           {
               Microsoft.Phone.Controls.Maps.MapLayer  pushPinLayer = new Microsoft.Phone.Controls.Maps.MapLayer();
               map1.Children.Add(pushPinLayer);
               TextBlock textBlock = new TextBlock(); 
               textBlock.Text = "DemoPushpin"; 
               Grid grid = new Grid(); 
                grid.Children.Add(textBlock); 
               
               Microsoft.Phone.Controls.Maps.Pushpin p = new Microsoft.Phone.Controls.Maps.Pushpin();
               p.Location = map1.Center;
   
               
               pushPinLayer.AddChild(p, map1.Center, Microsoft.Phone.Controls.Maps.PositionOrigin.Center);
               pushPinLayer.AddChild(grid, map1.Center, Microsoft.Phone.Controls.Maps.PositionOrigin.Center);
   
           }
 

Now if you run this application, you can see that by default the world map is visible in the Aerial Mode. Now you can zoom to a place of your choice and click on the Aerial and Road buttons to switch the view between Aerial view and Road View.

To add a push pin, click the "Add Push Pin" button which will add a push pin in the center of the currently visible area. To ensure that the pushpin has some context, we will add a label with the pin called "DemoPushPin".

If you have look at the complete code listing, a sample project is available for download as an attachment to this article.

Summary

In this article, we saw the process to get started with creating applications using Bing Map control. Hopefully you would have found the information useful and will be able to create some great mapping applications.

Related Articles





About the Author

Vipul Vipul Patel

Vipul Patel is a Software Engineer currently working at Microsoft Corporation, working in the Office Communications Group and has worked in the .NET team earlier in the Base Class libraries and the Debugging and Profiling team. He can be reached at vipul_d_patel@hotmail.com

Comments

  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • On-demand Event Event Date: September 10, 2014 Modern mobile applications connect systems-of-engagement (mobile apps) with systems-of-record (traditional IT) to deliver new and innovative business value. But the lifecycle for development of mobile apps is also new and different. Emerging trends in mobile development call for faster delivery of incremental features, coupled with feedback from the users of the app "in the wild." This loop of continuous delivery and continuous feedback is how the best mobile …

  • QA teams don't have time to test everything yet they can't afford to ship buggy code. Learn how Coverity can help organizations shrink their testing cycles and reduce regression risk by focusing their manual and automated testing based on the impact of change.

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds