How to show your current location on a map in Windows Phone 8
July 21, 2014
Applies to: Windows Phone 8 and Windows Phone Silverlight 8.1 only
This topic describes how to create an app that displays your current location on the Map control and marks the location with a small circle.
This topic describes how to write code that displays a map and marks a location on the map inside your app. If you simply want to display a map and mark a location, you can also use the Maps task, which launches the built-in Maps app. For more info, see How to use the Maps task for Windows Phone 8.
Before your app uses location services, make sure that the user has given consent to use the phone’s location. For more info and sample code, see How to get the phone's current location for Windows Phone 8.
For a sample that demonstrates some of the tasks described in this topic, download the Simple Map control sample.
This topic contains the following sections.
To create the project
In Visual Studio, create a new Windows Phone app project. Name the new project ShowMyLocationOnMap.
Optionally, change the title of the app.
In MainPage.xaml, in the designer, select the first textblock which contains the app title MY APPLICATION.
Change the text to SHOW MY LOCATION ON MAP.
Optionally, change the title of the page.
In the designer, select the second textblock which contains the page title page name.
Change the text to my location.
Select the ID_CAP_LOCATION and the ID_CAP_MAP capabilities in the app manifest file.
In Solution Explorer, expand the Properties folder in a C# project or the My Project folder in a Visual Basic project. In a Visual Basic project, you may have to click Show all files before you can expand the My Project folder.
In the expanded folder, locate and open the app manifest file, WMAppManifest.xml.
In Manifest Designer, on the Capabilities page, check the ID_CAP_LOCATION and the ID_CAP_MAP capabilities.
Save your changes and close Manifest Designer.
For more info, see How to add a Map control to a page in Windows Phone 8.
To add the Map control
In the Toolbox, select the Map control and drag and drop it onto the designer.
If you add the control by writing XAML, you also have to add the following xmlns declaration to the phone:PhoneApplicationPage element. If you drag and drop the Map control from the Toolbox, this declaration is added automatically.
In the Properties window, name the Map control mapWithMyLocation.
In MainPage.xaml, in the XAML code window, remove all attributes of the Map element except for the Name attribute. This lets the Map control fill the available space on the page. The XAML for the Map control now contains the following code.
When you get your current location, the code returns a Windows.Devices.Geolocation.Geocoordinate. The code in this helper class converts this Windows.Devices.Geolocation.Geocoordinate to the System.Device.Location.GeoCoordinate expected by the Map control.
To get an extension method to do this conversion, along with other useful extensions to the Maps API, download the Windows Phone Toolkit.
To add a helper class to convert geocoordinates
In Solution Explorer, right-click the project and select Add Class. Name the new helper class CoordinateConverter. Click OK.
Replace the code in the new class file with the following code.
Imports Location = System.Device.Location ' Provides the GeoCoordinate class. Imports Geolocation = Windows.Devices.Geolocation 'Provides the Geocoordinate class. Public Class CoordinateConverter Private Sub New() End Sub Public Shared Function ConvertGeocoordinate(geocoordinate As Geolocation.Geocoordinate) As Location.GeoCoordinate Return New Location.GeoCoordinate(geocoordinate.Latitude, geocoordinate.Longitude, If(geocoordinate.Altitude, [Double].NaN), geocoordinate.Accuracy, If(geocoordinate.AltitudeAccuracy, [Double].NaN), If(geocoordinate.Speed, [Double].NaN), If(geocoordinate.Heading, [Double].NaN)) End Function End Class
To show your location on the map
In the MainPage.xaml.cs or MainPage.xaml.vb code file, import the following namespaces.
using Microsoft.Phone.Maps.Controls; using System.Device.Location; // Provides the GeoCoordinate class. using Windows.Devices.Geolocation; //Provides the Geocoordinate class. using System.Windows.Media; using System.Windows.Shapes;
Imports Microsoft.Phone.Maps.Controls Imports System.Device.Location ' Provides the GeoCoordinate class. Imports Windows.Devices.Geolocation 'Provides the Geocoordinate class. Imports System.Windows.Media Imports System.Windows.Shapes
In the MainPage.xaml.cs or MainPage.xaml.vb code file, in the MainPage class, create the following new method.
Private Async Sub ShowMyLocationOnTheMap() End Sub
In the constructor of the MainPage class, add the highlighted code to call the new method when the app runs.
In the ShowMyLocationOnTheMap method, add the following code to get your current location. This code uses the CoordinateConverter class that you added to the project in a previous step.
' Get my current location. Dim myGeolocator As New Geolocation.Geolocator() Dim myGeoposition As Geolocation.Geoposition = Await myGeolocator.GetGeopositionAsync() Dim myGeocoordinate1 As Geolocation.Geocoordinate = myGeoposition.Coordinate Dim myGeoCoordinate2 As Location.GeoCoordinate = CoordinateConverter.ConvertGeocoordinate(myGeocoordinate1)
In the ShowMyLocationOnTheMap method, add the following code to make your current location the center of the map.
This sample uses a circle to mark your location on the map. For more info about related tasks, see How to add UIElements to a Map control in Windows Phone 8.
To mark your location on the map
In the ShowMyLocationOnTheMap method, add the following code to create a small blue circle that has a diameter of 20 pixels and is 50 percent opaque.
In the ShowMyLocationOnTheMap method, add the following code to create a MapOverlay to contain the circle. This code centers the circle over your current location by using the PositionOrigin and GeoCoordinate properties.
In the ShowMyLocationOnTheMap method, add the following code to add the MapLayer to the map.