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.

To learn how to display data from data sources, see the Add a feature layer tutorial.

Prerequisites

Before starting this tutorial:

You need an ArcGIS Location Platform or ArcGIS Online account.
Confirm that your system meets the minimum system requirements.
An IDE for Java.

Steps

Open a Java project with Gradle

To start this tutorial, complete the Display a map tutorial, or download and unzip the Display a map solution into a new folder.
Open the build.gradle file as a project in IntelliJ IDEA.
If you downloaded the solution, get an access token and 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 the IntelliJ IDEA > Project tool window, open src/main/java/com.example.app and double-click App.
3. In the start() method, set the API key property on the ArcGISRuntimeEnvironment with your access token. Replace YOUR_ACCESS_TOKEN with your copied access token. Be sure to surround your access token with double quotes as it is a string.
  App.java
  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 ArcGISRuntimeEnvironment.setApiKey("YOUR_ACCESS_TOKEN");
  Warning
  The access token is stored directly in the code as a convenience for this tutorial. Storing access tokens in the source code is not best practice.

Add import statements

Add import statements to reference the ArcGIS Runtime API classes.

In the IntelliJ IDEA > Project tool window, open src/main/java/com.example.app and click App.

Add the following imports above the existing imports:

App.java
Use dark colors for code blocks
15
15
15
15
15
15
15
15
15
15
15
15
15
15
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
30
29
28
27
26
25
24
23
22
21
20
19
18
17
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
0
-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
-26
-26
-27
-28
-29
-30
-31
-32
-33
-34
-35
-36
-36
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.import com.esri.arcgisruntime.geometry.Point;
import com.esri.arcgisruntime.geometry.PointCollection;
import com.esri.arcgisruntime.geometry.Polygon;
import com.esri.arcgisruntime.geometry.Polyline;
import com.esri.arcgisruntime.geometry.SpatialReferences;
import com.esri.arcgisruntime.mapping.Viewpoint;
import com.esri.arcgisruntime.mapping.view.Graphic;
import com.esri.arcgisruntime.mapping.view.GraphicsOverlay;
import com.esri.arcgisruntime.symbology.SimpleFillSymbol;
import com.esri.arcgisruntime.symbology.SimpleLineSymbol;
import com.esri.arcgisruntime.symbology.SimpleMarkerSymbol;

import com.esri.arcgisruntime.ArcGISRuntimeEnvironment;
import com.esri.arcgisruntime.mapping.ArcGISMap;
import com.esri.arcgisruntime.mapping.BasemapStyle;
import com.esri.arcgisruntime.mapping.view.MapView;

Add a graphics overlay

A graphics overlay is a container for graphics. It is used with a map view to display graphics on a map. You can add more than one graphics overlay to a map view. Graphics overlays are displayed on top of all the other layers.

In the start() method, create a new GraphicsOverlay and add it to the mapView.

App.java
Expand
Use dark colors for code blocks
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
67
68
69
70
71
72
73
74
74
73
72
71
70
69
68
67
66
65
64
63
62
61
60
59
58
57
56
55
54
53
52
51
50
49
48
47
46
45
44
43
42
41
40
39
38
37
36
35
34
33
32
31
30
29
28
27
26
25
24
23
22
21
21
21
20
19
18
17
16
15
14
13
12
11
11
Add line.Add line.Add line.    // set the map on the map view
    mapView.setMap(map);
    mapView.setViewpoint(new Viewpoint(34.02700, -118.80543, 72223.819286));

    // create a graphics overlay and add it to the map view
    GraphicsOverlay graphicsOverlay = new GraphicsOverlay();
    mapView.getGraphicsOverlays().add(graphicsOverlay);
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.

Create a Point and a SimpleMarkerSymbol. To create the Point, provide longitude (x) and latitude (y) coordinates, and a SpatialReference. Use the SpatialReferences.getWgs84() convenience getter.

App.java
Expand
Use dark colors for code blocks
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
85
84
84
84
83
82
81
80
79
78
77
76
75
74
74
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.    // create a graphics overlay and add it to the map view
    GraphicsOverlay graphicsOverlay = new GraphicsOverlay();
    mapView.getGraphicsOverlays().add(graphicsOverlay);

    // create a point geometry with a location and spatial reference
    Point point = new Point(-118.80657463861, 34.0005930608889, SpatialReferences.getWgs84());
    // create an opaque orange (0xFFFF5733) point symbol with a blue (0xFF0063FF) outline symbol
    SimpleMarkerSymbol simpleMarkerSymbol =
      new SimpleMarkerSymbol(SimpleMarkerSymbol.Style.CIRCLE, 0xFFFF5733, 10);
    SimpleLineSymbol blueOutlineSymbol =
      new SimpleLineSymbol(SimpleLineSymbol.Style.SOLID, 0xFF0063FF, 2);

    simpleMarkerSymbol.setOutline(blueOutlineSymbol);

Expand

Create a Graphic with the point and simpleMarkerSymbol. Display the Graphic by adding it to the graphicsOverlay's graphics collection with getGraphics().

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

App.java
Expand
Use dark colors for code blocks
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
83
84
85
86
87
88
89
90
90
89
88
87
86
85
84
83
82
81
80
79
78
77
76
75
74
73
72
71
70
69
68
67
66
65
64
63
62
61
60
59
58
57
56
55
54
53
53
53
52
51
50
49
48
47
46
45
44
43
43
Add line.Add line.Add line.Add line.Add line.    simpleMarkerSymbol.setOutline(blueOutlineSymbol);

    // create a graphic with the point geometry and symbol
    Graphic pointGraphic = new Graphic(point, simpleMarkerSymbol);

    // add the point graphic to the graphics overlay
    graphicsOverlay.getGraphics().add(pointGraphic);
Expand

Run the app. Ensure to run the app as a Gradle task and not as an application in your IDE. In the Gradle tool window, under Tasks > application, click run.

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.

Polylines have one or more distinct parts. Each part is a sequence of points. For a continuous line, you can use the Polyline constructor to create a polyline with just one part. To create a polyline with more than one part, use a PolylineBuilder.

Create a Polyline and a SimpleLineSymbol.

To create the Polyline, create a new PointCollection with a SpatialReference and add new Points to it.

Polyline graphics support a number of symbol types such as SimpleLineSymbol and TextSymbol. Learn more about the symbols in the API documentation.

App.java
Expand
Use dark colors for code blocks
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
103
103
103
103
103
102
101
100
99
98
97
96
95
94
93
92
91
90
89
88
87
86
85
84
83
83
83
82
81
80
79
78
77
76
75
74
73
73
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.    // add the point graphic to the graphics overlay
    graphicsOverlay.getGraphics().add(pointGraphic);

    // create a point collection with a spatial reference, and add three points to it
    PointCollection polylinePoints = new PointCollection(SpatialReferences.getWgs84());
    polylinePoints.add(new Point(-118.821527826096, 34.0139576938577));
    polylinePoints.add(new Point(-118.814893761649, 34.0080602407843));
    polylinePoints.add(new Point(-118.808878330345, 34.0016642996246));
    // create a polyline geometry from the point collection
    Polyline polyline = new Polyline(polylinePoints);

    // create a blue line symbol for the polyline
    SimpleLineSymbol polylineSymbol =
      new SimpleLineSymbol(SimpleLineSymbol.Style.SOLID, 0xFF0063FF, 3);

Expand

Create a Graphic with the polyline and polylineSymbol. Display the Graphic by adding it to the graphicsOverlay's graphics collection with getGraphics().

App.java
Expand
Use dark colors for code blocks
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
99
100
101
102
103
104
105
106
107
108
108
107
106
105
104
103
102
101
100
99
98
97
96
95
94
93
92
91
90
89
89
89
88
87
86
85
84
83
82
81
80
79
79
Add line.Add line.Add line.Add line.Add line.    // create a blue line symbol for the polyline
    SimpleLineSymbol polylineSymbol =
      new SimpleLineSymbol(SimpleLineSymbol.Style.SOLID, 0xFF0063FF, 3);

    // create a polyline graphic with the polyline geometry and symbol
    Graphic polylineGraphic = new Graphic(polyline, polylineSymbol);

    // add the polyline graphic to the graphics overlay
    graphicsOverlay.getGraphics().add(polylineGraphic);
Expand

Run the app. Ensure to run the app as a Gradle task and not as an application in your IDE. In the Gradle tool window, under Tasks > application, click run.

You should see a point and a 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.

Polygons have one or more distinct parts. Each part is a sequence of points describing a closed boundary. For a single area with no holes, you can use the Polygon constructor to create a polygon with just one part. To create a polygon with more than one part, use a PolygonBuilder.

Create a Polygon and a SimpleFillSymbol. To create the Polygon, create a new PointCollection with a SpatialReference and add new Points to it.

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

App.java
Expand
Use dark colors for code blocks
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
123
123
123
123
122
122
122
121
120
119
118
117
116
115
114
113
112
112
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.    // add the polyline graphic to the graphics overlay
    graphicsOverlay.getGraphics().add(polylineGraphic);

    // create a point collection with a spatial reference, and add five points to it
    PointCollection polygonPoints = new PointCollection(SpatialReferences.getWgs84());
    polygonPoints.add(new Point(-118.818984489994, 34.0137559967283));
    polygonPoints.add(new Point(-118.806796597377, 34.0215816298725));
    polygonPoints.add(new Point(-118.791432890735, 34.0163883241613));
    polygonPoints.add(new Point(-118.795966865355, 34.0085648646355));
    polygonPoints.add(new Point(-118.808558110679, 34.0035027131376));
    // create a polygon geometry from the point collection
    Polygon polygon = new Polygon(polygonPoints);

    // create an orange fill symbol with 20% transparency and the blue simple line symbol
    SimpleFillSymbol polygonFillSymbol =
      new SimpleFillSymbol(SimpleFillSymbol.Style.SOLID, 0x80FF5733, blueOutlineSymbol);

Expand

Create a Graphic with the polygon and polygonSymbol. Display the Graphic by adding it to the graphicsOverlay's graphics collection with getGraphics().

App.java
Expand
Use dark colors for code blocks
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
119
120
121
122
123
124
125
126
127
127
127
127
127
127
127
127
127
127
127
127
127
127
127
Add line.Add line.Add line.Add line.    // create an orange fill symbol with 20% transparency and the blue simple line symbol
    SimpleFillSymbol polygonFillSymbol =
      new SimpleFillSymbol(SimpleFillSymbol.Style.SOLID, 0x80FF5733, blueOutlineSymbol);

    // create a polygon graphic from the polygon geometry and symbol
    Graphic polygonGraphic = new Graphic(polygon, polygonFillSymbol);
    // add the polygon graphic to the graphics overlay
    graphicsOverlay.getGraphics().add(polygonGraphic);
Expand

Run the app. Ensure to run the app as a Gradle task and not as an application in your IDE. In the Gradle tool window, under Tasks > application, click run.

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: