Using Bing Maps Control in Windows Phone Applications

702 views 4 comments posted at about 7 years ago Raymond Tang Fahao

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.

Add comment

Comments (3)

Raymond about 6 years ago re: Using Bing Maps Control in Windows Phone Applications

Thank u :)

Rumesh Chandra about 6 years ago 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.

miu miu handbags replica about 6 years ago re: Using Bing Maps Control in Windows Phone Applications

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