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

Before starting this tutorial:

You need an ArcGIS Location Platform or ArcGIS Online account.
Your system meets the system requirements.

Steps

Open the Xcode project

To start the tutorial, complete the Display a map tutorial or download and unzip the solution.
Open the .xcodeproj file in Xcode.
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 Xcode, in the Project Navigator, click MainApp.swift.
3. In the Editor, set the ArcGISEnvironment.apiKey property on the ArcGISEnvironment with your access token.
  MainApp.swift
  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 init() { ArcGISEnvironment.apiKey = APIKey("<#YOUR-ACCESS-TOKEN#>") }
  Expand
  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 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 Xcode, in the Project navigator, click ContentView.swift.
Create a class called Model that adopts the ObservableObject protocol. Within that class, create a GraphicsOverlay as a default value. Initialize the property with an empty initializer and return it. You'll edit this method at a later step to add all of the graphics to display.
ContentView.swift
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 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 24 25 26 27 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28 28
Add line.Add line.Add line.Add line.Add line.Add line.Add line.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
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
import SwiftUI
import ArcGIS


private class Model: ObservableObject {
    let graphicsOverlay: GraphicsOverlay = {
        let graphicsOverlay = GraphicsOverlay()

        return graphicsOverlay

    }()
}
```
The Model class must conform to type ObservableObject. See the ObservableObject documentation for more information.

Create a @StateObject of type Model called graphicsOverlayModel in the ContentView.

ContentView.swift
Expand
Use dark colors for code blocks
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
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
28
28
28
28
28
29
30
31
32
33
34
35
36
37
38
38
38
38
38
38
38
39
Add line.struct ContentView: View {

    @State private var map: Map = {
        let map = Map(basemapStyle: .arcGISTopographic)
        map.initialViewpoint = Viewpoint(latitude: 34.02700, longitude: -118.80500, scale: 72_000)
        return map
    }()

    @StateObject private var graphicsOverlayModel = Model()

}

In the body, update the map view initializer by adding the graphicsOverlays parameter. Pass in the graphicsOverlayModel's graphicOverlay property to add the graphics overlay created in the previous steps to the map view's list of graphics overlays.

ContentView.swift
Expand
Use dark colors for code blocks
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
63
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
28
28
28
28
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
Change linestruct ContentView: View {

    @State private var map: Map = {
        let map = Map(basemapStyle: .arcGISTopographic)
        map.initialViewpoint = Viewpoint(latitude: 34.02700, longitude: -118.80500, scale: 72_000)
        return map
    }()

    @StateObject private var graphicsOverlayModel = Model()

    var body: some View {

        MapView(map: map, graphicsOverlays: [graphicsOverlayModel.graphicsOverlay])

    }

}

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 SpatialReference.wgs84 convenience method. Create and style a SimpleMarkerSymbol.

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

Expand
Use dark colors for code blocks
19
19
19
19
19
19
19
19
19
19
19
19
19
19
19
19
19
19
19
20
21
22
23
24
25
26
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
27
28
29
30
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
31
Add line.Add line.Add line.Add line.private class Model: ObservableObject {
    let graphicsOverlay: GraphicsOverlay = {
        let graphicsOverlay = GraphicsOverlay()

        let point = Point(x: -118.80657, y: 34.00059, spatialReference: .wgs84)
        let pointSymbol = SimpleMarkerSymbol(style: .circle, color: .orange, size: 10.0)
        pointSymbol.outline = SimpleLineSymbol(style: .solid, color: .blue, width: 2.0)

        return graphicsOverlay

    }()
}
Expand

Create a Graphic with the point and pointSymbol. Display the Graphic by adding it to the graphicsOverlay using the GraphicsOverlay.addGraphic() method.

Expand
Use dark colors for code blocks
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
24
25
26
27
28
29
30
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
3
3
3
3
3
3
3
3
3
3
3
3
3
3
3
3
3
3
3
3
3
3
Add line.Add line.Add line.        let point = Point(x: -118.80657, y: 34.00059, spatialReference: .wgs84)
        let pointSymbol = SimpleMarkerSymbol(style: .circle, color: .orange, size: 10.0)
        pointSymbol.outline = SimpleLineSymbol(style: .solid, color: .blue, width: 2.0)

        let pointGraphic = Graphic(geometry: point, symbol: pointSymbol)

        graphicsOverlay.addGraphic(pointGraphic)
Expand

Press Command + R to run the app.

If you are using the Xcode simulator your system must meet these minimum requirements: macOS Monterey 12.5, Xcode 15, iOS 17. If you are using a physical device, then refer to the system requirements.

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, provide an array of Point objects. Create and style a SimpleLineSymbol.

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

Expand
Use dark colors for code blocks
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
30
31
32
33
34
35
36
37
38
39
40
40
40
40
39
38
37
36
35
34
33
32
31
30
29
28
27
26
25
25
25
25
25
25
25
25
25
25
25
25
25
25
25
25
25
25
25
25
25
25
25
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.        graphicsOverlay.addGraphic(pointGraphic)

        let polyline = Polyline(
            points: [
                Point(x: -118.82152, y: 34.01395, spatialReference: .wgs84),
                Point(x: -118.81489, y: 34.00806, spatialReference: .wgs84),
                Point(x: -118.80887, y: 34.00166, spatialReference: .wgs84)
            ]
        )
        let polylineSymbol = SimpleLineSymbol(style: .solid, color: .blue, width: 3.0)

Expand

Create a Graphic with the polyline and polylineSymbol. Display the Graphic by adding it to the graphicsOverlay using the GraphicsOverlay.addGraphic() method.

Expand
Use dark colors for code blocks
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
32
33
34
35
36
37
38
39
40
41
42
43
43
42
41
40
39
38
37
36
35
34
33
32
31
30
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
29
Add line.Add line.Add line.        let polyline = Polyline(
            points: [
                Point(x: -118.82152, y: 34.01395, spatialReference: .wgs84),
                Point(x: -118.81489, y: 34.00806, spatialReference: .wgs84),
                Point(x: -118.80887, y: 34.00166, spatialReference: .wgs84)
            ]
        )
        let polylineSymbol = SimpleLineSymbol(style: .solid, color: .blue, width: 3.0)

        let polylineGraphic = Graphic(geometry: polyline, symbol: polylineSymbol)

        graphicsOverlay.addGraphic(polylineGraphic)
Expand

Press Command + R to run the app.

If you are using the Xcode simulator your system must meet these minimum requirements: macOS Monterey 12.5, Xcode 15, iOS 17. If you are using a physical device, then refer to the system requirements.

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.

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, provide an array of Point objects. Create and style a SimpleFillSymbol.

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

Expand
Use dark colors for code blocks
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
43
44
45
46
47
48
49
50
51
52
53
54
55
55
55
55
56
56
56
56
56
56
56
56
56
56
56
56
56
56
56
56
56
56
56
56
56
56
Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.        graphicsOverlay.addGraphic(polylineGraphic)

        let polygon = Polygon(
            points: [
                Point(x: -118.81898, y: 34.01375, spatialReference: .wgs84),
                Point(x: -118.80679, y: 34.02158, spatialReference: .wgs84),
                Point(x: -118.79143, y: 34.01638, spatialReference: .wgs84),
                Point(x: -118.79596, y: 34.00856, spatialReference: .wgs84),
                Point(x: -118.80855, y: 34.00350, spatialReference: .wgs84)
            ]
        )
        let polygonSymbol = SimpleFillSymbol(style: .solid, color: .orange, outline: SimpleLineSymbol(style: .solid, color: .blue, width: 2.0))

        return graphicsOverlay
Expand

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

Expand
Use dark colors for code blocks
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
59
59
59
59
59
59
59
59
59
59
59
59
59
59
59
59
59
59
59
59
59
Add line.Add line.        graphicsOverlay.addGraphic(polylineGraphic)

        let polygon = Polygon(
            points: [
                Point(x: -118.81898, y: 34.01375, spatialReference: .wgs84),
                Point(x: -118.80679, y: 34.02158, spatialReference: .wgs84),
                Point(x: -118.79143, y: 34.01638, spatialReference: .wgs84),
                Point(x: -118.79596, y: 34.00856, spatialReference: .wgs84),
                Point(x: -118.80855, y: 34.00350, spatialReference: .wgs84)
            ]
        )
        let polygonSymbol = SimpleFillSymbol(style: .solid, color: .orange, outline: SimpleLineSymbol(style: .solid, color: .blue, width: 2.0))

        let polygonGraphic = Graphic(geometry: polygon, symbol: polygonSymbol)
        graphicsOverlay.addGraphic(polygonGraphic)

        return graphicsOverlay
Expand

Press Command + R to run the app.

If you are using the Xcode simulator your system must meet these minimum requirements: macOS Monterey 12.5, Xcode 15, iOS 17. If you are using a physical device, then refer to the system requirements.

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: