Windows 8 Apps: Integrating Bing Maps with GeoLocation

Posted by: Mahesh Sabnis , on 1/23/2013, in Category Windows Store Apps
Views: 22921
Abstract: Using Bing Maps and location services, developers can easily develop location aware Windows 8 apps

As part of my experiments with Modern UI style app development in Windows 8, I have been exploring its integration with Bing Maps. In this small walkthrough, we will see how to use Bing Maps and the location device location API to show your current location on the map. To use Bing Maps, you must have Bing Map SDK for Windows Store Apps Extensions installed on your machine. This extension can be downloaded from here (it’s a 45.4MB SDK + Components Download). You can also get it from inside Visual Studio using Tools > Packages and Extensions Dialog menu.

 

Getting started with Bing Maps

To start off with, you need to obtain a credential key to access Bing Maps data. You can get the key from here. Login using the Live/Microsoft ID, and then create a Key which you need configure with your application.

bing-map-account

When creating Keys, you have the option of Trial or Basic, select Basic and ‘Application Type’ as WindowsStoreApp.

Step 1: Open Visual Studio 2012, and create a new Windows Store application, name it as ‘BingMapsWindowStoreApp’. In this project, add a reference of ‘Bing Maps for C#, C++, or Visual Basic’ as shown below:

reference-manager

Step 2: Open MainPage.xaml and use the Bing Map reference as shown below:

<Page
    x:Class="BingMapsWindowStoreApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BingMapsWindowStoreApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:bm="using:Bing.Maps"
    mc:Ignorable="d"
     Loaded="Page_Loaded_1">

Step 3: Add the Map control as below under the Grid as below:

<bm:Map x:Name="myMap" Credentials="Replace_with_your_Bing_Maps_Key"
                 Grid.Column="1"></bm:Map>

Now make sure you use the account key you need to enter as a value of the Credential property. One important thing here is that the application must target 64 bit platform. So you can set is as shown below:

config-manager

Step 4: Run the application and the result will be as shown below:

bing-map

Instead of the map if you see the following:

no-map

a big red stop sign i.e. circle with a line down the middle), fear not, you didn’t do anything wrong. The Bing Maps control doesn’t work in all regions. To test things out, you can change the Region of your computer as follows:

- Go to Control-Panel > Clock,Language and Region > Change Location. Set Home Location to United States

- Run the sample again

Warning: Changing Region affects Windows 8 Store and may make you ineligible for some apps

Step 5: To get the current location, we need to make use of the following classes:

  • Geolocator: Class to access the geographic location.
  • Location: Contains coordinates values of the location on the map.

Step 6: Open MainPage.xaml and add Textboxes, TextBlock as shown below:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
   <ColumnDefinition Width="251*"/>
   <ColumnDefinition Width="1115*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Width="200">
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="100"></ColumnDefinition>
     <ColumnDefinition Width="100"></ColumnDefinition>
   </Grid.ColumnDefinitions>
   <Grid.RowDefinitions>
     <RowDefinition Height="40"></RowDefinition>
     <RowDefinition Height="40"></RowDefinition>
     <RowDefinition Height="40"></RowDefinition>
   </Grid.RowDefinitions>
   <TextBlock Text="Latidude" Grid.Row="0" Grid.Column="0" Width="100"></TextBlock>
   <TextBlock Text="Longitude" Grid.Row="1" Grid.Column="0" Width="100"></TextBlock>
   <TextBox x:Name="txtlatitude" Grid.Row="0" Grid.Column="1" Width="100"></TextBox>
   <TextBox x:Name="txtlongitude" Grid.Row="1" Grid.Column="1" Width="100"></TextBox>
   <Button x:Name="btnlocateme" Content="Locate Me" Click="btnlocateme_Click_1"
Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" ></Button>
  </Grid>

  <bm:Map x:Name="myMap" Credentials="AsfBv6NiPxM2kmAWjLbn07HNQo-CLd4pkZ6wwK00LHhKqLgABsj2_VNd6VwiTuU6"
                 Grid.Column="1"></bm:Map>
</Grid>

 

Step 7: To set the location display, add a new user control in the project and name it as ‘PositionLocator.xaml’. Add the following Xaml in it as shown below:

<Canvas>
<TextBlock Text="You are here:" FontSize="30" FontFamily="Times New Roman"></TextBlock>
<Rectangle Height="25" Width="25" Fill="Red" Margin="-12.5,-12.5,0,0"></Rectangle>
</Canvas>

Step 8: Open MainPage.xaml.cs and refer the following namespaces:

using Bing.Maps;
using Windows.Devices.Geolocation;
using Windows.UI.Core;

Define the following objects at class level:

//Class for accessing geographic location
Geolocator glocator;
//User control object
PositionLocator pos;
//class for containing coordinates of location on map
Location location;

Set the properties for the Map object in the Loaded event:

private void Page_Loaded_1(object sender, RoutedEventArgs e)
{
//S1: Set the Default display for the MAp Type
myMap.MapType = MapType.Aerial;
//S2: Set the properties for the Map
myMap.ShowBuildings = true;
myMap.ShowTraffic = true;
}

In the MainPage class constructor, create instances for Location and Geolocator as shown below and subscribe for the PositionChanged event of the Geolocator class:

glocator = new Geolocator();
pos = new PositionLocator();
myMap.Children.Add(pos);

//S3: Event of the Position Changed
glocator.PositionChanged += new Windows.Foundation.TypedEventHandler<Geolocator, PositionChangedEventArgs>(glocator_PositionChanged);

Add the method to set the position on the map and read the Longitude and Latitude on the map as below:

/// <summary>
/// Method to get the default position of the application user
/// </summary>
/// <param name="sender"></param>
/// <param name="args"></param>
private void GetMyPosition(object sender, PositionChangedEventArgs args)
{
      location = new Location(args.Position.Coordinate.Latitude, args.Position.Coordinate.Longitude);
  //S4: Set the Position on the Map using location values and the put the UI for postion (Rectangle)
    MapLayer.SetPosition(pos, location);
    //S5: Set the Map view for the location values and zoom level
    myMap.SetView(location, 18.0f);

    //Display the Longitude and Latitude values
    txtlatitude.Text = args.Position.Coordinate.Latitude.ToString();
    txtlongitude.Text = args.Position.Coordinate.Longitude.ToString();
}

Call this method in the PositionChanged event of the Geolocator class. This event makes call to the GetMyPosition () method asynchronously:

//Async Execution of the event
async void glocator_PositionChanged(Geolocator sender, PositionChangedEventArgs args)
{
   await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, new DispatchedHandler(
     () =>
     {
         GetMyPosition(this, args);
     }));
}

Step 9: To get the position, the application must be configured to get the location. To set access rights for the location, open the ‘Package.appxmanifest’ file and set the application Capabilities as below:

get-app-location

Step 10: Run the application and the result will be as shown below:

bing-map-app

After clicking on ‘Allow’, your current location will be displayed.

Conclusion

Using Bing Maps and location services, developers can easily develop location aware apps. The current Bing Map control has a shortcoming where it prevents it from working for Apps in all Windows 8 supported regions.

The sample code can be downloaded from https://github.com/dotnetcurry/bingmaps-win8-store

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce the pre-order of The Absolutely Awesome Book on C# and .NET. This is a concise technical eBook and will be available in PDF, ePub, and mobi.

Organized around concepts, this eBook aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core. Use these concepts in your next .NET Project or to crack your next .NET Interview.

Click here to Pre-Order this eBook at a Discounted Price!

What Others Are Reading!
Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Mahesh Sabnis is a DotNetCurry author and Microsoft MVP having over 17 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet


Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Justin Thomson on Thursday, February 14, 2013 3:21 AM
Mahesh, you really did great job. As the exclusive concept about Bing maps with GeoLocation is really looking wonderful. The regarding coding info is also wonderful for me. I am also one of mobile app developer and the regarding concept of this source really makes me crazy about it. As the exclusive tutorial steps are really fantastic.
http://www.openxcell.com
Comment posted by keith r. on Thursday, April 18, 2013 3:43 AM
This is indeed quite a nice extension considering how Bing is starting to come close with Google now when it comes to search engines. That's what I think, at least.
Comment posted by mehwishmishi1122 on Monday, July 7, 2014 2:48 AM
its amazing and informative site
Comment posted by John Marshal on Saturday, December 27, 2014 2:27 AM
Thanks for sharing a valuable information. I was looking for the same solutions.

http://www.cromosys.com

Categories

JOIN OUR COMMUNITY

POPULAR ARTICLES

C# .NET BOOK

C# Book for Building Concepts and Interviews

Tags

JQUERY COOKBOOK

jQuery CookBook