Map Control in Universal Windows Platform

Introduction
 
In this article, we will see a Universal Windows platform - Map control using Visual Studio development tool.
 
Requirement
  • Visual Studio 2015 update 1 or later required.
  • Bing Developer Center.
  • Mobile Emulator, if deploying an Application in mobile devices.
Working on Map control
 
Step 1: Open Visual Studio 2015.
 
Step 2: In the Visual Studio's start page, click New project, as shown below:
 
project
 
Step 3: In the new project creation wizard, select C# language, Blank Universal Application and give the project name as "MapSamples" , as shown below:
 
MapSamples
 
Step 4: Now, select the target version of universal Windows project as "Windows 10 Build 10240" and click OK.
 
Windows 10 Build 10240
 
Step 5:Open MainPage.Xaml designer page and select Map Control from the toolbox, as shown below:
 
toolbox 
 
Step 6: Add the code, given below, in your project in MainPage.Xaml: 
  1. <Maps:MapControl x:Name="Mapsample" MapServiceToken="(Map Service token from Bing Developer centre)" Margin="0,10"/>    
Step 7: Add the code, given below, in the MainPage.Xaml.cs:
  1. using Windows.Devices.Geolocation;  
  2. using Windows.UI.Xaml.Controls.Maps;  
  1. this.InitializeComponent();  
  2. Mapsample.Loaded += Mapsample_Loaded;  
Add the code, given above, in the public Mainpage() function.
 
Step 8: Add the code, given below, in the MainPage.Xaml.cs under Main function: 
  1. private async void Mapsample_Loaded(object sender, RoutedEventArgs e)  
  2.        {  
  3.                  
  4.            var center =  
  5.                new Geopoint(new BasicGeoposition()  
  6.                {  
  7.                    Latitude = 11.66509,  
  8.                    Longitude = 78.154587  
  9.   
  10.                });  
  11.            await Mapsample.TrySetSceneAsync(MapScene.CreateFromLocationAndRadius(center, 3000));  
  12.        }  
The overall code will look like:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.IO;  
  4. using System.Linq;  
  5. using System.Runtime.InteropServices.WindowsRuntime;  
  6. using Windows.Devices.Geolocation;  
  7. using Windows.Foundation;  
  8. using Windows.Foundation.Collections;  
  9. using Windows.UI.Xaml;  
  10. using Windows.UI.Xaml.Controls;  
  11. using Windows.UI.Xaml.Controls.Maps;  
  12. using Windows.UI.Xaml.Controls.Primitives;  
  13. using Windows.UI.Xaml.Data;  
  14. using Windows.UI.Xaml.Input;  
  15. using Windows.UI.Xaml.Media;  
  16. using Windows.UI.Xaml.Navigation;  
  17.   
  18. // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409  
  19.   
  20. namespace Mapsample  
  21. {  
  22.     /// <summary>  
  23.     /// An empty page that can be used on its own or navigated to within a Frame.  
  24.     /// </summary>  
  25.     public sealed partial class MainPage : Page  
  26.     {  
  27.         public MainPage()  
  28.         {  
  29.             this.InitializeComponent();  
  30.             Mapsample.Loaded += Mapsample_Loaded;  
  31.         }  
  32.   
  33.         private async void Mapsample_Loaded(object sender, RoutedEventArgs e)  
  34.         {  
  35.                   
  36.             var center =  
  37.                 new Geopoint(new BasicGeoposition()  
  38.                 {  
  39.                     Latitude = 11.66509,  
  40.                     Longitude = 78.154587  
  41.   
  42.                 });  
  43.   
  44.             await Mapsample.TrySetSceneAsync(MapScene.CreateFromLocationAndRadius(center, 3000));  
  45.         }  
  46.   
  47.         }  
  48.   
  49. }  
Note: Copy Map Service token form Bing developer center and paste it in the  MapServiceToken column.
 
Step 9: Deploy the Application in the local machine.
 
Step 10: Finally the output is displayed, which is given below. 
 
output
 
In Bing Developer Center
 
These Bing Maps developer center provides various tools and resources for displaying the Maps for doing the following operations, as given below:
  • Storing Location
  • Accessing Location
  • Tracking location 
For adding Map control, we need to get Map Token from the Developer center. For login, click the Link. It requires your Microsoft account, which can be either Hotmail or Outlook.
 
Step 1: Once your login is completed you will navigat to the following page that is shown below,
 
page
 
Step 2: Click My Account option and a dropdown menu appears in it. Select My Keys and the page given below appears:
 
My Account
 
Step 3:In the My Key dashboard, click an option "Click here to create a Key" and the Window, shown below appears:
 
create
 
Step 4: In the Key creation wizard, type the needed fields such as Application Name, key type, Application type and click create. Finally , Map Key is created successfully.
 
create
 
create


Similar Articles