Display a map

Learn how to create and display a map with a basemap layer.

display a map

A map contains layers of geographic data. A map contains a basemap layer and, optionally, one or more data layers. You can display a specific area of a map by using a map view and setting the location and zoom level.

In this tutorial, you create and display a map of the Santa Monica Mountains in California using the topographic basemap layer.

The map and code will be used as the starting point for other 2D tutorials.

Prerequisites

Before starting this tutorial:

  1. You need an ArcGIS Location Platform or ArcGIS Online account.

  2. A development and deployment environment that meets the system requirements.

  3. An IDE for Android development in Kotlin.

Steps

Create a new Android Studio project

Use Android Studio to create an app and configure it to reference the API.

  1. Open Android Studio.

    • In the Welcome to Android Studio window, click New Project.

      Or if you already have Android Studio opened, click File > New > New Project in the menu bar.

    • In the New Project window, make sure Phone and Tablet tab is selected, and then select Empty Activity. Click Next.

    • In the next window, set the following options and then click Finish.

      • Name: Display a map.
      • Package name: Change to com.example.app. Or change to match your organization.
      • Save location: Set to a new folder.
      • Minimum SDK: API 26 ("Oreo"; Android 8.0)
      • Build configuration language: Kotlin DSL (build.gradle.kts)
  2. In the Project tool window, make sure that your current view is Android. These tutorial instructions refer to that view.

  3. From the Project tool window, open Gradle Scripts > build.gradle.kts (Project: Display_a_map). Replace the contents of the file with the following code.

    build.gradle.kts (Project: Display_a_map)
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    // Top-level build file where you can add configuration options common to all sub-projects/modules.
    plugins {
        alias(libs.plugins.android.application) apply false
        alias(libs.plugins.jetbrains.kotlin.android) apply false
    }
  4. From the Project tool window, open Gradle Scripts > build.gradle.kts (Module :app). Replace the contents of the file with the entire expanded code below.

    build.gradle.kts (Module: app)
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
        // ArcGIS Maps for Kotlin - SDK dependency
        implementation(libs.arcgis.maps.kotlin)
        // Toolkit dependencies
        implementation(platform(libs.arcgis.maps.kotlin.toolkit.bom))
        implementation(libs.arcgis.maps.kotlin.toolkit.geoview.compose)
        // Additional modules from Toolkit, if needed, such as:
        // implementation(libs.arcgis.maps.kotlin.toolkit.authentication)
    
    Expand
  5. From the Project tool window, open Gradle Scripts > libs.versions.toml. In the [versions] section, you need to declare the version number for ArcGIS Maps SDK for Kotlin. And in the [libraries] section, you need to add the library declarations for the following:

    • the ArcGIS Maps SDK for Kotlin SDK.
    • the ArcGIS Maps SDK for Kotlin Toolkit BOM.
    • any Toolkit components needed. For this tutorial, you need only the geoview-compose component, which contains the composable MapView.

    The version for the Toolkit BOM applies to all the Toolkit components you declare.

    gradle/libs.versions.toml
    Use dark colors for code blocksCopy
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    
    [versions]
    arcgisMapsKotlin = "200.5.0"
    
    [libraries]
    arcgis-maps-kotlin = { group = "com.esri", name = "arcgis-maps-kotlin", version.ref = "arcgisMapsKotlin" }
    arcgis-maps-kotlin-toolkit-bom = { group = "com.esri", name = "arcgis-maps-kotlin-toolkit-bom", version.ref = "arcgisMapsKotlin" }
    arcgis-maps-kotlin-toolkit-geoview-compose = { group = "com.esri", name = "arcgis-maps-kotlin-toolkit-geoview-compose" }
    # Additional modules from Toolkit, if needed, such as:
    # arcgis-maps-kotlin-toolkit-authentication = { group = "com.esri", name = "arcgis-maps-kotlin-toolkit-authentication" }
    
  6. From the Project tool window, open Gradle Scripts > settings.gradle.kts. Replace the contents of the file with the expanded code below.

    settings.gradle.kts (Display a map)
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    dependencyResolutionManagement {
        repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
        repositories {
            google()
            mavenCentral()
            maven { url = uri("https://esri.jfrog.io/artifactory/arcgis") }
        }
    }
    
    rootProject.name = "Display a map"
    include(":app")
  7. Sync the Gradle changes. Click the Sync now prompt or click the refresh icon (Sync Project with Gradle Files) in the toolbar. This may take several minutes.

  8. From the Project tool window, open app > manifests > AndroidManifest.xml. Update the Android manifest to allow internet access.

    AndroidManifest.xml
    Expand
    Use dark colors for code blocks
    3 4 5 6
    Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">
    
        <uses-permission android:name="android.permission.INTERNET" />
    
    Expand

Create a map

  1. From the Project tool window, right click on app > kotlin+java > com.example.app, select New > package from the list. Enter com.example.app.screens as the package name. Hit Enter on your keyboard. This step creates a new package that will contain all the UI files.

  2. Right click on the screens package you just created, select New > Kotlin Class/File from the list. In the pop-up window, select File and enter MainScreen as the file name. Hit Enter on your keyboard.

  3. In MainScreen.kt, delete any lines of code that were inserted automatically by Android Studio. Then add the following OptIn annotation, package name, and imports.

    MainScreen.kt
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    @file:OptIn(ExperimentalMaterial3Api::class)
    
    package com.example.app.screens
    
    import androidx.compose.foundation.layout.fillMaxSize
    import androidx.compose.foundation.layout.padding
    import androidx.compose.material3.ExperimentalMaterial3Api
    import androidx.compose.material3.Scaffold
    import androidx.compose.material3.Text
    import androidx.compose.material3.TopAppBar
    import androidx.compose.runtime.Composable
    import androidx.compose.runtime.remember
    import androidx.compose.ui.Modifier
    import androidx.compose.ui.res.stringResource
    import com.arcgismaps.mapping.ArcGISMap
    import com.arcgismaps.mapping.BasemapStyle
    import com.arcgismaps.mapping.Viewpoint
    import com.arcgismaps.toolkit.geoviewcompose.MapView
    import com.example.app.R
    
    
  4. Create a top-level function named createMap() that returns an ArcGISMap.

    MainScreen.kt
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    fun createMap(): ArcGISMap {
    
    }
  5. Create an ArcGISMap using the BasemapStyle.ArcGISTopographic, and call apply {} on the map. The function returns this ArcGISMap.

    MainScreen.kt
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    fun createMap(): ArcGISMap {
    
        return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
    
        }
    
    }
  6. In the apply block, create a Viewpoint with x (longitude) and y (latitude) coordinates, and a scale. Assign the view point to the initialViewpoint property of the ArcGISMap.

    MainScreen.kt
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    fun createMap(): ArcGISMap {
    
        return ArcGISMap(BasemapStyle.ArcGISTopographic).apply {
    
            initialViewpoint = Viewpoint(
                latitude = 34.0270,
                longitude = -118.8050,
    
                scale = 72000.0
    
            )
    
        }
    
    }

Create a MainScreen to hold the map

  1. Create a composable function named MainScreen, which will call MapView.

    MainScreen.kt
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    @Composable
    fun MainScreen() {
    
    }
    
    Expand
  2. Add a remember block and call createMap() inside it. Then assign remember to a local variable named map.

    MainScreen.kt
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    @Composable
    fun MainScreen() {
    
        val map = remember {
            createMap()
        }
    
    }
    
    Expand
  3. You will now call several composable functions from Android Jetpack Compose. Call Scaffold and pass a TopAppBar with a Text that contains the app name (R.string.app_name).

    MainScreen.kt
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    @Composable
    fun MainScreen() {
    
        val map = remember {
            createMap()
        }
    
        Scaffold(
            topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
        ) {
    
        }
    
    }
    
    Expand
  4. In the trailing lambda for Scaffold, call the MapView composable defined in the ArcGIS Maps SDK for Kotlin Toolkit. Pass a Modifier that has maximum size and default padding. And pass map as the arcGISMap parameter.

    MainScreen.kt
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    @Composable
    fun MainScreen() {
    
        val map = remember {
            createMap()
        }
    
        Scaffold(
            topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
        ) {
    
            MapView(
                modifier = Modifier.fillMaxSize().padding(it),
                arcGISMap = map
            )
    
        }
    
    }
    
    Expand

Call MainScreen inside MainActivity class

  1. Open the app > kotlin+java > com.example.app > MainActivity.kt. Delete all lines of code except for the package declaration (the first line) and the MainActivity class definition.

    MainActivity.kt
    Use dark colors for code blocksCopy
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    package com.example.app
    
    class MainActivity : ComponentActivity() {
    
    }
  2. Add import statements to MainActivity.kt.

    MainActivity.kt
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    package com.example.app
    
    import android.os.Bundle
    import androidx.activity.ComponentActivity
    import androidx.activity.compose.setContent
    import com.arcgismaps.ApiKey
    import com.arcgismaps.ArcGISEnvironment
    import com.example.app.screens.MainScreen
    import com.example.app.ui.theme.DisplayAMapTheme
    
    class MainActivity : ComponentActivity() {
    
    }
  3. In the setContent() block of the onCreate() lifecycle function, you will call the composable function MainScreen, with default theming applied. To do this, add onCreate() with the following code.

    MainActivity.kt
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    class MainActivity : ComponentActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            setContent {
                DisplayAMapTheme {
                    MainScreen()
                }
            }
    
        }
    
    }

Get an access token

You need an access token to use the location services used in this tutorial.

  1. Go to the Create an API key tutorial to obtain an access token.

  2. Ensure that the following privilege is enabled: Location services > Basemaps > Basemap styles service.

  3. Copy the access token as it will be used in the next step.

To learn more about other ways to get an access token, go to Types of authentication.

Set an API Key

  1. In the MainActivity class, create the setApiKey() method, where you set the ArcGISEnvironment.apiKey​ property by calling ApiKey.create() and passing your access token as a string. Don't forget the double quotes.

    MainActivity.kt
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    class MainActivity : ComponentActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            setContent {
                DisplayAMapTheme {
                    MainScreen()
                }
            }
    
        }
    
        private fun setApiKey() {
    
            ArcGISEnvironment.apiKey = ApiKey.create("YOUR_ACCESS_TOKEN")
    
        }
    
    }
  2. Call setApiKey() in the onCreate() lifecycle method, before setContent {}.

    MainActivity.kt
    Expand
    Use dark colors for code blocks
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    class MainActivity : ComponentActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
    
            setApiKey()
    
            setContent {
                DisplayAMapTheme {
                    MainScreen()
                }
            }
    
        }
    
        private fun setApiKey() {
    
            ArcGISEnvironment.apiKey = ApiKey.create("YOUR_ACCESS_TOKEN")
    
        }
    
    }

Run your app

  1. Click Run > Run > app to run the app.

You should see a map with the topographic basemap layer centered on the Santa Monica Mountains in California. Pinch, drag, and double-tap the map view to explore the map.

What's next?

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

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