Introduction
In this article, we will see a Universal Windows platform - Map control using Visual Studio development tool.
Requirement
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. {
  4. var center =
  5. new Geopoint(new BasicGeoposition()
  6. {
  7. Latitude = 11.66509,
  8. Longitude = 78.154587
  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;
  18. // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
  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. }
  33. private async void Mapsample_Loaded(object sender, RoutedEventArgs e)
  34. {
  36. var center =
  37. new Geopoint(new BasicGeoposition()
  38. {
  39. Latitude = 11.66509,
  40. Longitude = 78.154587
  42. });
  44. await Mapsample.TrySetSceneAsync(MapScene.CreateFromLocationAndRadius(center, 3000));
  45. }
  47. }
  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:
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