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 selected point, or showing the location of map coordinates entered by the user. 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.

Develop or Download

You have two options for completing this tutorial:

Option 1: Develop the code or
Option 2: Download the completed solution

Option 1: Develop the code

To start the tutorial, complete the Display a map tutorial. This creates a map to display the Santa Monica Mountains in California using the topographic basemap from the ArcGIS basemap styles service.

Open an Xcode project

Open the .xcodeproj project you created by completing the Display a map tutorial.
Continue with the following instructions to display a point, line, and polygon in the map.

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 14 (Sonoma), Xcode 16, iOS 18. 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 14 (Sonoma), Xcode 16, iOS 18. 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

Run the solution

Press Command + R to run the app.

If you are using the Xcode simulator your system must meet these minimum requirements: macOS 14 (Sonoma), Xcode 16, iOS 18. 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.

Alternatively, you can download the tutorial solution, as follows.

Option 2: Download the solution

Click the Download solution link under Solution and unzip the file to a location on your machine.
Open the .xcodeproj file in Xcode.

Since the downloaded solution does not contain authentication credentials, you must first set up authentication to create credentials, and then add the developer credentials to the solution.

Set up authentication

To access the secure ArcGIS location services used in this tutorial, you must implement API key authentication or user authentication using an ArcGIS Location Platform or an ArcGIS Online account.

You can implement API key authentication or user authentication in this tutorial. Compare the differences below:

API key authentication

Users are not required to sign in.
Requires creating an API key credential with the correct privileges.
API keys are long-lived access tokens.
Service usage is billed to the API key owner/developer.
Simplest authentication method to implement.
Recommended approach for new ArcGIS developers.

Learn more in API key authentication.

User authentication

Users are required to sign in with an ArcGIS account.
User accounts must have privilege to access the ArcGIS services used in application.
Requires creating OAuth credentials.
Application uses a redirect URL and client ID.
Service usage is billed to the organization of the user signed into the application.

Learn more in User authentication.

Create a new API key access token with privileges to access the secure resources used in this tutorial.

Complete the Create an API key tutorial and create an API key with the following privilege(s):
- Privileges
  - Location services > Basemaps
Copy and paste the API key access token into a safe location. It will be used in a later step.

Set developer credentials in the solution

To allow your app users to access ArcGIS location services, use the developer credentials that you created in the Set up authentication step to authenticate requests for resources.

Pass your API Key access token to the ArcGISEnvironment.

In the Project Navigator, click MainApp.swift.

Set the AuthenticationMode to .apiKey.

MainApp.swift
Use dark colors for code blocks
    // Change the `AuthenticationMode` to `.apiKey` if your application uses API key authentication.

    private var authenticationMode: AuthenticationMode { .apiKey }

Set the apiKey property with your API key access token.

MainApp.swift
Expand
Use dark colors for code blocks
    // Please enter an API key access token if your application uses API key authentication.

    private let apiKey = APIKey("<#YOUR-ACCESS-TOKEN#>")

Expand

Best Practice: The access token is stored directly in the code as a convenience for this tutorial. Do not store credentials directly in source code in a production environment.

Use the Authenticator toolkit component to manage your OAuth credentials and pass it to the ArcGISEnvironment.

In the Project Navigator, click MainApp.swift.

Set the AuthenticationMode to .user.

MainApp.swift
Use dark colors for code blocks
// Change the `AuthenticationMode` to `.user` if your application uses OAuth credentials.

    private var authenticationMode: AuthenticationMode { .user }

Set your portalURL, clientID and redirectURL values.

MainApp.swift
Expand
Use dark colors for code blocks
    // Setup an `Authenticator` with OAuth configuration if your application uses OAuth credentials.
    @ObservedObject var authenticator = Authenticator(
        oAuthUserConfigurations: [
            OAuthUserConfiguration(

                // Please enter OAuth credentials for user authentication.

                portalURL: URL(string: "<#YOUR-PORTAL-URL#>")!,
                clientID: "<#YOUR-CLIENT-ID#>",
                redirectURL: URL(string: "<#YOUR-REDIRECT-URL#>")!

            )
        ]
    )
Expand

Best Practice: The OAuth credentials are stored directly in the code as a convenience for this tutorial. Do not store credentials directly in source code in a production environment.

Run the solution

Press Command + R 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: