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.

TipTip:

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.

Icon to indicate an SDK sample

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

  1. In Visual Studio, create a new Windows Phone app project. Name the new project ShowMyLocationOnMap.

  2. Optionally, change the title of the app.

    1. In MainPage.xaml, in the designer, select the first textblock which contains the app title MY APPLICATION.

    2. Change the text to SHOW MY LOCATION ON MAP.

  3. Optionally, change the title of the page.

    1. In the designer, select the second textblock which contains the page title page name.

    2. Change the text to my location.

  4. Select the ID_CAP_LOCATION and the ID_CAP_MAP capabilities in the app manifest file.

    1. 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.

    2. In the expanded folder, locate and open the app manifest file, WMAppManifest.xml.

    3. In Manifest Designer, on the Capabilities page, check the ID_CAP_LOCATION and the ID_CAP_MAP capabilities.

    4. 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

  1. 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.

    xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
    
    
  2. In the Properties window, name the Map control mapWithMyLocation.

  3. 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.

    <maps:Map x:Name="mapWithMyLocation"/>
    

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

  1. In Solution Explorer, right-click the project and select Add Class. Name the new helper class CoordinateConverter. Click OK.

  2. 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

  1. 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
    
    
    
  2. In the MainPage.xaml.cs or MainPage.xaml.vb code file, in the MainPage class, create the following new method.

            private async void ShowMyLocationOnTheMap()
            {
            }
    
        Private Async Sub ShowMyLocationOnTheMap()
        End Sub
    
    
    
  3. In the constructor of the MainPage class, add the highlighted code to call the new method when the app runs.

        ' Constructor
        Public Sub New()
    
            InitializeComponent()
            ShowMyLocationOnTheMap()
    
        End Sub
    
    
    
  4. 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)
    
    
    
  5. In the ShowMyLocationOnTheMap method, add the following code to make your current location the center of the map.

                // Make my current location the center of the Map.
                this.mapWithMyLocation.Center = myGeoCoordinate;
                this.mapWithMyLocation.ZoomLevel = 13;
    

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

  1. 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.

            ' Create a small circle to mark the current location.
            Dim myCircle As New Ellipse()
            myCircle.Fill = New SolidColorBrush(Colors.Blue)
            myCircle.Height = 20
            myCircle.Width = 20
            myCircle.Opacity = 50
    
    
    
  2. 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.

            ' Create a MapOverlay to contain the circle.
            Dim myLocationOverlay As New MapOverlay()
            myLocationOverlay.Content = myCircle
            myLocationOverlay.PositionOrigin = New Point(0.5, 0.5)
            myLocationOverlay.GeoCoordinate = myGeoCoordinate2
    
    
    
  3. In the ShowMyLocationOnTheMap method, add the following code to create a MapLayer to contain the MapOverlay.

            ' Create a MapLayer to contain the MapOverlay.
            Dim myLocationLayer As New MapLayer()
            myLocationLayer.Add(myLocationOverlay)
    
    
    
  4. In the ShowMyLocationOnTheMap method, add the following code to add the MapLayer to the map.

            ' Add the MapLayer to the Map.
            mapWithMyLocation.Layers.Add(myLocationLayer)
    
    
    
    

When you run the project, you see a map that fills the entire available space in the app’s UI. The map is centered on your current location, and the location is marked with a small blue circle.

Map control with current location

Show:
© 2014 Microsoft