Maps in Windows Store Apps

Introduction

Using Maps in Windows Store Apps can be done using the Bing Maps SDK for Windows Store Apps. Geographical map experiences in your Windows Store Apps can be done using the Bing Maps Controls provided by the Bing Maps SDK for Windows Store Apps. Download and install the Bing Maps SDK for Windows Store Apps from: Bing Maps SDK for Windows Store apps (If you are using Visual Studio 2012) and Bing Maps SDK for Windows 8.1 Store apps (if you are using Visual Studio 2013).

The Bing Maps key is necessary to authenticate your Windows Store application. Once you download, you will get a Bing.Maps.vsix file that is the Visual Studio extension package file. Double-click on it to install the Bing Map SDK. The Microsoft Visual Studio Extension is ".vsix". You can learn more about creating a Bing Maps key from the webpage: Create a Bing Maps Key. Trial Key, Basic Key and Enterprise Key are three types of Bing Maps Key packages offered by Microsoft. I am selecting Trial Key that is a “90 days trial key” to use Bing Maps for development purposes. The procedure to use the Bing Map SDK is given below.

Step 1

Get the Bing Maps Application Key. To get the trial version, get logged onto: Bing Maps Account Center and click on the “Log In” button to login using your Microsoft account credentials. You need to have a Microsoft Account.

• Click on the Sign In button as shown in the following screen shot and login with the Microsoft Account credentials.
  
  
  
  
• Provide the information about the application.
  
  

  The preceding screen demonstrates a sample entry of information to create the key required to integrate the Bing Maps feature into the Windows Store App. As shown above, the Application Name, Application URL, Key Type and Application Type are some of the information the developer must input. In these, filling out the Application Name, Key Type, Application Type and CAPTCHA code are mandatory.
  

• Check for the generated key.

  
  
  The preceding screen shows that the key is generated for the application named “BingMapDemo”. The application name along with the Key details (Key, Key Type, Application type, Created Date, and Expiration Date) are all listed along with an option to update.

Step 2

Create a new Windows Store App project using Visual Studio targeting C#.

Step 3

Another way to install the Bing Maps SDK is by going into Visual Studio, the Extensions and Updates option.


As shown in the preceding screen go to Visual Studio > Tools > Extensions and Updates.



Type “bing maps” in the search bar. You will see search results in the “Extensions and Updates” window. Select and download the Bing Maps SDK for Windows 8.1 Store apps. Once you click on the download option it will automatically download and install this SDK. Since I am using Visual Studio 2013, I target for Windows 8.1 and hence I use the Bing Maps SDK for Windows Store 8.1 apps.

Step 4

Check for the Bing Maps controls added to the tool box after the installation of the Bing Maps SDK.



As shown above go to Toolbox > General > Choose Items.



Type the keyword “Bing” in the Filter field and Choose Toolbox Item windows will list all the Bing Maps control items. See to it that all the controls are checked/ticked, so that all will be the part of the toolbox of the project and we will have a chance to use them in our project.

Step 5: Change the Build Platform target to a specific platform, like x86, x64 or ARM from Any CPU.



If your application platform target is set to “Any CPU” then you will see the exclamation symbol on each of the Bing Maps related references that are being added into the project. The preceding screen shows the snapshot of the project references section when the selected target platform is Any CPU.



The preceding screen shows the method to change “Any CPU” platform to specific CPU architectures, such as x86, x64, ARM under the Build settings. To reach this, you need to go the project properties by right-clicking on the project under the solution and then select the properties option.

Step 6

Add a namespace to the XAML page.



The preceding code with annotation represents the adding of the namespace into the XAML code.

Step 7

Build a small application that takes latitude and longitude as input and maps the location using the Bing Maps control.


                                          Figure: The final application screen is as shown above.

Let me use Google Maps to get the Latitude and Longitude of the location needed. Now we can fetch the information regarding the Latitude and Longitude of a place using Google Maps.


           Figure: Navigate to: Google Map and get the location information that you need to find.


               Figure: The preceding figure shows the marked Latitude and Longitude information.

According to the data from the preceding Google Maps screen, Latitude=12.914968 and Longitude= 77.483729. Once you get this information on your location you need to enter these details into the textboxes provided in the application. This location will be mapped and displayed to the user within the same app screen upon clicking the search button provided right below the textboxes.


                           Figure: Enter the data into textboxes to get the map of the location.


                        Figure: After mapping the location and displaying within Bing Map view.

As shown in the preceding screen, upon clicking the “Search” button, the btnSearch_Click event handler will be called and the data will be mapped and will be displayed within the Bing Maps Control placed on the design view of the application.

The written XAML code is as shown below.



Since we received the Bing Maps key details from Step 1, the key “AiLMrOJ_t-Uh1FA72XddZfmyGK0hse3b-AINKEUSWOAul2hVx_jhdwWGVJVBuYMp” becomes the credentials to use Bing Maps into this Windows Store application. As shown in the preceding XAML code, the string property named Credentials present in the Map class must be set to the Bing Maps key that we are using for this specific app. I have set this value to my Bing Maps key value as specified above. You can set the zoom level to the value that you need. All these functionalities could be added by modifying the code behind file with C# code as well.

The Bing.Maps namespace has a class named “Map” class that provides all the functionalities to work with Bing Maps. As shown in the preceding XAML code screenshot, we are using the same class to work with. The Center property of this Map class helps in setting and getting the location center of the map. Since we need to set this property upon the search button click to the Latitude and Longitude given by the user, we have taken this property into consideration. We need to make use of a sealed class named Location for feeding the location by means of Latitude and Longitude to the Bing Map's location, in other words the Center property. The Center property of the Map class can be accessed and set to the necessary location by means of XAML code as shown below.



The following piece of code shows the contents of the btnSearch_Click event handler. This will be executed upon the Search button click. If you enter incorrect input such as strings into the latitude and longitude textboxes, the application will inform you with suitable messages. Upon correct latitude and longitude inputs and clicking the Search button, a map of the location output is displayed within the map control.


Remember that you need to make use of the Location class to set the latitude and longitude to the Map's center property. This cannot be done with the code as shown below:



Let's wrap up the entire code using Try and Catch statements as shown below. This can be done by selecting an entire piece of code and by right-clicking on it. After this, click on the “Surround With” option and thereafter select the Try option. The process is as shown below.



The final code written within the button click event handler is as shown below:

private async void btnSearch_Click(object sender, RoutedEventArgs e)
{
    MessageDialog msg;
    double dblLatitude;
    double dblLongitude;

    try
    {

        //Stores the success or failure status of the string to double conversion of latitude entered in the latitude textbox.
        bool isLatitudeInDouble = double.TryParse(txtLatitude.Text, out dblLatitude);

        //Stores the success or failure status of the string to double conversion of latitude entered in the longitude textbox.
        bool isLongitudeInDouble = double.TryParse(txtLongitude.Text, out dblLongitude);

        if (!isLatitudeInDouble)
        {
            msg = new MessageDialog("Please enter valid latitude in double");
           await msg.ShowAsync();
        }

        if (!isLongitudeInDouble)
        {
            msg = new MessageDialog("Please enter valid longitude in double");
            await msg.ShowAsync();
        }

        Location location = new Location(dblLatitude, dblLongitude);
        bingMap.Center = location;
   }
   catch (Exception ex)
   {
        msg = new MessageDialog(ex.Message.ToString());
        msg.ShowAsync();
   }

}

Step 8

Change the Target platform to build and run the application. As shown in the previous procedure, the current application targets the x86 architecture as a platform target. This would be problematic since it throws an exception when you run the application. This can be overcome by changing the target platform from x86 to x64 architecture.


Figure: Shows the exception thrown when we run the application with the platform target x86.


Figure: Changing the platform target from x86 to x64 to successfully run the application without any problem.

Instruction: Download the complete sample application code provided with this article and then read the article. Post this, compare the same with the provided application code.