Now a days, integration of maps within an application is common and developers wants to integrate their application to use maps. So, in this post, we will create an Universal Windows Application to use Bing Maps Api and utilize Maps functionality within the application.
For creating this application, first, we will create an Universal Windows App in Visual studio. Then, we will open our XAML file of the page and add the following code for the map:
1 2 3 4 5 6 7 8 9 | Aerial Aerial3D Aerial3DWithRoads AerialWithRoads Road Terrain None |
After adding the code in designer, we will add following namespaces in the .CS file of the page to use code for fetching current location of a person and showing it on the map:
1 2 3 4 5 6 | using Windows.Storage.Streams; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Controls.Maps; using Windows.Devices.Geolocation; using Windows.Foundation; |
Now, we will add the code for our Button Click event handler for “Get Location” Button and Selection Changed event handler for Combo box for our view:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | private async void Location_Click(object sender, RoutedEventArgs e) { var accessStatus = await Geolocator.RequestAccessAsync(); switch (accessStatus) { case GeolocationAccessStatus.Allowed: Geolocator gl = new Geolocator(); Geoposition gp = await gl.GetGeopositionAsync(); Geopoint currloc = gp.Coordinate.Point; MapControl1.Center = currloc; MapControl1.ZoomLevel = 15; MapIcon mi = new MapIcon(); mi.Location = myloc; mi.NormalizedAnchorPoint = new Point(0.5, 1.0); mi.Image = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/pin.png")); // Add a pin to the location in Map mi.ZIndex = 0; MapControl1.MapElements.Add(mi); break; case GeolocationAccessStatus.Denied: break; case GeolocationAccessStatus.Unspecified: break; } } private void comboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { switch (comboBox.SelectedValue.ToString()) { case "None": MapControl1.Style = MapStyle.None; break; case "Aerial": MapControl1.Style = MapStyle.Aerial; break; case "Aerial3D": MapControl1.Style = MapStyle.Aerial3D; break; case "Aerial3DWithRoads": MapControl1.Style = MapStyle.Aerial3DWithRoads; break; case "AerialWithRoads": MapControl1.Style = MapStyle.AerialWithRoads; break; case "Road": MapControl1.Style = MapStyle.Road; break; case "Terrain": MapControl1.Style = MapStyle.Terrain; break; } } |
Now, we have written the code to fetch the current location of a person and show it in the map. Add pin.png to the Assets folder of the solution to show the pin on the current location on the map.
After we are done with our application in Visual Studio, we will be creating an app on Bings Map Portal which will give us the Api Key to use for fetching map from Bing Maps site.
Now, the steps to create a key for on Bing Maps Portal are:
Go to www.bingmapsportal.com -> Sign In (with outlook account) -> My Accounts -> Create or View keys -> Click here to Create new Key -> Enter Application Name which you created in Visual Studio (Use exact name as in Visual Studio) -> Select Application Type -> Create
After the above steps, you can find the list of application below on the same page and there click on Copy Key to copy the key. It looks like below:
Now, copy the key and paste it in MapServiceToken property of the MapControl control on the XAML file of the page.
Run the application and enjoy!