Search for an address | ArcGIS Maps SDK for Kotlin

Learn how to find an address or place with a search bar and the geocoding service A geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise. Learn more .

Geocoding is the process of converting address or place A place, also known as a point of interest (POI), is a location that represents a business, administrative entity, or geographic feature around the world. A place can also have attributes associated with it, such as a name, address, category, and ID. Learn more text into a location A location is a position or region (point, line, or polygon) on the earth's surface. Learn more . The geocoding service A geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise. Learn more can search for an address or a place and perform reverse geocoding Reverse geocoding is the process of converting a point to its nearest address or place. Learn more .

In this tutorial, you use a search bar in the user interface to access the Geocoding service and search for addresses and places.

Prerequisites

Before starting this tutorial, you need the following:

An ArcGIS Location Platform or ArcGIS Online account.
A development and deployment environment that meets the system requirements.
An IDE for Android development in Kotlin.

Set up authentication

To access the secure ArcGIS location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more used in this tutorial, you must implement API key authentication API key authentication is a type of authentication that uses an API key to authenticate requests to ArcGIS services and secure portal items. Learn more or user authentication User authentication is a type of authentication that allows users with an ArcGIS account to sign into an application and allow it to access ArcGIS content, services, and resources on their behalf. The typical authorization protocol used is OAuth2.0. Learn more using an ArcGIS Location Platform An ArcGIS Location Platform account, formerly known as an ArcGIS Developer account, is an identity associated with an ArcGIS Location Platform subscription. Learn more or an ArcGIS Online An ArcGIS Online account, also known as an ArcGIS Organization account, is an identity associated with an ArcGIS Online subscription. It can be used to access ArcGIS tools and develop applications with ArcGIS location services for an organization. Learn more account.

You can implement API key authentication or user authentication in this tutorial. Compare the differences below:

API key authentication API key authentication is a type of authentication that uses an API key to authenticate requests to ArcGIS services and secure portal items. Learn more

Users are not required to sign in.
Requires creating an API key credential API key credentials are an item that contains the parameters used to create and manage long-lived access tokens for API key authentication. They are a type of developer credential. Learn more with the correct privileges.
API keys An API key is a long-lived access token created using API key credentials. They are valid for up to one year and are typically embedded directly into client applications. Learn more are long-lived access tokens.
Service usage is billed to the API key owner/developer.
Simplest authentication method to implement.
Recommended approach for new ArcGIS developers.

Learn more in API key authentication.

User authentication User authentication is a type of authentication that allows users with an ArcGIS account to sign into an application and allow it to access ArcGIS content, services, and resources on their behalf. The typical authorization protocol used is OAuth2.0. Learn more

Users are required to sign in with an ArcGIS account An ArcGIS account is an identity with a user type and set of privileges that can access specific ArcGIS products, tools, APIs, services, and resources. The main account types that can be used for development are an ArcGIS Location Platform account, ArcGIS Online account, and ArcGIS Enterprise account. ArcGIS Location Platform and ArcGIS Online accounts are also associated with a subscription. Learn more .
User accounts must have privilege Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more to access the ArcGIS services A service, also known as an ArcGIS service, is software that supports an ArcGIS REST API and provides geospatial functionality or data. A service can be hosted by Esri or in ArcGIS Enterprise. Learn more used in application.
Requires creating OAuth credentials OAuth credentials are an item that contains parameters required to implement user authentication or app authentication, including a client_id, client_secret, and redirect URIs. They are a type of developer credential. Learn more .
Application uses a redirect URL and client ID.
Service usage is billed to the organization of the user signed into the application.

Learn more in User authentication.

To complete this tutorial, click on the tab in the switcher below for your authentication type of choice, either API key authentication or User authentication.

Create a new API key access token An access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication. Learn more with privileges Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more to access the secure resources used in this tutorial.

Complete the Create an API key tutorial and create an API key with the following privilege(s) Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more :
- Privileges
  - Location services > Basemaps
  - Location services > Geocoding
Copy and paste the API key access token into a safe location. It will be used in a later step.

Create new OAuth credentials to access the secure resources used in this tutorial.

Complete the Create OAuth credentials for user authentication tutorial to obtain a Client ID and Redirect URL.

A Client ID uniquely identifies your app on the authenticating server. If the server cannot find an app with the provided Client ID, it will not proceed with authentication.
The Redirect URL (also referred to as a callback url) is used to identify a response from the authenticating server when the system returns control back to your app after an OAuth login. Since it does not necessarily represent a valid endpoint that a user could navigate to, the redirect URL can use a custom scheme, such as my-app://auth. It is important to make sure the redirect URL used in your app’s code matches a redirect URL configured on the authenticating server.
Copy and paste the Client ID and Redirect URL into a safe location. They will be used in a later step.

All users that access this application need account privileges Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more to access the ArcGIS Basemap Styles service The ArcGIS Basemap Styles service, also referred to as the Basemap Styles service, is a location service that provides basemap styles and data for the world. It returns styles as Mapbox styles and web maps, and data as vector tiles and/or map tiles. It supports all of the styles in the ArcGIS Basemap style and Open Basemap style family. An ArcGIS Location Platform or ArcGIS Online account is required to use the service. Learn more and the ArcGIS Geocoding service A geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise. Learn more .

Develop or download

You have two options for completing this tutorial:

Option 1: Develop the code or
Option 2: Download the completed solution

Option 1: Develop the code

Open an Android Studio project

Open the project you created by completing the Display a map tutorial.
Continue with the following instructions to add a search bar to the user interface and search for an address or place using the ArcGIS Geocoding service A geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise. Learn more .

Modify the old project for use in this new tutorial.

On your file system, delete the .idea folder, if present, at the top level of your project.
In the Android view, open app > res > values > strings.xml.

In the <string name="app_name"> element, change the text content to Search for an address.
strings.xml
<resources> <string name="app_name">Search for an address</string> </resources>

In the Android view, open Gradle Scripts > settings.gradle.kts.

Change the value of rootProject.name to “Search for an address”.

settings.gradle.kts

14 collapsed lines
pluginManagement {
    repositories {
        google {
            content {
                includeGroupByRegex("com\\.android.*")
                includeGroupByRegex("com\\.google.*")
                includeGroupByRegex("androidx.*")
            }
        }
        mavenCentral()
        gradlePluginPortal()
    }
}

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://esri.jfrog.io/artifactory/arcgis") }
    }
}

rootProject.name = "Search for an address"
include(":app")

Click File > Sync Project with Gradle files. Android Studio will recognize your changes and create a new .idea folder.

Set developer credentials

If you implemented API key authentication API key authentication is a type of authentication that uses an API key to authenticate requests to ArcGIS services and secure portal items. Learn more in the Display a map tutorial, the API key access token will only have the Basemaps privilege. The Search for an address tutorial requires the Geocoding privilege to search for an address using the LocatorTask. To create an API Key access token that has the Basemaps and Geocoding privileges, see the Set up authentication step and then follow the instructions below.

In the Android view of Android Studio, open app > kotlin+java > com.example.app > MainActivity.
In the onCreate() lifecycle method of the MainActivity class, set the ArcGISEnvironment.apiKey property by calling ApiKey.create(). Pass in your API key access token as a string and don’t forget the double quotes. Do this before the setContent block.
MainActivity.kt
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) ArcGISEnvironment.apiKey = ApiKey.create("YOUR_ACCESS_TOKEN")

Best Practice: The access token is stored directly in the code as a convenience for this tutorial. Do not store credentials directly in source code in a production environment.

Use the Authenticator toolkit component to manage your OAuth credentials OAuth credentials are an item that contains parameters required to implement user authentication or app authentication, including a client_id, client_secret, and redirect URIs. They are a type of developer credential. Learn more and pass it to the ArcGISEnvironment.

Open the app > kotlin+java > com.example.app > MainActivity.kt file.

Set your clientID and redirectURL values.

MainActivity.kt

        authenticatorState.oAuthUserConfigurations = listOf(
            OAuthUserConfiguration(

                portalUrl = "https://www.arcgis.com",
                clientId = "YOUR_CLIENT_ID",
                redirectUrl = "YOUR_REDIRECT_URL"

            )
        )

Best Practice: The OAuth credentials are stored directly in the code as a convenience for this tutorial. Do not store credentials directly in source code in a production environment.

Add import statements and some Compose variables

Modify import statements to reference the packages and classes required for this tutorial.

Theme.kt

@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job

In the MainScreen composable, create Compose variables that will be passed to various functions in the MainScreen.kt file.
These are remembered state variables and use either remember() or rememberCoroutineScope()
Briefly, these variables are as follows:

context: The local context of your app.

coroutineScope: Set to rememberCoroutineScope(). You will use this variable to launch a coroutine.

focusManager: A FocusManager will allow you to clear focus from the search bar, dismissing the device keyboard after a search is submitted.

queryText: The address that the user enters in the search bar.

currentJob: The currentJob variable is of type MutableState<Job?>, which references the Kotlin coroutine Job. (It does not reference the interface Job from ArcGIS Maps SDK for Kotlin.) Note that coroutineScope.launch {} returns a Kotlin coroutine Job.

graphicsOverlay: A GraphicsOverlay to hold the text symbol (the search address) and a red square symbol (the found location on the map).

graphicsOverlay: A list of GraphicsOverlay. You pass this list to the MapView.

mapViewProxy: A MapViewProxy, defined in ArcGIS Maps SDK for Kotlin Toolkit, allows you to set the view point on the map view.

currentSpatialReference: The current SpatialReference.
Theme.kt
@Composable fun MainScreen() { val context = LocalContext.current val coroutineScope = rememberCoroutineScope() // The focus manager is used to dismiss keyboard after search query submission. val focusManager = LocalFocusManager.current var queryText by remember { mutableStateOf("") } val currentJob = remember { mutableStateOf<Job?>(null) } val graphicsOverlay = remember { GraphicsOverlay() } val graphicsOverlays = remember { listOf(graphicsOverlay) } val mapViewProxy = remember { MapViewProxy() } val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) } val map = remember { createMap() } Scaffold( topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) } ) { MapView( modifier = Modifier.fillMaxSize(), arcGISMap = map, ) } }

Create a function to geocode an address

Geocoding is implemented with a locator A locator is an ArcGIS dataset that stores address information and the rules for translating descriptions of places (such as street addresses or place names) into spatial data that can be displayed on a map. Learn more , typically created by referencing a service such as the geocoding service A geocoding service is a service that can search for addresses, place addresses, businesses, reverse geocode coordinates to addresses, provide suggestions for places, and perform bulk geocoding. It is hosted by Esri as the ArcGIS Geocoding service and can also be hosted in ArcGIS Enterprise. Learn more or, for offline Offline is the state of having no network connection and applications cannot access ArcGIS Online or ArcGIS Enterprise. Learn more geocoding, by referencing locator data contained in a mobile package A mobile package is a stand-alone Mobile Map Package (MMPK) or Mobile Scene Package (MSPK) file for use in offline applications built with ArcGIS Maps SDKs for Native Apps. Learn more . Geocoding parameters can be used to refine the results, such as setting a maximum number of results or requesting additional attributes in the results.

Define a top-level suspend function named searchAddress(). Declare the parameters shown below.

MainScreen.kt

93 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

            MapView(
                modifier = Modifier.fillMaxSize(),
                arcGISMap = map,

            )

    }

}

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

}
4 collapsed lines

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

Create a LocatorTask based on the Geocoding service.

A locator task is used to find the location of an address (geocode) or to interpolate an address for a location (reverse geocode). An address includes any type of information that distinguishes a place. A locator A locator is an ArcGIS dataset that stores address information and the rules for translating descriptions of places (such as street addresses or place names) into spatial data that can be displayed on a map. Learn more involves finding matching locations for a given address. Reverse-geocoding is the opposite and finds the closest address for a given location.

MainScreen.kt

93 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

            MapView(
                modifier = Modifier.fillMaxSize(),
                arcGISMap = map,

            )

    }

}

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

}
4 collapsed lines

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

Create a new GeocodeParameters and define some of its properties.

Add the names of attributes to return to the GeocodeParameters.resultAttributeNames collection. An asterisk (*) indicates all attributes.
Set the maximum number of results to be returned with GeocodeParameters.maxResults. Results are ordered by score, so that the first result has the best match score (ranging from 0 for no match to 100 for the best match).
Set the spatial reference A spatial reference is a set of parameters, typically defined by a WKID, that define the coordinate system and spatial properties for geographic data. Applications use a spatial reference to correctly display the position of geographic data in a map or scene. Learn more for result locations with GeocodeParameters.outputSpatialReference. By default, the output spatial reference is defined by the geocode service. For optimal performance when displaying the geocode result, you can ensure that returned coordinates match those of the map view by providing the map view’s spatial reference.

When geocoding an address, you can optionally provide GeocodeParameters to control certain aspects of the geocoding operation and specify the kinds of results to return from the locator task. Learn more about these parameters in the GeocodeParameters. For a list of attributes returned with geocode results, see Geocoding service output in the ArcGIS services reference.

MainScreen.kt

93 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

            MapView(
                modifier = Modifier.fillMaxSize(),
                arcGISMap = map,

            )

    }

}

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

    // Create geocode parameters
    val geocodeParameters = GeocodeParameters().apply {
        resultAttributeNames.add("*")
        maxResults = 1
        outputSpatialReference = currentSpatialReference
    }

}
4 collapsed lines

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

To find the location for the address that the user entered, call LocatorTask.geocode(), passing the query and geocodeParameters variables.

In the .onSuccess block, call the handleGeocodeResults() function (which we will define in a later section). Pass parameters to handleGeocodeResults() as shown below.

The geocode results are implemented as a list of GeocodeResult objects. In this tutorial, either one or zero results will be returned, as the maximum results parameter was set to 1.

MainScreen.kt

93 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

            MapView(
                modifier = Modifier.fillMaxSize(),
                arcGISMap = map,

            )

    }

}

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

    // Create geocode parameters
    val geocodeParameters = GeocodeParameters().apply {
        resultAttributeNames.add("*")
        maxResults = 1
        outputSpatialReference = currentSpatialReference
    }

    // Search for the address
    locatorTask.geocode(searchText = query, parameters = geocodeParameters)
        .onSuccess { geocodeResults: List<GeocodeResult> ->
            handleGeocodeResults(
                context, coroutineScope, geocodeResults, graphicsOverlay, mapViewProxy
            )
        }.onFailure { error ->
            showMessage(context, "The locatorTask.geocode() call failed: ${error.message}")
        }

}
4 collapsed lines

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

Create two graphics

You will create a graphic that uses a text symbol to display the address as a string. You will create another graphic that uses a red square to indicate the location on the map.

Define a top-level function named createTextGraphic() and declare a GeocodeResult parameter. For the text of the TextSymbol, use the GeocodeResult.label property. For the geometry of the Graphic, use the GeocodeResult.displayLocation property.

MainScreen.kt

124 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

            MapView(
                modifier = Modifier.fillMaxSize(),
                arcGISMap = map,

            )

    }

}

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

    // Create geocode parameters
    val geocodeParameters = GeocodeParameters().apply {
        resultAttributeNames.add("*")
        maxResults = 1
        outputSpatialReference = currentSpatialReference
    }

    // Search for the address
    locatorTask.geocode(searchText = query, parameters = geocodeParameters)
        .onSuccess { geocodeResults: List<GeocodeResult> ->
            handleGeocodeResults(
                context, coroutineScope, geocodeResults, graphicsOverlay, mapViewProxy
            )
        }.onFailure { error ->
            showMessage(context, "The locatorTask.geocode() call failed: ${error.message}")
        }

}

fun createTextGraphic(geocodeResult: GeocodeResult): Graphic {
    val textSymbol = TextSymbol(
        text = geocodeResult.label,
        color = Color.black,
        size = 18f,
        horizontalAlignment = HorizontalAlignment.Center,
        verticalAlignment = VerticalAlignment.Bottom
    ).apply {
        offsetY = 8f
        haloColor = Color.white
        haloWidth = 2f
    }
    return Graphic(
        geometry = geocodeResult.displayLocation,
        symbol = textSymbol
    )
}
4 collapsed lines

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

Define a top-level function named createMarkerGraphic() and declare a GeocodeResult parameter. For the geometry of the Graphic, use the GeocodeResult.label property. For the attributes of the Graphic, use the GeocodeResult.attributes property.

MainScreen.kt

142 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

            MapView(
                modifier = Modifier.fillMaxSize(),
                arcGISMap = map,

            )

    }

}

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

    // Create geocode parameters
    val geocodeParameters = GeocodeParameters().apply {
        resultAttributeNames.add("*")
        maxResults = 1
        outputSpatialReference = currentSpatialReference
    }

    // Search for the address
    locatorTask.geocode(searchText = query, parameters = geocodeParameters)
        .onSuccess { geocodeResults: List<GeocodeResult> ->
            handleGeocodeResults(
                context, coroutineScope, geocodeResults, graphicsOverlay, mapViewProxy
            )
        }.onFailure { error ->
            showMessage(context, "The locatorTask.geocode() call failed: ${error.message}")
        }

}

fun createTextGraphic(geocodeResult: GeocodeResult): Graphic {
    val textSymbol = TextSymbol(
        text = geocodeResult.label,
        color = Color.black,
        size = 18f,
        horizontalAlignment = HorizontalAlignment.Center,
        verticalAlignment = VerticalAlignment.Bottom
    ).apply {
        offsetY = 8f
        haloColor = Color.white
        haloWidth = 2f
    }
    return Graphic(
        geometry = geocodeResult.displayLocation,
        symbol = textSymbol
    )
}

fun createMarkerGraphic(geocodeResult: GeocodeResult): Graphic {
    val simpleMarkerSymbol = SimpleMarkerSymbol(
        style = SimpleMarkerSymbolStyle.Square,
        color = Color.red,
        size = 12.0f
    )
    return Graphic(
        geometry = geocodeResult.displayLocation,
        attributes = geocodeResult.attributes,
        symbol = simpleMarkerSymbol
    )
}
4 collapsed lines

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

Display the result

The result obtained from the geocode operation can be displayed by adding the two graphics A graphic is a visual element composed of a geometry, symbol, and attributes that is displayed on a map or scene. Learn more you just created to the map view’s graphics overlay A graphics overlay is a client-side, temporary container of graphics to display on a map view or scene view. Learn more .

Define a suspend function named handleGeocodeResults(). Declare the parameters shown below.

MainScreen.kt

124 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

            MapView(
                modifier = Modifier.fillMaxSize(),
                arcGISMap = map,

            )

    }

}

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

    // Create geocode parameters
    val geocodeParameters = GeocodeParameters().apply {
        resultAttributeNames.add("*")
        maxResults = 1
        outputSpatialReference = currentSpatialReference
    }

    // Search for the address
    locatorTask.geocode(searchText = query, parameters = geocodeParameters)
        .onSuccess { geocodeResults: List<GeocodeResult> ->
            handleGeocodeResults(
                context, coroutineScope, geocodeResults, graphicsOverlay, mapViewProxy
            )
        }.onFailure { error ->
            showMessage(context, "The locatorTask.geocode() call failed: ${error.message}")
        }

}

fun handleGeocodeResults(
    context: Context,
    coroutineScope: CoroutineScope,
    geocodeResults: List<GeocodeResult>,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

}
35 collapsed lines

fun createTextGraphic(geocodeResult: GeocodeResult): Graphic {
    val textSymbol = TextSymbol(
        text = geocodeResult.label,
        color = Color.black,
        size = 18f,
        horizontalAlignment = HorizontalAlignment.Center,
        verticalAlignment = VerticalAlignment.Bottom
    ).apply {
        offsetY = 8f
        haloColor = Color.white
        haloWidth = 2f
    }
    return Graphic(
        geometry = geocodeResult.displayLocation,
        symbol = textSymbol
    )
}

fun createMarkerGraphic(geocodeResult: GeocodeResult): Graphic {
    val simpleMarkerSymbol = SimpleMarkerSymbol(
        style = SimpleMarkerSymbolStyle.Square,
        color = Color.red,
        size = 12.0f
    )
    return Graphic(
        geometry = geocodeResult.displayLocation,
        attributes = geocodeResult.attributes,
        symbol = simpleMarkerSymbol
    )
}

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

If the geocodeResults list is not empty, do the following: First, get the first GeocodeResult from the geocodeResults list. Next, call createTextGraphic() and createMarkerGraphic(), passing that geocode result to each. Last, add the two graphics to the GraphicsOverlay.

MainScreen.kt

124 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

            MapView(
                modifier = Modifier.fillMaxSize(),
                arcGISMap = map,

            )

    }

}

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

    // Create geocode parameters
    val geocodeParameters = GeocodeParameters().apply {
        resultAttributeNames.add("*")
        maxResults = 1
        outputSpatialReference = currentSpatialReference
    }

    // Search for the address
    locatorTask.geocode(searchText = query, parameters = geocodeParameters)
        .onSuccess { geocodeResults: List<GeocodeResult> ->
            handleGeocodeResults(
                context, coroutineScope, geocodeResults, graphicsOverlay, mapViewProxy
            )
        }.onFailure { error ->
            showMessage(context, "The locatorTask.geocode() call failed: ${error.message}")
        }

}

fun handleGeocodeResults(
    context: Context,
    coroutineScope: CoroutineScope,
    geocodeResults: List<GeocodeResult>,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    if (geocodeResults.isNotEmpty()) {
        val geocodeResult = geocodeResults[0]
        // Create a Text graphic to display the address text, and add it to the graphics overlay.
        val textGraphic = createTextGraphic(geocodeResult)
        // Create a red square marker graphic, and add it to the graphics overlay.
        val markerGraphic = createMarkerGraphic(geocodeResult)
        // Clear previous results and add graphics.
        graphicsOverlay.graphics.apply {
            clear()
            add(textGraphic)
            add(markerGraphic)
        }

}
35 collapsed lines

fun createTextGraphic(geocodeResult: GeocodeResult): Graphic {
    val textSymbol = TextSymbol(
        text = geocodeResult.label,
        color = Color.black,
        size = 18f,
        horizontalAlignment = HorizontalAlignment.Center,
        verticalAlignment = VerticalAlignment.Bottom
    ).apply {
        offsetY = 8f
        haloColor = Color.white
        haloWidth = 2f
    }
    return Graphic(
        geometry = geocodeResult.displayLocation,
        symbol = textSymbol
    )
}

fun createMarkerGraphic(geocodeResult: GeocodeResult): Graphic {
    val simpleMarkerSymbol = SimpleMarkerSymbol(
        style = SimpleMarkerSymbolStyle.Square,
        color = Color.red,
        size = 12.0f
    )
    return Graphic(
        geometry = geocodeResult.displayLocation,
        attributes = geocodeResult.attributes,
        symbol = simpleMarkerSymbol
    )
}

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

Inside a coroutineScope.launch block, get the display location (which is a Point) from the geocode result and assign it to a variable named centerPoint. Then call MapViewProxy.setViewpointCenter(), which is defined in the ArcGIS Maps SDK for Kotlin Toolkit, and pass centerPoint.

Last, add code to handle the case where the geocodeResults list is empty.

MainScreen.kt

124 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

            MapView(
                modifier = Modifier.fillMaxSize(),
                arcGISMap = map,

            )

    }

}

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

    // Create geocode parameters
    val geocodeParameters = GeocodeParameters().apply {
        resultAttributeNames.add("*")
        maxResults = 1
        outputSpatialReference = currentSpatialReference
    }

    // Search for the address
    locatorTask.geocode(searchText = query, parameters = geocodeParameters)
        .onSuccess { geocodeResults: List<GeocodeResult> ->
            handleGeocodeResults(
                context, coroutineScope, geocodeResults, graphicsOverlay, mapViewProxy
            )
        }.onFailure { error ->
            showMessage(context, "The locatorTask.geocode() call failed: ${error.message}")
        }

}

fun handleGeocodeResults(
    context: Context,
    coroutineScope: CoroutineScope,
    geocodeResults: List<GeocodeResult>,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    if (geocodeResults.isNotEmpty()) {
        val geocodeResult = geocodeResults[0]
        // Create a Text graphic to display the address text, and add it to the graphics overlay.
        val textGraphic = createTextGraphic(geocodeResult)
        // Create a red square marker graphic, and add it to the graphics overlay.
        val markerGraphic = createMarkerGraphic(geocodeResult)
        // Clear previous results and add graphics.
        graphicsOverlay.graphics.apply {
            clear()
            add(textGraphic)
            add(markerGraphic)
        }

        coroutineScope.launch {
            val centerPoint = geocodeResult.displayLocation
                ?: return@launch showMessage(context, "The locatorTask.geocode() call failed")

            // Animate the map view to the center point.
            mapViewProxy.setViewpointCenter(centerPoint)
                .onFailure { error ->
                    showMessage(context, "Failed to set Viewpoint center: ${error.message}")
                }

        }

    } else {
        showMessage(context, "No address found for the given query")
    }

}
35 collapsed lines

fun createTextGraphic(geocodeResult: GeocodeResult): Graphic {
    val textSymbol = TextSymbol(
        text = geocodeResult.label,
        color = Color.black,
        size = 18f,
        horizontalAlignment = HorizontalAlignment.Center,
        verticalAlignment = VerticalAlignment.Bottom
    ).apply {
        offsetY = 8f
        haloColor = Color.white
        haloWidth = 2f
    }
    return Graphic(
        geometry = geocodeResult.displayLocation,
        symbol = textSymbol
    )
}

fun createMarkerGraphic(geocodeResult: GeocodeResult): Graphic {
    val simpleMarkerSymbol = SimpleMarkerSymbol(
        style = SimpleMarkerSymbolStyle.Square,
        color = Color.red,
        size = 12.0f
    )
    return Graphic(
        geometry = geocodeResult.displayLocation,
        attributes = geocodeResult.attributes,
        symbol = simpleMarkerSymbol
    )
}

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

Add a search bar and pass parameters to `MapView`

To search an address using the application, add a search bar that will accept an address as text input.

Next, modify the Scaffold so it contains a Column. Inside the Column, you will add a SearchBar, followed by MapView.

Inside the Scaffold block, find the MapView from the Display a map tutorial and replace it with a call of Column. A Column allows you to display the search bar at the top of the screen and the map view directly below.

MainScreen.kt

51 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(it)
        ) {

        }

    }

}
115 collapsed lines

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

    // Create geocode parameters
    val geocodeParameters = GeocodeParameters().apply {
        resultAttributeNames.add("*")
        maxResults = 1
        outputSpatialReference = currentSpatialReference
    }

    // Search for the address
    locatorTask.geocode(searchText = query, parameters = geocodeParameters)
        .onSuccess { geocodeResults: List<GeocodeResult> ->
            handleGeocodeResults(
                context, coroutineScope, geocodeResults, graphicsOverlay, mapViewProxy
            )
        }.onFailure { error ->
            showMessage(context, "The locatorTask.geocode() call failed: ${error.message}")
        }

}

fun handleGeocodeResults(
    context: Context,
    coroutineScope: CoroutineScope,
    geocodeResults: List<GeocodeResult>,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    if (geocodeResults.isNotEmpty()) {
        val geocodeResult = geocodeResults[0]
        // Create a Text graphic to display the address text, and add it to the graphics overlay.
        val textGraphic = createTextGraphic(geocodeResult)
        // Create a red square marker graphic, and add it to the graphics overlay.
        val markerGraphic = createMarkerGraphic(geocodeResult)
        // Clear previous results and add graphics.
        graphicsOverlay.graphics.apply {
            clear()
            add(textGraphic)
            add(markerGraphic)
        }

        coroutineScope.launch {
            val centerPoint = geocodeResult.displayLocation
                ?: return@launch showMessage(context, "The locatorTask.geocode() call failed")

            // Animate the map view to the center point.
            mapViewProxy.setViewpointCenter(centerPoint)
                .onFailure { error ->
                    showMessage(context, "Failed to set Viewpoint center: ${error.message}")
                }

        }

    } else {
        showMessage(context, "No address found for the given query")
    }

}

fun createTextGraphic(geocodeResult: GeocodeResult): Graphic {
    val textSymbol = TextSymbol(
        text = geocodeResult.label,
        color = Color.black,
        size = 18f,
        horizontalAlignment = HorizontalAlignment.Center,
        verticalAlignment = VerticalAlignment.Bottom
    ).apply {
        offsetY = 8f
        haloColor = Color.white
        haloWidth = 2f
    }
    return Graphic(
        geometry = geocodeResult.displayLocation,
        symbol = textSymbol
    )
}

fun createMarkerGraphic(geocodeResult: GeocodeResult): Graphic {
    val simpleMarkerSymbol = SimpleMarkerSymbol(
        style = SimpleMarkerSymbolStyle.Square,
        color = Color.red,
        size = 12.0f
    )
    return Graphic(
        geometry = geocodeResult.displayLocation,
        attributes = geocodeResult.attributes,
        symbol = simpleMarkerSymbol
    )
}

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

Call the SearchBar composable, passing the parameters shown below.

Pass a lambda for the onSearch parameter. When the onSearch callback is invoked, the lambda should clear the focus from the search bar (thus dismissing the device keyboard), then cancel any previous search job, and start a new search job by calling searchAddress(). Note that the onSearch lambda provides a parameter with the value of the current input query, which you must pass to searchAddress().

MainScreen.kt

51 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(it)
        ) {

            SearchBar(
                inputField = {
                    SearchBarDefaults.InputField(
                        query = queryText,
                        onQueryChange = { query ->
                            queryText = query
                        },
                        onSearch = { currentQuery ->
                            focusManager.clearFocus()
                            // Cancel any previous search job.
                            currentJob.value?.cancel()
                            // Start a new search job.
                            currentJob.value = coroutineScope.launch {
                                searchAddress(
                                    context,
                                    coroutineScope,
                                    currentQuery,
                                    currentSpatialReference.value,
                                    graphicsOverlay,
                                    mapViewProxy
                                )
                            }
                        },
                        expanded = false,
                        onExpandedChange = { },
                        enabled = true,
                        placeholder = { Text("Search for an address") },
                        leadingIcon = { Icon(Icons.Filled.Search, contentDescription = "Search") })
                },
                expanded = false,
                onExpandedChange = {},
                modifier = Modifier.fillMaxWidth(),
            ) {}

        }

    }

}
115 collapsed lines

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

    // Create geocode parameters
    val geocodeParameters = GeocodeParameters().apply {
        resultAttributeNames.add("*")
        maxResults = 1
        outputSpatialReference = currentSpatialReference
    }

    // Search for the address
    locatorTask.geocode(searchText = query, parameters = geocodeParameters)
        .onSuccess { geocodeResults: List<GeocodeResult> ->
            handleGeocodeResults(
                context, coroutineScope, geocodeResults, graphicsOverlay, mapViewProxy
            )
        }.onFailure { error ->
            showMessage(context, "The locatorTask.geocode() call failed: ${error.message}")
        }

}

fun handleGeocodeResults(
    context: Context,
    coroutineScope: CoroutineScope,
    geocodeResults: List<GeocodeResult>,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    if (geocodeResults.isNotEmpty()) {
        val geocodeResult = geocodeResults[0]
        // Create a Text graphic to display the address text, and add it to the graphics overlay.
        val textGraphic = createTextGraphic(geocodeResult)
        // Create a red square marker graphic, and add it to the graphics overlay.
        val markerGraphic = createMarkerGraphic(geocodeResult)
        // Clear previous results and add graphics.
        graphicsOverlay.graphics.apply {
            clear()
            add(textGraphic)
            add(markerGraphic)
        }

        coroutineScope.launch {
            val centerPoint = geocodeResult.displayLocation
                ?: return@launch showMessage(context, "The locatorTask.geocode() call failed")

            // Animate the map view to the center point.
            mapViewProxy.setViewpointCenter(centerPoint)
                .onFailure { error ->
                    showMessage(context, "Failed to set Viewpoint center: ${error.message}")
                }

        }

    } else {
        showMessage(context, "No address found for the given query")
    }

}

fun createTextGraphic(geocodeResult: GeocodeResult): Graphic {
    val textSymbol = TextSymbol(
        text = geocodeResult.label,
        color = Color.black,
        size = 18f,
        horizontalAlignment = HorizontalAlignment.Center,
        verticalAlignment = VerticalAlignment.Bottom
    ).apply {
        offsetY = 8f
        haloColor = Color.white
        haloWidth = 2f
    }
    return Graphic(
        geometry = geocodeResult.displayLocation,
        symbol = textSymbol
    )
}

fun createMarkerGraphic(geocodeResult: GeocodeResult): Graphic {
    val simpleMarkerSymbol = SimpleMarkerSymbol(
        style = SimpleMarkerSymbolStyle.Square,
        color = Color.red,
        size = 12.0f
    )
    return Graphic(
        geometry = geocodeResult.displayLocation,
        attributes = geocodeResult.attributes,
        symbol = simpleMarkerSymbol
    )
}

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

Add back the MapView, passing a Modifier and map.

MainScreen.kt

69 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(it)
        ) {

            SearchBar(
                inputField = {
                    SearchBarDefaults.InputField(
                        query = queryText,
                        onQueryChange = { query ->
                            queryText = query
                        },
                        onSearch = { currentQuery ->
                            focusManager.clearFocus()
                            // Cancel any previous search job.
                            currentJob.value?.cancel()
                            // Start a new search job.
                            currentJob.value = coroutineScope.launch {
                                searchAddress(
                                    context,
                                    coroutineScope,
                                    currentQuery,
                                    currentSpatialReference.value,
                                    graphicsOverlay,
                                    mapViewProxy
                                )
                            }
                        },
                        expanded = false,
                        onExpandedChange = { },
                        enabled = true,
                        placeholder = { Text("Search for an address") },
                        leadingIcon = { Icon(Icons.Filled.Search, contentDescription = "Search") })
                },
                expanded = false,
                onExpandedChange = {},
                modifier = Modifier.fillMaxWidth(),
            ) {}

            MapView(
                modifier = Modifier.fillMaxSize(),
                arcGISMap = map,

            )

        }

    }
117 collapsed lines

}

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

    // Create geocode parameters
    val geocodeParameters = GeocodeParameters().apply {
        resultAttributeNames.add("*")
        maxResults = 1
        outputSpatialReference = currentSpatialReference
    }

    // Search for the address
    locatorTask.geocode(searchText = query, parameters = geocodeParameters)
        .onSuccess { geocodeResults: List<GeocodeResult> ->
            handleGeocodeResults(
                context, coroutineScope, geocodeResults, graphicsOverlay, mapViewProxy
            )
        }.onFailure { error ->
            showMessage(context, "The locatorTask.geocode() call failed: ${error.message}")
        }

}

fun handleGeocodeResults(
    context: Context,
    coroutineScope: CoroutineScope,
    geocodeResults: List<GeocodeResult>,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    if (geocodeResults.isNotEmpty()) {
        val geocodeResult = geocodeResults[0]
        // Create a Text graphic to display the address text, and add it to the graphics overlay.
        val textGraphic = createTextGraphic(geocodeResult)
        // Create a red square marker graphic, and add it to the graphics overlay.
        val markerGraphic = createMarkerGraphic(geocodeResult)
        // Clear previous results and add graphics.
        graphicsOverlay.graphics.apply {
            clear()
            add(textGraphic)
            add(markerGraphic)
        }

        coroutineScope.launch {
            val centerPoint = geocodeResult.displayLocation
                ?: return@launch showMessage(context, "The locatorTask.geocode() call failed")

            // Animate the map view to the center point.
            mapViewProxy.setViewpointCenter(centerPoint)
                .onFailure { error ->
                    showMessage(context, "Failed to set Viewpoint center: ${error.message}")
                }

        }

    } else {
        showMessage(context, "No address found for the given query")
    }

}

fun createTextGraphic(geocodeResult: GeocodeResult): Graphic {
    val textSymbol = TextSymbol(
        text = geocodeResult.label,
        color = Color.black,
        size = 18f,
        horizontalAlignment = HorizontalAlignment.Center,
        verticalAlignment = VerticalAlignment.Bottom
    ).apply {
        offsetY = 8f
        haloColor = Color.white
        haloWidth = 2f
    }
    return Graphic(
        geometry = geocodeResult.displayLocation,
        symbol = textSymbol
    )
}

fun createMarkerGraphic(geocodeResult: GeocodeResult): Graphic {
    val simpleMarkerSymbol = SimpleMarkerSymbol(
        style = SimpleMarkerSymbolStyle.Square,
        color = Color.red,
        size = 12.0f
    )
    return Graphic(
        geometry = geocodeResult.displayLocation,
        attributes = geocodeResult.attributes,
        symbol = simpleMarkerSymbol
    )
}

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

Pass these additional parameters to MapView:

graphicsOverlays: Pass the graphicsOverlays variable, defined at the top of the MainScreen block.
mapViewProxy: Pass the mapViewProxy variable (of type MapViewProxy, defined at the top of the MainScreen block.
onSpatialReferenceChanged: Pass a lambda that retrieves a spatial reference and assigns it to the currentSpatialReference variable, defined at the top of the MainScreen block.

MainScreen.kt

113 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(it)
        ) {

            SearchBar(
                inputField = {
                    SearchBarDefaults.InputField(
                        query = queryText,
                        onQueryChange = { query ->
                            queryText = query
                        },
                        onSearch = { currentQuery ->
                            focusManager.clearFocus()
                            // Cancel any previous search job.
                            currentJob.value?.cancel()
                            // Start a new search job.
                            currentJob.value = coroutineScope.launch {
                                searchAddress(
                                    context,
                                    coroutineScope,
                                    currentQuery,
                                    currentSpatialReference.value,
                                    graphicsOverlay,
                                    mapViewProxy
                                )
                            }
                        },
                        expanded = false,
                        onExpandedChange = { },
                        enabled = true,
                        placeholder = { Text("Search for an address") },
                        leadingIcon = { Icon(Icons.Filled.Search, contentDescription = "Search") })
                },
                expanded = false,
                onExpandedChange = {},
                modifier = Modifier.fillMaxWidth(),
            ) {}

            MapView(
                modifier = Modifier.fillMaxSize(),
                arcGISMap = map,

                graphicsOverlays = graphicsOverlays,
                mapViewProxy = mapViewProxy,
                onSpatialReferenceChanged = { spatialReference ->
                    currentSpatialReference.value = spatialReference
                }

            )
121 collapsed lines

        }

    }

}

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

    // Create geocode parameters
    val geocodeParameters = GeocodeParameters().apply {
        resultAttributeNames.add("*")
        maxResults = 1
        outputSpatialReference = currentSpatialReference
    }

    // Search for the address
    locatorTask.geocode(searchText = query, parameters = geocodeParameters)
        .onSuccess { geocodeResults: List<GeocodeResult> ->
            handleGeocodeResults(
                context, coroutineScope, geocodeResults, graphicsOverlay, mapViewProxy
            )
        }.onFailure { error ->
            showMessage(context, "The locatorTask.geocode() call failed: ${error.message}")
        }

}

fun handleGeocodeResults(
    context: Context,
    coroutineScope: CoroutineScope,
    geocodeResults: List<GeocodeResult>,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    if (geocodeResults.isNotEmpty()) {
        val geocodeResult = geocodeResults[0]
        // Create a Text graphic to display the address text, and add it to the graphics overlay.
        val textGraphic = createTextGraphic(geocodeResult)
        // Create a red square marker graphic, and add it to the graphics overlay.
        val markerGraphic = createMarkerGraphic(geocodeResult)
        // Clear previous results and add graphics.
        graphicsOverlay.graphics.apply {
            clear()
            add(textGraphic)
            add(markerGraphic)
        }

        coroutineScope.launch {
            val centerPoint = geocodeResult.displayLocation
                ?: return@launch showMessage(context, "The locatorTask.geocode() call failed")

            // Animate the map view to the center point.
            mapViewProxy.setViewpointCenter(centerPoint)
                .onFailure { error ->
                    showMessage(context, "Failed to set Viewpoint center: ${error.message}")
                }

        }

    } else {
        showMessage(context, "No address found for the given query")
    }

}

fun createTextGraphic(geocodeResult: GeocodeResult): Graphic {
    val textSymbol = TextSymbol(
        text = geocodeResult.label,
        color = Color.black,
        size = 18f,
        horizontalAlignment = HorizontalAlignment.Center,
        verticalAlignment = VerticalAlignment.Bottom
    ).apply {
        offsetY = 8f
        haloColor = Color.white
        haloWidth = 2f
    }
    return Graphic(
        geometry = geocodeResult.displayLocation,
        symbol = textSymbol
    )
}

fun createMarkerGraphic(geocodeResult: GeocodeResult): Graphic {
    val simpleMarkerSymbol = SimpleMarkerSymbol(
        style = SimpleMarkerSymbolStyle.Square,
        color = Color.red,
        size = 12.0f
    )
    return Graphic(
        geometry = geocodeResult.displayLocation,
        attributes = geocodeResult.attributes,
        symbol = simpleMarkerSymbol
    )
}

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

(Optional) The code in this tutorial calls a function to display messages to the user. One possible implementation of showMessage() is the following.

MainScreen.kt

242 collapsed lines
@file:OptIn(ExperimentalMaterial3Api::class)

package com.example.app.screens

import android.content.Context
import android.widget.Toast
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.SearchBar
import androidx.compose.material3.SearchBarDefaults
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.res.stringResource
import com.arcgismaps.Color
import com.arcgismaps.geometry.SpatialReference
import com.arcgismaps.mapping.ArcGISMap
import com.arcgismaps.mapping.BasemapStyle
import com.arcgismaps.mapping.Viewpoint
import com.arcgismaps.mapping.symbology.HorizontalAlignment
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
import com.arcgismaps.mapping.symbology.TextSymbol
import com.arcgismaps.mapping.symbology.VerticalAlignment
import com.arcgismaps.mapping.view.Graphic
import com.arcgismaps.mapping.view.GraphicsOverlay
import com.arcgismaps.tasks.geocode.GeocodeParameters
import com.arcgismaps.tasks.geocode.GeocodeResult
import com.arcgismaps.tasks.geocode.LocatorTask
import com.arcgismaps.toolkit.geoviewcompose.MapView
import com.arcgismaps.toolkit.geoviewcompose.MapViewProxy
import com.example.app.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Job
import kotlinx.coroutines.launch

@Composable
fun MainScreen() {

    val context = LocalContext.current
    val coroutineScope = rememberCoroutineScope()
    // The focus manager is used to dismiss keyboard after search query submission.
    val focusManager = LocalFocusManager.current
    var queryText by remember { mutableStateOf("") }
    val currentJob = remember { mutableStateOf<Job?>(null) }
    val graphicsOverlay = remember { GraphicsOverlay() }
    val graphicsOverlays = remember { listOf(graphicsOverlay) }
    val mapViewProxy = remember { MapViewProxy() }
    val currentSpatialReference = remember { mutableStateOf<SpatialReference?>(null) }

    val map = remember {
        createMap()
    }

    Scaffold(
        topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
    ) {

        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(it)
        ) {

            SearchBar(
                inputField = {
                    SearchBarDefaults.InputField(
                        query = queryText,
                        onQueryChange = { query ->
                            queryText = query
                        },
                        onSearch = { currentQuery ->
                            focusManager.clearFocus()
                            // Cancel any previous search job.
                            currentJob.value?.cancel()
                            // Start a new search job.
                            currentJob.value = coroutineScope.launch {
                                searchAddress(
                                    context,
                                    coroutineScope,
                                    currentQuery,
                                    currentSpatialReference.value,
                                    graphicsOverlay,
                                    mapViewProxy
                                )
                            }
                        },
                        expanded = false,
                        onExpandedChange = { },
                        enabled = true,
                        placeholder = { Text("Search for an address") },
                        leadingIcon = { Icon(Icons.Filled.Search, contentDescription = "Search") })
                },
                expanded = false,
                onExpandedChange = {},
                modifier = Modifier.fillMaxWidth(),
            ) {}

            MapView(
                modifier = Modifier.fillMaxSize(),
                arcGISMap = map,

                graphicsOverlays = graphicsOverlays,
                mapViewProxy = mapViewProxy,
                onSpatialReferenceChanged = { spatialReference ->
                    currentSpatialReference.value = spatialReference
                }

            )

        }

    }

}

fun createMap(): ArcGISMap {
    return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
        initialViewpoint = Viewpoint(
            latitude = 34.0270,
            longitude = -118.8050,
            scale = 72000.0
        )
    }
}

suspend fun searchAddress(
    context: Context,
    coroutineScope: CoroutineScope,
    query: String,
    currentSpatialReference: SpatialReference?,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    val geocodeServerUri = "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
    val locatorTask = LocatorTask(geocodeServerUri)

    // Create geocode parameters
    val geocodeParameters = GeocodeParameters().apply {
        resultAttributeNames.add("*")
        maxResults = 1
        outputSpatialReference = currentSpatialReference
    }

    // Search for the address
    locatorTask.geocode(searchText = query, parameters = geocodeParameters)
        .onSuccess { geocodeResults: List<GeocodeResult> ->
            handleGeocodeResults(
                context, coroutineScope, geocodeResults, graphicsOverlay, mapViewProxy
            )
        }.onFailure { error ->
            showMessage(context, "The locatorTask.geocode() call failed: ${error.message}")
        }

}

fun handleGeocodeResults(
    context: Context,
    coroutineScope: CoroutineScope,
    geocodeResults: List<GeocodeResult>,
    graphicsOverlay: GraphicsOverlay,
    mapViewProxy: MapViewProxy
) {

    if (geocodeResults.isNotEmpty()) {
        val geocodeResult = geocodeResults[0]
        // Create a Text graphic to display the address text, and add it to the graphics overlay.
        val textGraphic = createTextGraphic(geocodeResult)
        // Create a red square marker graphic, and add it to the graphics overlay.
        val markerGraphic = createMarkerGraphic(geocodeResult)
        // Clear previous results and add graphics.
        graphicsOverlay.graphics.apply {
            clear()
            add(textGraphic)
            add(markerGraphic)
        }

        coroutineScope.launch {
            val centerPoint = geocodeResult.displayLocation
                ?: return@launch showMessage(context, "The locatorTask.geocode() call failed")

            // Animate the map view to the center point.
            mapViewProxy.setViewpointCenter(centerPoint)
                .onFailure { error ->
                    showMessage(context, "Failed to set Viewpoint center: ${error.message}")
                }

        }

    } else {
        showMessage(context, "No address found for the given query")
    }

}

fun createTextGraphic(geocodeResult: GeocodeResult): Graphic {
    val textSymbol = TextSymbol(
        text = geocodeResult.label,
        color = Color.black,
        size = 18f,
        horizontalAlignment = HorizontalAlignment.Center,
        verticalAlignment = VerticalAlignment.Bottom
    ).apply {
        offsetY = 8f
        haloColor = Color.white
        haloWidth = 2f
    }
    return Graphic(
        geometry = geocodeResult.displayLocation,
        symbol = textSymbol
    )
}

fun createMarkerGraphic(geocodeResult: GeocodeResult): Graphic {
    val simpleMarkerSymbol = SimpleMarkerSymbol(
        style = SimpleMarkerSymbolStyle.Square,
        color = Color.red,
        size = 12.0f
    )
    return Graphic(
        geometry = geocodeResult.displayLocation,
        attributes = geocodeResult.attributes,
        symbol = simpleMarkerSymbol
    )
}

fun showMessage(context: Context, message: String) {
    Toast.makeText(context, message, Toast.LENGTH_LONG).show()
}

Click Run > Run > app to run the app.

You should see a search box above the map. Search for an address by entering an address and press the magnifying glass on the on the device keyboard. The result of the search should display on the map as a red square.

Alternatively, you can download the tutorial solution, as follows.

Option 2: Download the solution

Click the Download solution link in the right-hand side of this page.
Unzip the file to a location on your machine.
Run Android Studio.
Go to File > Open…. Navigate to the solution folder and click Open.

On Windows: If you are in the Welcome to Android Studio dialog, click Open and navigate to the solution folder. Then click Open.

Since the downloaded solution does not contain authentication credentials, you must add the developer credentials that you created in the Set up authentication section.

Set developer credentials in the solution

To allow your app users to access ArcGIS location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more , use the developer credentials that you created in the Set up authentication step to authenticate requests for resources.

In the Android view of Android Studio, open app > kotlin+java > com.example.app > MainActivity. Set the AuthenticationMode to .API_KEY.

MainActivity.kt

14 collapsed lines
package com.example.app

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import com.arcgismaps.ApiKey
import com.arcgismaps.ArcGISEnvironment
import com.arcgismaps.httpcore.authentication.OAuthUserConfiguration
import com.arcgismaps.toolkit.authentication.AuthenticatorState
import com.arcgismaps.toolkit.authentication.DialogAuthenticator
import com.example.app.screens.MainScreen
import com.example.app.ui.theme.TutorialTheme

class MainActivity : ComponentActivity() {

    private enum class AuthenticationMode { API_KEY, USER_AUTH }

    private val authenticationMode = AuthenticationMode.API_KEY
42 collapsed lines

    private val authenticatorState = AuthenticatorState()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        when (authenticationMode) {
            AuthenticationMode.API_KEY -> {

                ArcGISEnvironment.apiKey = ApiKey.create("YOUR_ACCESS_TOKEN")

            }

            AuthenticationMode.USER_AUTH -> {
                authenticatorState.oAuthUserConfigurations = listOf(
                    OAuthUserConfiguration(
                        portalUrl = "https://www.arcgis.com",

                        clientId = "YOUR_CLIENT_ID",
                        redirectUrl = "YOUR_REDIRECT_URL"

                    )
                )

            }
        }

        enableEdgeToEdge()

        setContent {
            TutorialTheme {
                MainScreen()

                if (authenticationMode == AuthenticationMode.USER_AUTH) {
                    DialogAuthenticator(authenticatorState)
                }

            }
        }
    }

}

Set the apiKey property with your API key access token.

MainActivity.kt

22 collapsed lines
package com.example.app

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import com.arcgismaps.ApiKey
import com.arcgismaps.ArcGISEnvironment
import com.arcgismaps.httpcore.authentication.OAuthUserConfiguration
import com.arcgismaps.toolkit.authentication.AuthenticatorState
import com.arcgismaps.toolkit.authentication.DialogAuthenticator
import com.example.app.screens.MainScreen
import com.example.app.ui.theme.TutorialTheme

class MainActivity : ComponentActivity() {

    private enum class AuthenticationMode { API_KEY, USER_AUTH }

    private val authenticationMode = AuthenticationMode.API_KEY

    private val authenticatorState = AuthenticatorState()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        when (authenticationMode) {
            AuthenticationMode.API_KEY -> {

                ArcGISEnvironment.apiKey = ApiKey.create("YOUR_ACCESS_TOKEN")

            }
30 collapsed lines

            AuthenticationMode.USER_AUTH -> {
                authenticatorState.oAuthUserConfigurations = listOf(
                    OAuthUserConfiguration(
                        portalUrl = "https://www.arcgis.com",

                        clientId = "YOUR_CLIENT_ID",
                        redirectUrl = "YOUR_REDIRECT_URL"

                    )
                )

            }
        }

        enableEdgeToEdge()

        setContent {
            TutorialTheme {
                MainScreen()

                if (authenticationMode == AuthenticationMode.USER_AUTH) {
                    DialogAuthenticator(authenticatorState)
                }

            }
        }
    }

}

Best Practice: The access token is stored directly in the code as a convenience for this tutorial. Do not store credentials directly in source code in a production environment.

In the Android view of Android Studio, open app > kotlin+java > com.example.app > MainActivity. Set the AuthenticationMode to .USER_AUTH.

MainActivity.kt

class MainActivity : ComponentActivity() {
    private enum class AuthenticationMode { API_KEY, USER_AUTH }

    private val authenticationMode = AuthenticationMode.USER_AUTH

Set your clientID and redirectURL values. You must use the RedirectURL that you supplied for your app in the user authentication part of the Set up authentication step.

MainActivity.kt

            AuthenticationMode.USER_AUTH -> {
                authenticatorState.oAuthUserConfigurations = listOf(
                    OAuthUserConfiguration(
                        portalUrl = "https://www.arcgis.com",

                        clientId = "YOUR_CLIENT_ID",
                        redirectUrl = "YOUR_REDIRECT_URL"

                    )
                )

Open app > manifests > AndroidManifest.xml.

Set the android:scheme and android:host using the scheme and host from your RedirectURL.

A redirectURL is composed of a scheme and a host component. The format for the redirect url is scheme://host. For example, if the redirect url is myscheme://myhost then the scheme is myscheme and the host is myhost.

AndroidManifest.xml

41 collapsed lines
<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Tutorial"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:label="@string/app_name"
            android:theme="@style/Theme.Tutorial">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>

        <activity
            android:name="com.arcgismaps.toolkit.authentication.AuthenticationActivity"
            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:exported="true"
            android:launchMode="singleTop" >
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data
                    android:scheme="your_redirect_url_scheme"
                    android:host="your_redirect_url_host" />
6 collapsed lines

            </intent-filter>
        </activity>

    </application>
</manifest>

Best Practice: The OAuth credentials are stored directly in the code as a convenience for this tutorial. Do not store credentials directly in source code in a production environment.

Run the app

Click Run > Run > app to run the app.

What’s next?

Learn how to use additional API features, ArcGIS location services, and ArcGIS tools in these tutorials:

Geocode and searchIntroduction TutorialsFind places

Prerequisites

Set up authentication

Develop or download

Option 1: Develop the code

Open an Android Studio project

Set developer credentials

Add import statements and some Compose variables

Create a function to geocode an address

Create two graphics

Display the result

Add a search bar and pass parameters to MapView

Option 2: Download the solution

Set developer credentials in the solution

Run the app

What’s next?

Add a search bar and pass parameters to `MapView`