Display device location with autopan modes

View inMAUIUWPWPFWinUIView 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 with autopan modes

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 button to start and stop location display.

How it works

  1. Create a MapView.
  2. Set the LocationDisplay.AutoPanMode that corresponds with the selected element of the combo box.
  3. Set the LocationDisplay.IsEnabled bool from the MapView to true.
  4. Set the LocationDisplay.IsEnabled bool from the MapView to false when the stop button is pressed.

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

DisplayDeviceLocation.xaml.csDisplayDeviceLocation.xaml.csDisplayDeviceLocation.xaml
Use dark colors for code blocksCopy
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
// Copyright 2022 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 Microsoft.Maui.ApplicationModel;
using System.ComponentModel;
using System.Diagnostics;
using Map = Esri.ArcGISRuntime.Mapping.Map;

namespace ArcGIS.Samples.DisplayDeviceLocation
{
    [ArcGIS.Samples.Shared.Attributes.Sample(
        name: "Display device location with autopan modes",
        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 button to start and stop location display.",
        tags: new[] { "GPS", "compass", "location", "map", "mobile", "navigation" })]
    public partial class DisplayDeviceLocation : ContentPage, IDisposable
    {
        // Dictionary to store the different auto pan modes.
        private readonly Dictionary<string, LocationDisplayAutoPanMode> _autoPanModes = new()
        {
            { "AutoPan Off", LocationDisplayAutoPanMode.Off },
            { "Re-Center", LocationDisplayAutoPanMode.Recenter },
            { "Navigation", LocationDisplayAutoPanMode.Navigation },
            { "Compass", LocationDisplayAutoPanMode.CompassNavigation }
        };

        public DisplayDeviceLocation()
        {
            InitializeComponent();
            Initialize();
        }

        private void Initialize()
        {
            // Create new Map with basemap.
            var myMap = new Map(BasemapStyle.ArcGISImageryStandard);

            // Assign the map to the MapView.
            MyMapView.Map = myMap;

            // Populate the picker with different auto pan modes.
            AutoPanModePicker.ItemsSource = _autoPanModes.Keys.ToList();

            // Keep listening to MapView property changed events until the location display has been initialized.
            MyMapView.PropertyChanged += MyMapView_PropertyChanged;
        }

        private void MyMapView_PropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            // The map view's location display is initially null, so check for a location display property
            // change before subscribing to auto pan mode change events.
            if (e.PropertyName == nameof(LocationDisplay))
            {
                // Show in the UI that LocationDisplay.AutoPanMode is off by default.
                AutoPanModePicker.SelectedItem = "AutoPan Off";

                // Update the UI when the user pans the view, disabling the auto pan mode.
                MyMapView.LocationDisplay.AutoPanModeChanged += (sender, args) =>
                {
                    if (MyMapView.LocationDisplay.AutoPanMode == LocationDisplayAutoPanMode.Off)
                    {
                        AutoPanModePicker.SelectedItem = "AutoPan Off";
                    }
                };

                // No longer a need to listen for MapView property changes, just listen for auto pan mode changes.
                MyMapView.PropertyChanged -= MyMapView_PropertyChanged;
            }
        }

        private void AutoPanModePicker_SelectedIndexChanged(object sender, EventArgs e)
        {
            // Change the auto pan mode based on the new selection.
            MyMapView.LocationDisplay.AutoPanMode = _autoPanModes[AutoPanModePicker.SelectedItem.ToString()];
        }

        private async void StartStopButton_Clicked(object sender, EventArgs e)
        {
            try
            {
                // Start or stop the location display data source.
                if (MyMapView.LocationDisplay.IsEnabled)
                {
                    await MyMapView.LocationDisplay.DataSource.StopAsync();
                }
                else
                {
                    // Request access to device location.
                    // When deploying to Android, iOS, and MacCatalyst, a permission prompt may appear.
                    PermissionStatus status = await Permissions.RequestAsync<Permissions.LocationWhenInUse>();

                    // Start the location display if access to device location has been authorized.
                    // Permission status will be restricted if the user approximates the device location.
                    if (status == PermissionStatus.Granted || status == PermissionStatus.Restricted)
                    {
                        await MyMapView.LocationDisplay.DataSource.StartAsync();
                    }
                }
            }
            catch (Exception ex)
            {
                // Note for MacCatalyst: while on ethernet, without an external GPS device connected,
                // location will be unknown.
                Debug.WriteLine(ex);
                await Application.Current.MainPage.DisplayAlert("Error", ex.Message, "OK");
            }
            finally
            {
                // Flip the button text if the LocationDisplay.IsEnabled property was changed.
                // Button text won't change if start button was pressed but location access wasn't authorized.
                StartStopButton.Text = MyMapView.LocationDisplay.IsEnabled ? "Stop" : "Start";
            }
        }

        public void Dispose()
        {
            // Stop the location data source.
            MyMapView.LocationDisplay?.DataSource?.StopAsync();
        }
    }
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.