In this article, I will demonstrate how to use Bing Maps Control in Windows Phone applications. Please install Windows Phone SDK 7.1 before you go through this hands-on practice.

1. Create Windows Phone Application in Visual Studio 2010 with project name “BingMapsExample”

Create project using existing template Windows Phone Application:

image

Select Platform as Windows Phone OS 7.1:

image

2. Drag Map Control from the toolbox into MainPage.xaml

image

Rename the control name as “mapMain”.

From the XAML we could know this control is in Microsoft.Phone.Controls.Maps assembly:

xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps

Then run the application in Emulator:

image

Then Invalid Credential Error will occur as below screenshot shows:

Bing Maps Control in Windows Phone Screenshot - 1

The error occurred because there is no key provided; in next step, I will show how to register a developer key.

3. Register developer key for Bing Maps Control

Login http://www.bingmapsportal.com/ with your Windows Live ID.

Create or update your key in the portal (in default, only one key is allowed for developer):

image

Remember to choose Mobile as application type.

then we could use the key in the application:

image

(you can click Update hyper link button to update the key, e.g. change the application type.)

4. Use the key in our application

We add the key in constructor of MainPage.xaml.cs

      // Constructor
        public MainPage()
        {
            InitializeComponent();
            this.mapMain.CredentialsProvider = new ApplicationIdCredentialsProvider("Your KEY");
        }

then re-run the application in Emulator and there is no error now:

Bing Maps Control in Windows Phone Screenshot - 2

5. Change the style of the map

Use Mode property to change the mode of the map: we can use RoadMode or AerialMode or MercatorMode or NullMode.

this.mapMain.Mode=new AerialMode();

this.mapMain.Mode=new RoadMode();

Below are screenshot of different modes:

Bing Maps Control in Windows Phone Screenshot - 3Bing Maps Control in Windows Phone Screenshot - 4

(RoadMode and AerialMode)

6. Using pushpins

We can use pushpin to specify a location in the map. I will show how to add a pushpin of my current location.

Add loaded handler for Loaded event:

<my:Map Height="600" HorizontalAlignment="Left" Name="mapMain" VerticalAlignment="Top" Width="450" Loaded="MapMainLoaded">
            </my:Map>

The code:

private void MapMainLoaded(object sender, RoutedEventArgs e)
        {
            var geoCoordinateMyPlace = new GeoCoordinate(30.549917722771724, 104.06983852386474);
            mapMain.Center = geoCoordinateMyPlace;
            mapMain.ZoomLevel = 15;

            var pushpin = new Pushpin
                                  {
                                      Content = "Tianfu Software Park",
                                      Location = geoCoordinateMyPlace,
                                      Background = (Brush) Application.Current.Resources["PhoneAccentBrush"]
                                  };

            mapMain.Children.Add(pushpin);
        }

The content property of pushpin could be any object.

The screenshot:

Bing Maps Control in Windows Phone Screenshot - 5

We could also add event handlers for pushpin; the below example will change the zoom level of the map:

pushpin.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(
               delegate(object o, ManipulationCompletedEventArgs args)
                   {
                       mapMain.ZoomLevel += 1;
                       args.Handled = true;
                   });

Bing Maps Control in Windows Phone Screenshot - 6

7. Using polylines and polygons
We can connect two or more coordinates in the map using polylines; we can also use polygons to specify an area in the map.

Below are the example codes (in this example we use SetView property instead of Center property to make sure that both the two pushpins will be displayed in the map view):

private void MapMainLoaded(object sender, RoutedEventArgs e)
        {
            var geoCoordinateMyPlace = new GeoCoordinate(30.549917722771724, 104.06983852386474);
            //mapMain.Center = geoCoordinateMyPlace;
            //mapMain.ZoomLevel = 15;
            var geoCoordinateCentryCity = new GeoCoordinate(30.55775252834303, 104.06786441802978);
            var geoCoordinateAnother = new GeoCoordinate(30.56775252834303, 104.06986441802978);
            var pushpin = new Pushpin
                                  {
                                      Content = "Tianfu Software Park",
                                      Location = geoCoordinateMyPlace,
                                      Background = (Brush)Application.Current.Resources["PhoneAccentBrush"]
                                  };
            pushpin.ManipulationCompleted += new EventHandler<ManipulationCompletedEventArgs>(
                delegate(object o, ManipulationCompletedEventArgs args)
                {
                    mapMain.ZoomLevel += 1;
                    args.Handled = true;
                });
            var pushpin2 = new Pushpin
                                  {
                                      Content = "Century City",
                                      Location = geoCoordinateCentryCity,
                                      Background = (Brush)Application.Current.Resources["PhoneAccentBrush"]
                                  };
            var line = new MapPolyline
                           {
                               Locations = new LocationCollection {geoCoordinateMyPlace, geoCoordinateCentryCity},
                               Stroke = (Brush) Application.Current.Resources["PhoneAccentBrush"],
                               StrokeThickness = 3
                           };

            var polygon = new MapPolygon
                              {
                                  Locations =
                                      new LocationCollection
                                          {geoCoordinateMyPlace, geoCoordinateCentryCity, geoCoordinateAnother},
                                  Fill = new SolidColorBrush(Colors.Purple),
                                  Opacity = 0.5
                              };


            LocationRect rect = LocationRect.CreateLocationRect(line.Locations);
            mapMain.SetView(rect);

            mapMain.Children.Add(pushpin);
            mapMain.Children.Add(pushpin2);
            mapMain.Children.Add(line);
            mapMain.Children.Add(polygon);
        }

Below are the screenshots of above code:

Bing Maps Control in Windows Phone Screenshot - 7Bing Maps Control in Windows Phone Screenshot - 8

In next article, I will demonstrate how to use Route Service.

About author
Disclaimer
The opinions and comments expressed herein are my own personal opinions and do not represent my employer's view in any way.
Comments

re: Using Bing Maps Control in Windows Phone Applications

This is worth sharing, this site did a good job, my site is also

Author: miu miu handbags replica @ 4/27/2012 9:28:47 PM | [Reply]

re: Using Bing Maps Control in Windows Phone Applications

This is nice article so far I've read online, thanks for sharing with us. I really appreciate you, keep writing. I was found some other good articles too which also explained very well about Bing Map Control in Windows Phone development. For more details on that posts check out the following url.....
www.mindstick.com/...
f5debug.net/...

Thanks everyone for your precious post.

Author: Rumesh Chandra @ 5/12/2012 5:27:43 AM | [Reply]

re: Using Bing Maps Control in Windows Phone Applications

Thank u :)

Author: Raymond @ 5/14/2012 6:32:23 AM | [Reply]

Add comment
Title
Title is required.
Name
Name is required.
Email
Please input your personal email with valid format.
Comments
Please input comment content.
Captcha Refresh
Input captcha:

Subscription

Statistics

Locations of visitors to this page