Display a viewshed

Learn how to perform and display a viewshed analysis in a 3D scene.

display a viewshed

Viewshed analysis determines the visibility of terrain, buildings, and other 3D objects from an observer's location within a scene (using a specified field of view). The result indicates which areas are visible and which are obstructed when viewed from the observer's perspective.

In this tutorial, you will perform and display a viewshed analysis in a web scene. Your viewshed analysis will show visibility (visible or obstructed) and can be used to determine which hotspots in the Yosemite Valley are visible from a specified observer's perspective.

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 web scene tutorial. This creates a scene to display the trails, trailheads, and parks in the Santa Monica Mountains. You can choose to implement either API key authentication or user authentication.

Continue with the following instructions to perform and display a viewshed analysis in a 3D scene.

Get the web scene item ID

You can use ArcGIS tools to create and view web scenes. Use the Scene Viewer to identify the web scene item ID. This item ID will be used later in the tutorial.

  1. Go to the Yosemite Valley Hotspots web scene in the Scene Viewer in ArcGIS Online. This web scene displays terrain and hotspots in the Yosemite Valley.
  2. Make a note of the item ID at the end of the browser's URL. The item ID should be 7558ee942b2547019f66885c44d4f0b1.

Update the scene

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

  2. In the editor, modify the scene variable to create a Scene for the web scene. To do this, create a portal item providing the web scene's item ID and a Portal referencing ArcGIS Online.

    ContentView.swift
    Use dark colors for code blocks
    65 66 67 68 69 70 71 72 73 74
    Change lineChange lineChange lineChange 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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
        // The Yosemite Valley hotspots scene.
        @State private var scene: ArcGIS.Scene = {
    
            let portalItem = PortalItem(
                portal: .arcGISOnline(connection: .anonymous),
                id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
            )
    
            return Scene(item: portalItem)
        }()
    

Create a viewshed analysis

Visual analyses are used to help you make sense of complex 3D data contained by a scene. Use a LocationViewshed to perform and display a viewshed analysis using a 3D point to define the observer's location.

  1. Create a private class named Model of type ObservableObject and an accompanying State Object reference in the ContentView struct. See the programming patterns page for more information on how to manage states.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    import SwiftUI
    import ArcGIS
    
    private class Model: ObservableObject {
    
    }
    
    struct ContentView: View {
    
        // An ObservableObject containing the scene, graphics overlay, and analysis overlay.
        @StateObject private var model = Model()
    
        // The Yosemite Valley hotspots scene.
        @State private var scene: ArcGIS.Scene = {
    
            let portalItem = PortalItem(
                portal: .arcGISOnline(connection: .anonymous),
                id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
            )
    
            return Scene(item: portalItem)
        }()
    
    Expand
  2. Create an AnalysisOverlay named analysisOverlay to contain and display the viewshed analyses.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    19 20 21 22 23 24
    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    private class Model: ObservableObject {
    
        // The analysis overlay to be added to the scene.
        let analysisOverlay = AnalysisOverlay()
    
    }
    
    Expand
  3. Create a private LocationViewshed named viewshed.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    19 20 21 22 23 24 25 26
    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    private class Model: ObservableObject {
    
        // The analysis overlay to be added to the scene.
        let analysisOverlay = AnalysisOverlay()
    
        let viewshed: LocationViewshed
    
    }
    
    Expand
  4. Create a Double variable named maxDistance to track the viewshed's maximum distance. Set the viewshed's maxDistance property to the model's maxDistance property in a didSet observer to update the maximum distance when needed.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    19 20 21 22 23 24 25 26 27 28 29 30 31 32
    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    private class Model: ObservableObject {
    
        // The analysis overlay to be added to the scene.
        let analysisOverlay = AnalysisOverlay()
    
        let viewshed: LocationViewshed
    
        var maxDistance: Double {
            didSet {
                viewshed.maxDistance = maxDistance
            }
        }
    
    }
    
    Expand
  5. In init(), initialize all of the properties, make the viewshed not visible upon launch, and add the viewshed to the analysis overlay.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    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
    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.
    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
    private class Model: ObservableObject {
    
        // The analysis overlay to be added to the scene.
        let analysisOverlay = AnalysisOverlay()
    
        let viewshed: LocationViewshed
    
        var maxDistance: Double {
            didSet {
                viewshed.maxDistance = maxDistance
            }
        }
    
        init() {
            self.viewshed = LocationViewshed(
                location: Point(latitude: 0, longitude: 0),
                heading: 0,
                pitch: 90,
                horizontalAngle: 360,
                verticalAngle: 180,
                minDistance: 10,
                maxDistance: 12_000
            )
            viewshed.isVisible = false
            analysisOverlay.addAnalysis(viewshed)
            maxDistance = viewshed.maxDistance!
        }
    
    }
    
    Expand
  6. Define a private method named setViewshedLocation(point:) that receives a point as a parameter. This method is used to set the location of the viewshed and make it visible, if it is not visible already.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    47 48 49 50 51 52 53 54
    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
        func setViewshedLocation(point: Point) {
            viewshed.location = point
            if !viewshed.isVisible {
                viewshed.isVisible = true
            }
        }
    
    }
    
    Expand
  7. Define a private method named hideViewshed(). This method is used to hide the viewshed.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    47 48 49 50 51 52 53 54 55 56 57 58
    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
        func setViewshedLocation(point: Point) {
            viewshed.location = point
            if !viewshed.isVisible {
                viewshed.isVisible = true
            }
        }
    
        func hideViewshed() {
            viewshed.isVisible = false
        }
    
    }
    
    Expand

Display the viewshed analysis with touch events

Touch events determine where to place the observer for the viewshed analysis. A user will long-press and drag to reveal and move the observer's location.

  1. The first step to displaying the analyses is to add the analysis overlay to the scene view. In the ContentView struct, modify the scene view to add the model's analysis overlay.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    struct ContentView: View {
    
        // An ObservableObject containing the scene, graphics overlay, and analysis overlay.
        @StateObject private var model = Model()
    
        // The Yosemite Valley hotspots scene.
        @State private var scene: ArcGIS.Scene = {
    
            let portalItem = PortalItem(
                portal: .arcGISOnline(connection: .anonymous),
                id: Item.ID("7558ee942b2547019f66885c44d4f0b1")!
            )
    
            return Scene(item: portalItem)
        }()
    
        var body: some View {
    
            SceneView(scene: scene, analysisOverlays: [model.analysisOverlay])
    
        }
    
    }
  2. To add or move the viewshed analysis upon long press and drag, add the onLongPressGesture(perform:) method to the SceneView. In the closure, call the previously created setViewshedLocation(point:) method, passing in the scenePoint.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    76 77 78 79 80 81 82 83 84 85
    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
        var body: some View {
    
            SceneView(scene: scene, analysisOverlays: [model.analysisOverlay])
    
                .onLongPressGesture { _, scenePoint in
                    guard let scenePoint = scenePoint else { return }
                    model.setViewshedLocation(point: scenePoint)
                }
    
        }
    
    Expand

Add a UI to control the viewshed analysis

To control the viewshed analysis, some UI elements are required.

  1. Add a toolbar to the bottom of the scene view.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
        var body: some View {
    
            SceneView(scene: scene, analysisOverlays: [model.analysisOverlay])
    
                .onLongPressGesture { _, scenePoint in
                    guard let scenePoint = scenePoint else { return }
                    model.setViewshedLocation(point: scenePoint)
                }
    
                .toolbar {
                    ToolbarItemGroup(placement: .bottomBar) {
    
                    }
                }
    
        }
    
    Expand
  2. Add a Slider named slider to the toolbar with the model's maxDistance property as its value and 10...12_000 as the range. The slider changes the viewshed's maximum distance by expanding or contracting the size of the observer's field of view. The maximumValue and minimumValue properties define the range of values the user can select to calculate the viewshed. You set an action on the slider using a selector for a method that will be added in a later step.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    85 86 87 88 89 90 91 92
    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
                .toolbar {
                    ToolbarItemGroup(placement: .bottomBar) {
    
                        Slider(value: $model.maxDistance, in: 10...12_000)
                            .frame(width: 300)
    
                    }
                }
    
    Expand
  3. Lastly, create a toolbar and add a "Clear" button to reset the analysis overlay. The "Clear" button calls the previously created hideViewshed() method. This will allow users a fresh start to make more analyses.

    ContentView.swift
    Expand
    Use dark colors for code blocks
    85 86 87 88 89 90 91 92 93 94 95 96 97 98
    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
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
                .toolbar {
                    ToolbarItemGroup(placement: .bottomBar) {
    
                        Slider(value: $model.maxDistance, in: 10...12_000)
                            .frame(width: 300)
    
                        Spacer()
                        Button("Clear") {
                            // Resets the line of sight.
                            model.hideViewshed()
                        }
    
                    }
                }
    
    Expand

Run the solution

Press Command + R to run the app.

You should see a scene of hotspots in the Yosemite Valley. Long-press and drag to display and move a viewshed analysis to explore the visibility of terrain from various locations.

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

Create a new API key access token with privileges 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 privilege(s):

    • 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 ArcGIS location services, 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
    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
        // 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
    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
        // 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 scene of hotspots in the Yosemite Valley. Long-press and drag to display and move a viewshed analysis to explore the visibility of terrain from various locations.

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.