Show your current position on the map, as well as switch between different types of auto pan 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
On the lower left, there is a switch that allows you to turn location tracking On and Off.
Tap the button in the lower right (which starts in Re-Center mode). A menu will appear with the following options:
- Re-Center - Starts the location display with
LocationDisplayAutoPanMode
set toRecenter
. - Navigation - Starts the location display with
LocationDisplayAutoPanMode
set toNavigation
. - Compass - Starts the location display with
LocationDisplayAutoPanMode
set toCompassNavigation
.
How it works
- Add the composable
MapView
to your UI. - Get a
LocationDisplay
object by callingrememberLocationDisplay()
and set it to the composableMapView
. - Use
start()
andstop()
on theLocationDisplay.dataSource
as necessary.
Relevant API
- ArcGISMap
- LocationDisplay
- LocationDisplay.AutoPanMode
- MapView
Additional information
Location permissions are required for this sample.
This sample demonstrates the following AutoPanMode
options:
-
Recenter: In this mode, the MapView attempts to keep the location symbol on-screen by re-centering the location symbol when the symbol moves outside a "wander extent". The location symbol may move freely within the wander extent, but as soon as the symbol exits the wander extent, the MapView re-centers the map on the symbol.
-
Navigation: This mode is best suited for in-vehicle navigation.
-
CompassNavigation: This mode is better suited for waypoint navigation when the user is walking.
This sample uses the GeoView-Compose Toolkit module to be able to implement a composable MapView.
Tags
compass, geoview-compose, GPS, location, map, mobile, navigation, toolkit
Sample Code
/* Copyright 2025 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.
*
*/
package com.esri.arcgismaps.sample.showdevicelocation.components
import android.app.Application
import androidx.compose.runtime.Stable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.AndroidViewModel
import androidx.lifecycle.viewModelScope
import com.arcgismaps.location.LocationDisplayAutoPanMode
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.view.LocationDisplay
import com.esri.arcgismaps.sample.sampleslib.components.MessageDialogViewModel
import com.esri.arcgismaps.sample.showdevicelocation.R
import kotlinx.coroutines.launch
class ShowDeviceLocationViewModel(app: Application) : AndroidViewModel(app) {
val arcGISMap = ArcGISMap(BasemapStyle.ArcGISNavigationNight)
// Create a message dialog view model for handling error messages
val messageDialogVM = MessageDialogViewModel()
init {
viewModelScope.launch {
arcGISMap.load().onFailure { messageDialogVM.showMessageDialog(it) }
}
}
// available options in dropdown menu
val dropDownMenuOptions = arrayListOf(
ItemData("Re-center", R.drawable.locationdisplayrecenter),
ItemData("Navigation", R.drawable.locationdisplaynavigation),
ItemData("Compass", R.drawable.locationdisplayheading)
)
// This variable holds the currently selected item from the dropdown menu
var selectedItem by mutableStateOf(dropDownMenuOptions[0])
private set
// This function handles the selection of an item from the dropdown menu
fun onItemSelected(item: ItemData, locationDisplay: LocationDisplay){
selectedItem = item
when (item.text) {
"Re-center" -> {
// re-center MapView on location
locationDisplay.setAutoPanMode(LocationDisplayAutoPanMode.Recenter)
}
"Navigation" -> {
// start navigation mode
locationDisplay.setAutoPanMode(LocationDisplayAutoPanMode.Navigation)
}
"Compass" -> {
// start compass navigation mode
locationDisplay.setAutoPanMode(LocationDisplayAutoPanMode.CompassNavigation)
}
}
}
// variable to track if location tracking is enabled
var isLocationTrackingEnabled by mutableStateOf(true)
private set
// function to toggle location tracking based on the switch state
fun toggleLocationTracking(newValue: Boolean, locationDisplay: LocationDisplay){
isLocationTrackingEnabled = newValue
if(isLocationTrackingEnabled) {
viewModelScope.launch {
locationDisplay.dataSource.start()
}
} else {
viewModelScope.launch {
locationDisplay.dataSource.stop()
}
}
}
}
/** Represents an option from dropdown menu */
@Stable
data class ItemData(val text: String, val imageId: Int)