Skip To Content ArcGIS for Developers Sign In Dashboard

ArcGIS Runtime SDK for .NET

Display device location

This code sample is available for these platforms:
View Sample on GitHub

Display your current position on the map, as well as switch between different types of auto pan Modes.

Image of display device location

Use case

When using a map within a GIS, it may be helpful for a user to know their own location within a map, whether that's to aid the user's navigation or to provide an easy means of identifying/collecting geospatial information at their location.

How to use the sample

Select an autopan mode, then use the buttons to start and stop location display.

How it works

  1. Create a MapView.
  2. Get the LocationDisplay object by calling getLocationDisplay() on the map view.
  3. Use start() and stop() on the LocationDisplay object as necessary.

Relevant API

  • LocationDisplay
  • LocationDisplay.AutoPanMode
  • Map
  • MapView

Additional information

Location permissions are required for this sample.

Tags

compass, GPS, location, map, mobile, navigation

Sample Code

<UserControl
    x:Class="ArcGISRuntime.UWP.Samples.DisplayDeviceLocation.DisplayDeviceLocation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:esriUI="using:Esri.ArcGISRuntime.UI.Controls"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <esriUI:MapView x:Name="MyMapView" />
        <Border Style="{StaticResource BorderStyle}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <TextBlock Text="Select autopan mode."
                           Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
                           Margin="0,0,0,5"
                           TextAlignment="Center" FontWeight="SemiBold" />
                <ComboBox x:Name="LocationModes"
                          Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
                          HorizontalAlignment="Stretch"
                          SelectionChanged="LocationModes_SelectionChanged"/>
                <Button Content="Start"
                        Grid.Row="2" Grid.Column="0"
                        HorizontalAlignment="Stretch" Margin="0,5,5,0"
                        Click="OnStartClicked" />
                <Button Content="Stop"
                        Grid.Row="2" Grid.Column="1"
                        HorizontalAlignment="Stretch" Margin="5,5,0,0"
                        Click="OnStopClicked" />
            </Grid>
        </Border>
    </Grid>
</UserControl>
// Copyright 2018 Esri.
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License.
// You may obtain a copy of the License at: http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an 
// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific 
// language governing permissions and limitations under the License.

using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace ArcGISRuntime.UWP.Samples.DisplayDeviceLocation
{
    [ArcGISRuntime.Samples.Shared.Attributes.Sample(
        name: "Display device location",
        category: "Location",
        description: "Display your current position on the map, as well as switch between different types of auto pan Modes.",
        instructions: "Select an autopan mode, then use the buttons to start and stop location display.",
        tags: new[] { "GPS", "compass", "location", "map", "mobile", "navigation" })]
    public partial class DisplayDeviceLocation
    {
        // String array to store the different device location options.
        private readonly string[] _navigationTypes =
        {
            "Off",
            "Re-Center",
            "Navigation",
            "Compass"
        };

        public DisplayDeviceLocation()
        {
            InitializeComponent();

            // Setup the control references and execute initialization.
            Initialize();
        }

        private void Initialize()
        {
            // Add event handler for when this sample is unloaded.
            Unloaded += SampleUnloaded;

            // Assign the map to the MapView.
            MyMapView.Map = new Map(Basemap.CreateTopographic());

            // Populate the list of options and select a default.
            LocationModes.ItemsSource = _navigationTypes;
            LocationModes.SelectedIndex = 0;
        }

        private void OnStopClicked(object sender, RoutedEventArgs e)
        {
            // Disable location display.
            MyMapView.LocationDisplay.IsEnabled = false;
        }

        private void OnStartClicked(object sender, RoutedEventArgs e)
        {
            // Enable location display.
            MyMapView.LocationDisplay.IsEnabled = true;
        }

        private void LocationModes_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            // Set the autopan mode.
            switch (LocationModes.SelectedValue.ToString())
            {
                case "Off":
                    // Starts location display with auto pan mode set to Off.
                    MyMapView.LocationDisplay.AutoPanMode = LocationDisplayAutoPanMode.Off;
                    break;
                case "Re-Center":
                    MyMapView.LocationDisplay.AutoPanMode = LocationDisplayAutoPanMode.Recenter;
                    break;
                case "Navigation":
                    MyMapView.LocationDisplay.AutoPanMode = LocationDisplayAutoPanMode.Navigation;
                    break;
                case "Compass":
                    MyMapView.LocationDisplay.AutoPanMode = LocationDisplayAutoPanMode.CompassNavigation;
                    break;
            }
        }

        private void SampleUnloaded(object sender, RoutedEventArgs e)
        {
            // Stop the location data source.
            MyMapView.LocationDisplay?.DataSource?.StopAsync();
        }
    }
}