How to show your current location on a map in Windows Phone 8

Article
05/20/2016

[ This article is for Windows Phone 8 developers. If you’re developing for Windows 10, see the latest documentation. ]

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.

Tip

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.

Creating the project

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

Adding the Map control

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.
```
xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
```
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.
```
<maps:Map x:Name="mapWithMyLocation"/>
```

Adding a helper class to convert geocoordinates

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.

using System;
using System.Device.Location; // Provides the GeoCoordinate class.
using Windows.Devices.Geolocation; //Provides the Geocoordinate class.

namespace ShowMyLocationOnMap
{
    public static class CoordinateConverter
    {
        public static GeoCoordinate ConvertGeocoordinate(Geocoordinate geocoordinate)
        {
            return new GeoCoordinate
                (
                geocoordinate.Latitude,
                geocoordinate.Longitude,
                geocoordinate.Altitude ?? Double.NaN,
                geocoordinate.Accuracy,
                geocoordinate.AltitudeAccuracy ?? Double.NaN,
                geocoordinate.Speed ?? Double.NaN,
                geocoordinate.Heading ?? Double.NaN
                );
        }
    }
}

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

Showing your location on the map

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 void ShowMyLocationOnTheMap()
        {
        }

    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.

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            ShowMyLocationOnTheMap();
        }

    ' Constructor
    Public Sub New()

        InitializeComponent()
        ShowMyLocationOnTheMap()

    End Sub

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.
            Geolocator myGeolocator = new Geolocator();
            Geoposition myGeoposition = await myGeolocator.GetGeopositionAsync();
            Geocoordinate myGeocoordinate = myGeoposition.Coordinate;
            GeoCoordinate myGeoCoordinate = 
                CoordinateConverter.ConvertGeocoordinate(myGeocoordinate);

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

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

Marking your location on 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.

            // Create a small circle to mark the current location.
            Ellipse myCircle = new Ellipse();
            myCircle.Fill = new SolidColorBrush(Colors.Blue);
            myCircle.Height = 20;
            myCircle.Width = 20;
            myCircle.Opacity = 50;

        ' 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

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.
            MapOverlay myLocationOverlay = new MapOverlay();
            myLocationOverlay.Content = myCircle;
            myLocationOverlay.PositionOrigin = new Point(0.5, 0.5);
            myLocationOverlay.GeoCoordinate = myGeoCoordinate;

        ' 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

In the ShowMyLocationOnTheMap method, add the following code to create a MapLayer to contain the MapOverlay.

            // Create a MapLayer to contain the MapOverlay.
            MapLayer myLocationLayer = new MapLayer();
            myLocationLayer.Add(myLocationOverlay);

        ' Create a MapLayer to contain the MapOverlay.
        Dim myLocationLayer As New MapLayer()
        myLocationLayer.Add(myLocationOverlay)

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);

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

Results

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.