Add a point, line, and polygon

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

add a point line and polygon

You typically use 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 , , and .

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

Prerequisites

Before starting this tutorial:

  1. You need an ArcGIS Location Platform or ArcGIS Online account.

  2. Your system meets the system requirements.

Develop or Download

To complete this tutorial you have 2 options:

  1. Option 1: Develop the code or
  2. 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 . You can choose to implement either or .

Continue with the following instructions to display a point, line, and polygon in the map.

Add a graphics overlay

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

  1. In Xcode, in the Project navigator, click ContentView.swift.

  2. 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
    16 17 18 19 20 21 22 23 24 25 26 27 28
    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
    
        }()
    }
    
    
  3. Create a @StateObject of type Model called graphicsOverlayModel in the ContentView.

    ContentView.swift
    Expand
    29 30 31 32 33 34 35 36 37 38 39
    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
    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()
    
    }
  4. 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
    29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
    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
    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()
    
        var body: some View {
    
            MapView(map: map, graphicsOverlays: [graphicsOverlayModel.graphicsOverlay])
    
        }
    
    }

Add a point graphic

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

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

    Expand
    20 21 22 23 24 25 26 27 28 29 30 31
    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
    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
  2. Create a Graphic with the point and pointSymbol. Display the Graphic by adding it to the graphicsOverlay using the GraphicsOverlay.addGraphic() method.

    Expand
    24 25 26 27 28 29 30
    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
            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
  3. Press Command + R to run the app.

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

Add a line graphic

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

  1. Create a Polyline and a SimpleLineSymbol. To create the Polyline, provide an array of Point objects. Create and style a SimpleLineSymbol.

    Expand
    30 31 32 33 34 35 36 37 38 39 40
    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
            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
  2. Create a Graphic with the polyline and polylineSymbol. Display the Graphic by adding it to the graphicsOverlay using the GraphicsOverlay.addGraphic() method.

    Expand
    32 33 34 35 36 37 38 39 40 41 42 43
    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
            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
  3. Press Command + R to run the app.

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

Add a polygon graphic

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

  1. Create a Polygon and a SimpleFillSymbol. To create the Polygon, provide an array of Point objects. Create and style a SimpleFillSymbol.

    Expand
    43 44 45 46 47 48 49 50 51 52 53 54 55 56
    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
            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
  2. Create a Graphic with the polygon and polygonSymbol. Display the Graphic by adding it to the graphicsOverlay's GraphicsOverlay.graphics collection.

    Expand
    43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59
    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
            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.

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

  1. Click the Download solution link under Solution and unzip the file to a location on your machine.

  2. 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 used in this tutorial, you must implement or using an or an account.

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

  1. Complete the Create an API key tutorial and create an API key with the following :

    • Privileges
      • Location services > Basemaps
  2. 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 , pass the developer credentials that you created in the Set up authentication step to the application's ArcGISEnvironment.

Pass your API Key access token to the ArcGISEnvironment.

  1. In the Project Navigator, click MainApp.swift.

  2. Set the AuthenticationMode to .apiKey.

    MainApp.swift
    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
        // Change the `AuthenticationMode` to `.apiKey` if your application uses API key authentication.
    
        private var authenticationMode: AuthenticationMode { .apiKey }
    
    
  3. Set the apiKey property with your API key access token.

    MainApp.swift
    Expand
    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
        // 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. In a production environment we do not recommend that you store it directly in source code.

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:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close