Add a point, line, and polygon

Learn how to display point, line, and polygon graphics in a map.

You typically use graphics to display geographic data that is not connected to a database and that is not persisted, like highlighting a route between two locations, displaying a search buffer around a point, or tracking the location of a vehicle in real-time. Graphics are composed of a geometry, symbol, and attributes.

In this tutorial, you display points, lines, and polygons on a map as graphics.

Prerequisites

Steps

Open an Android Studio project

1. To start this tutorial, complete the Display a map tutorial. Or download and unzip the Display a map solution in a new folder.

2. Modify the old project for use in this new tutorial. Expand More info for instructions.

   More info

   1. On your file system, delete the .idea folder, if present, at the top level of your project.

   2. In the Android tool window, open app > res > values > strings.xml.

      In the <string name="app_name"> element, change the text content to Add a point, line, and polygon.

      strings.xml

      Use dark colors for code blocks

      1
      2
      3
      <resources>
          <string name="app_name">Add a point, line, and polygon</string>
      </resources>

   3. In the Android tool window, open Gradle Scripts > settings.gradle.kts.

      Change the value of rootProject.name to "Add a point, line, and polygon".

      settings.gradle.kts

      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
      dependencyResolutionManagement {
          repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
          repositories {
              google()
              mavenCentral()
              maven { url = uri("https://esri.jfrog.io/artifactory/arcgis") }
          }
      }
      
      rootProject.name = "Add a point, line, and polygon"
      include(":app")

   4. The UI theme composable in Display a map tutorial was DisplayAMapTheme. Rename the theme composable throughout the tutorial by refactoring DisplayAMapTheme.

      In the Android tool window, open app > kotlin+java > com.exmple.app > ui.theme > Theme.kt.

      Right-click the function name DisplayAMapTheme and select Refactor -> Rename. Replace the name with AddAPointLineAndPolygonTheme.

      Theme.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
      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
      @Composable
      fun DisplayAMapTheme(
      
          darkTheme: Boolean = isSystemInDarkTheme(),
          // Dynamic color is available on Android 12+
          dynamicColor: Boolean = true,
          content: @Composable () -> Unit
      ) {
          val colorScheme = when {
              dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
                  val context = LocalContext.current
                  if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
              }
      
              darkTheme -> DarkColorScheme
              else -> LightColorScheme
          }
      

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

3. If you downloaded the solution, get an access token and set the API key in MainActivity.kt.

   Instructions to set the API Key

   An API Key gives your app access to secure resources used in this tutorial.

   1. Go to the Create an API key tutorial to obtain a new API key access token. Ensure that the following privilege is enabled: Location services > Basemaps > Basemap styles service. Copy the access token as it will be used in the next step.

   2. In Android Studio: in the Android tool window, open app > java > com.example.app > MainActivity.

   3. In the setApiKey() function, find the ApiKey.create() call and paste your copied access token inside the double quotes, replacing YOUR_ACCESS_TOKEN.

      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
          private fun setApiKey() {
      
              ArcGISEnvironment.apiKey = ApiKey.create("YOUR_ACCESS_TOKEN")
      
          }
      

Add import statements

1. In the Android tool window, open app > kotlin+java > com.example.app > MainScreen.kt. Replace the import statements with the imports needed for this tutorial.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   @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.Color
   import com.arcgismaps.geometry.Point
   import com.arcgismaps.geometry.PolygonBuilder
   import com.arcgismaps.geometry.PolylineBuilder
   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.SimpleFillSymbol
   import com.arcgismaps.mapping.symbology.SimpleFillSymbolStyle
   import com.arcgismaps.mapping.symbology.SimpleLineSymbol
   import com.arcgismaps.mapping.symbology.SimpleLineSymbolStyle
   import com.arcgismaps.mapping.symbology.SimpleMarkerSymbol
   import com.arcgismaps.mapping.symbology.SimpleMarkerSymbolStyle
   import com.arcgismaps.mapping.view.Graphic
   import com.arcgismaps.mapping.view.GraphicsOverlay
   import com.arcgismaps.toolkit.geoviewcompose.MapView
   import com.example.app.R
   
   // Create a blue outline symbol.
   

Add a graphics overlay and a list of graphics overlay

You will create a GraphicsOverlay. Then add the graphics overlay to a list named graphicsOverlays.

In subsequent sections of this tutorial, you will create a point, a line, and a polygon and add each of them to the GraphicsOverlay.

1. In the MainScreen composable, add a remember block and create a GraphicsOverlay inside it. Then assign remember to a local variable named graphicsOverlay.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   @Composable
   fun MainScreen() {
       // create an ArcGISMap
       val map = remember {
           createMap()
       }
   
       // Create a graphics overlay.
       val graphicsOverlay = remember { GraphicsOverlay() }
   
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
           MapView(
               modifier = Modifier.fillMaxSize().padding(it),
               arcGISMap = map,
   
           )
       }
   

   Expand

2. Add a remember block. Inside it, create a list that contains the graphicsOverlay you just created. Then assign remember to a local variable named graphicsOverlays.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   @Composable
   fun MainScreen() {
       // create an ArcGISMap
       val map = remember {
           createMap()
       }
   
       // Create a graphics overlay.
       val graphicsOverlay = remember { GraphicsOverlay() }
   
       // Create a list of graphics overlays used by the MapView
       val graphicsOverlays = remember { listOf(graphicsOverlay) }
   

   Expand

3. Pass graphicsOverlays as the graphicsOverlays argument to 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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
       Scaffold(
           topBar = { TopAppBar(title = { Text(text = stringResource(id = R.string.app_name)) }) }
       ) {
           MapView(
               modifier = Modifier.fillMaxSize().padding(it),
               arcGISMap = map,
   
               graphicsOverlays = graphicsOverlays
   
           )
       }
   

   Expand

Add a point graphic

A point graphic is created using a point and a marker symbol. A point is defined with x and y coordinates, and a spatial reference. For latitude and longitude coordinates, the spatial reference is WGS84.

1. Create a lazy top-level property named blueOutlineSymbol. In the lazy block, create a solid, blue, 2px-wide SimpleLineSymbol.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   // Create a blue outline symbol.
   private val blueOutlineSymbol by lazy {
       SimpleLineSymbol(SimpleLineSymbolStyle.Solid, Color.fromRgba(0, 0, 255), 2f)
   }
   

   Expand

2. Create a lazy top-level property named pointGraphic.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   private val pointGraphic by lazy {
   
   }
   

   Expand

3. In the lazy block of thepointGraphic property , create a Point and a SimpleMarkerSymbol. To create the point, provide x (longitude) and y (latitude) coordinates and a SpatialReference (by calling wgs84() on SpatialReference).

   More info

   Point graphics support a number of symbol types such as SimpleMarkerSymbol, PictureMarkerSymbol, and TextSymbol. Learn more about symbols at Symbol in the API Reference.

   Assign blueOutlineSymbol to the outline property of simpleMarkerSymbol.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   private val pointGraphic by lazy {
   
       // Create a point geometry with a location and spatial reference.
       // Point(latitude, longitude, spatial reference)
       val point = Point(
           x = -118.8065,
           y = 34.0005,
           spatialReference = SpatialReference.wgs84()
       )
   
       // Create a point symbol that is an small red circle and assign the blue outline symbol to its outline property.
       val simpleMarkerSymbol = SimpleMarkerSymbol(
           style = SimpleMarkerSymbolStyle.Circle,
           color = Color.red,
           size = 10f
       )
       simpleMarkerSymbol.outline = blueOutlineSymbol
   
   }
   

   Expand

4. Create a Graphic with point and simpleMarkerSymbol.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   private val pointGraphic by lazy {
   
       // Create a point geometry with a location and spatial reference.
       // Point(latitude, longitude, spatial reference)
       val point = Point(
           x = -118.8065,
           y = 34.0005,
           spatialReference = SpatialReference.wgs84()
       )
   
       // Create a point symbol that is an small red circle and assign the blue outline symbol to its outline property.
       val simpleMarkerSymbol = SimpleMarkerSymbol(
           style = SimpleMarkerSymbolStyle.Circle,
           color = Color.red,
           size = 10f
       )
       simpleMarkerSymbol.outline = blueOutlineSymbol
   
       // Create a graphic with the point geometry and symbol.
       Graphic(
           geometry = point,
           symbol = simpleMarkerSymbol
       )
   
   }
   

   Expand

5. In MainScreen, display the graphic by adding it to the graphics property of graphicsOverlay.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   @Composable
   fun MainScreen() {
       // create an ArcGISMap
       val map = remember {
           createMap()
       }
   
       // Create a graphics overlay.
       val graphicsOverlay = remember { GraphicsOverlay() }
   
       // Add the point graphic to the graphics overlay.
       graphicsOverlay.graphics.add(pointGraphic)
   
       // Create a list of graphics overlays used by the MapView
       val graphicsOverlays = remember { listOf(graphicsOverlay) }
   

   Expand

Click Run > Run > app to run the app.

You should see a point graphic in Point Dume State Beach.

Add a line graphic

A line graphic is created using a polyline and a line symbol. A polyline is defined as a sequence of points.

1. Create a lazy top-level property named polylineGraphic.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   private val polylineGraphic by lazy {
   
   }
   

   Expand

2. In the lazy block, create a Polyline and a SimpleLineSymbol. To create the polyline, create a PolylineBuilder and then call toGeometry() on the polygon builder.

   More info

   Line graphics support a number of symbol types such as SimpleMarkerSymbol and TextSymbol. Learn more about symbols at Symbol in the API Reference.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   private val polylineGraphic by lazy {
   
       // Create a blue line symbol for the polyline.
       val polylineSymbol = SimpleLineSymbol(
           style = SimpleLineSymbolStyle.Solid,
           color = Color.fromRgba(0, 0, 255),
           width = 3f
       )
   
       // Create a polylineBuilder with a spatial reference and add three points to it.
       val polylineBuilder = PolylineBuilder(SpatialReference.wgs84()) {
           addPoint(-118.8215, 34.0139)
           addPoint(-118.8148, 34.0080)
           addPoint(-118.8088, 34.0016)
       }
       // then get the polyline from the polyline builder
       val polyline = polylineBuilder.toGeometry()
   
   }
   

   Expand

3. Create a Graphic with polyline and polylineSymbol.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   private val polylineGraphic by lazy {
   
       // Create a blue line symbol for the polyline.
       val polylineSymbol = SimpleLineSymbol(
           style = SimpleLineSymbolStyle.Solid,
           color = Color.fromRgba(0, 0, 255),
           width = 3f
       )
   
       // Create a polylineBuilder with a spatial reference and add three points to it.
       val polylineBuilder = PolylineBuilder(SpatialReference.wgs84()) {
           addPoint(-118.8215, 34.0139)
           addPoint(-118.8148, 34.0080)
           addPoint(-118.8088, 34.0016)
       }
       // then get the polyline from the polyline builder
       val polyline = polylineBuilder.toGeometry()
   
       // Create a polyline graphic with the polyline geometry and symbol.
       Graphic(
           geometry = polyline,
           symbol = polylineSymbol
       )
   
   }
   

   Expand

4. In MainScreen, display the graphic by adding it to the graphics property of graphicsOverlay.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   @Composable
   fun MainScreen() {
       // create an ArcGISMap
       val map = remember {
           createMap()
       }
   
       // Create a graphics overlay.
       val graphicsOverlay = remember { GraphicsOverlay() }
   
       // Add the point graphic to the graphics overlay.
       graphicsOverlay.graphics.add(pointGraphic)
   
       // Add the polyline graphic to the graphics overlay.
       graphicsOverlay.graphics.add(polylineGraphic)
   
       // Create a list of graphics overlays used by the MapView
       val graphicsOverlays = remember { listOf(graphicsOverlay) }
   

   Expand

Click Run > Run > app to run the app.

You should see a point and line graphic along Westward Beach.

Add a polygon graphic

A polygon graphic is created using a polygon and a fill symbol. A polygon is defined as a sequence of points that describe a closed boundary.

1. Create a lazy top-level property named polygonGraphic.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   private val polygonGraphic by lazy {
   
   }
   

   Expand

2. In the lazy block, create a Polygon and a SimpleFillSymbol. To create the polygon, create a PolygonBuilder and then call toGeometry() on the polygon builder.

   More info

   Polygon graphics support a number of symbol types such as SimpleFillSymbol, PictureFillSymbol, SimpleMarkerSymbol and TextSymbol. Learn more about symbols at Symbol in the API Reference.

   Next, create a SimpleFillSymbol that has a solid red fill with an alpha channel of 128 and uses the blueOutlineSymbol defined earlier.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   private val polygonGraphic by lazy {
   
       // Create a polygon builder with a spatial reference and add five vertices (points) to it.
       // Then get the polygon from the polygon builder.
       val polygonBuilder = PolygonBuilder(SpatialReference.wgs84()) {
           addPoint(-118.8189, 34.0137)
           addPoint(-118.8067, 34.0215)
           addPoint(-118.7914, 34.0163)
           addPoint(-118.7959, 34.0085)
           addPoint(-118.8085, 34.0035)
       }
       val polygon = polygonBuilder.toGeometry()
   
       // Create a red fill symbol with an alpha component of 128: values can run from 0 to 255).
       val polygonFillSymbol = SimpleFillSymbol(
           style = SimpleFillSymbolStyle.Solid,
           color = Color.fromRgba(255, 0, 0, 128),
           outline = blueOutlineSymbol
       )
   
   }
   

   Expand

3. Create a Graphic with polygon and polygonFillSymbol.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   private val polygonGraphic by lazy {
   
       // Create a polygon builder with a spatial reference and add five vertices (points) to it.
       // Then get the polygon from the polygon builder.
       val polygonBuilder = PolygonBuilder(SpatialReference.wgs84()) {
           addPoint(-118.8189, 34.0137)
           addPoint(-118.8067, 34.0215)
           addPoint(-118.7914, 34.0163)
           addPoint(-118.7959, 34.0085)
           addPoint(-118.8085, 34.0035)
       }
       val polygon = polygonBuilder.toGeometry()
   
       // Create a red fill symbol with an alpha component of 128: values can run from 0 to 255).
       val polygonFillSymbol = SimpleFillSymbol(
           style = SimpleFillSymbolStyle.Solid,
           color = Color.fromRgba(255, 0, 0, 128),
           outline = blueOutlineSymbol
       )
   
       // Create a polygon graphic from the polygon geometry and symbol.
       Graphic(
           geometry = polygon,
           symbol = polygonFillSymbol
       )
   
   }
   

   Expand

4. In MainScreen, display the graphic by adding it to the graphics property of graphicsOverlay.

   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
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
   100
   101
   102
   103
   104
   105
   106
   107
   108
   109
   110
   111
   112
   113
   114
   115
   116
   117
   118
   119
   120
   121
   122
   123
   124
   125
   126
   127
   128
   129
   130
   131
   132
   133
   134
   135
   136
   137
   138
   139
   140
   141
   142
   143
   144
   145
   146
   147
   148
   149
   150
   151
   152
   153
   154
   155
   156
   157
   158
   159
   160
   161
   162
   163
   @Composable
   fun MainScreen() {
       // create an ArcGISMap
       val map = remember {
           createMap()
       }
   
       // Create a graphics overlay.
       val graphicsOverlay = remember { GraphicsOverlay() }
   
       // Add the point graphic to the graphics overlay.
       graphicsOverlay.graphics.add(pointGraphic)
   
       // Add the polyline graphic to the graphics overlay.
       graphicsOverlay.graphics.add(polylineGraphic)
   
       // Add the polygon graphic to the graphics overlay.
       graphicsOverlay.graphics.add(polygonGraphic)
   
       // Create a list of graphics overlays used by the MapView
       val graphicsOverlays = remember { listOf(graphicsOverlay) }
   

   Expand

Click Run > Run > app to run the app.

You should see a point, line, and polygon graphic around Mahou Riviera in the Santa Monica Mountains.

What's next

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

• Add a feature layer
• Search for an address
• Find a route and directions