Display a map

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

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

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.

   More info

   If your view name is something other than Android (such as Project or Packages), click on the leftmost control in the title bar of the Project tool window, and select Android from the list.

   

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 {
       id("com.android.application") version "8.2.0" apply false
       id("org.jetbrains.kotlin.android") version "1.9.10" apply false
   }

4. From the Project tool window, open Gradle Scripts > build.gradle.kts (Module :app). Replace the contents of the file with the 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
       kotlinOptions {
           jvmTarget = "17"
       }
   
       packaging {
           resources {
               excludes += "/META-INF/DEPENDENCIES"
           }
       }
   
       namespace = "com.example.app"
   }
   
   dependencies {
       implementation("androidx.core:core-ktx:1.12.0")
       implementation("androidx.lifecycle:lifecycle-runtime-ktx:2.7.0")
       implementation("androidx.activity:activity-compose:1.8.2")
       // Jetpack Compose Bill of Materials
       implementation(platform("androidx.compose:compose-bom:2023.10.01"))
       // Jetpack Compose dependencies
       implementation("androidx.compose.ui:ui")
       implementation("androidx.compose.material3:material3")
       // ArcGIS Map Kotlin SDK dependencies
       implementation("com.esri:arcgis-maps-kotlin:200.4.0")
       // Toolkit dependencies
       implementation(platform("com.esri:arcgis-maps-kotlin-toolkit-bom:200.4.0"))
       implementation("com.esri:arcgis-maps-kotlin-toolkit-geoview-compose")
   }

5. 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)

   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
   pluginManagement {
       repositories {
           google()
           mavenCentral()
           gradlePluginPortal()
       }
   }
   
   dependencyResolutionManagement {
   

   Expand

6. 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.

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

   More info

   Insert these new elements within the manifest element. Do not alter or remove any other statements.

   Depending on what ArcGIS functionality you add in future tutorials, it is likely you will need to add additional permissions to your manifest.

   AndroidManifest.xml

   Expand

   Use dark colors for code blocks

   2 2 3 4 5 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 6 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.

   More info

   For more information on apply {}, see Kotlin scope functions.

   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.

   More info

   The top-level composable function remember is used to retain state across recompositions.

   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()
               }
           }
   
       }
   
   }

Set your API key

An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.

2. In the MainActivity class, create the setApiKey() method, where you set the ArcGISEnvironment.apiKey​ property by calling ApiKey.create() and passing your API key as a string. Don't forget the 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_API_KEY")
   
       }
   
   }

3. 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_API_KEY")
   
       }
   
   }

Run your app

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

   More info

   In Android Studio, you have two choices for running your app: an actual Android device or the Android Emulator.

   Android device

   Connect your computer to your Android device, using USB or Wi-Fi. For more details, see How to connect your Android device.

   Android Emulator

   Create an AVD (Android Virtual Device) to run in the Android Emulator. For details, see Run apps on the Android Emulator.

   Selecting a device

   When you build and run an app in Android Studio, you must first select a device. From the Android Studio toolbar, you can access the drop-down list of your currently available devices, both virtual and physical.

   .

   If you cannot access the list on the toolbar, click Tools > Device Manager.

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:

• Add a point, line, and polygon

• Add a feature layer