Display a web scene

Learn how to create and display a scene from a web scene stored in ArcGIS.

display a web scene

This tutorial shows you how to create and display a scene from a web scene. All web scenes are stored in ArcGIS with a unique item ID. You will access an existing web scene by item ID and display its layers. The web scene contains feature layers for the Santa Monica Mountains in California.

Prerequisites

The following are required for this tutorial:

  1. An ArcGIS account to access API keys. If you don't have an account, sign up for free.
  2. Your system meets the system requirements.
  3. The ArcGIS Runtime API for Qt is installed.

Choose your API

You can do this tutorial in C++ or QML. Make your selection:

Steps for C++

Open the project in Qt Creator

  1. To start this tutorial, complete the Display a scene tutorial or download and unzip the solution.

  2. Open the display_a_scene project in Qt Creator.

  3. If you downloaded the Display a scene solution, set your API key.

    An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.

    1. Go to your developer dashboard to get your API key. For these tutorials, use your default API key. It is scoped to include all of the services demonstrated in the tutorials.

    2. In the Projects window, in the Sources folder, open the main.cpp file.

    3. Modify the code to set the API key. Paste the API key, acquired from your dashboard, between the quotes.

      main.cpp
      Expand
      Use dark colors for code blocks
      48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 49 50 51 52 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53
      Change 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
        // 2. API key: A permanent key that gives your application access to Esri
        // location services. Create a new API key or access existing API keys from
        // your ArcGIS for Developers dashboard (https://links.esri.com/arcgis-api-keys).
      
        const QString apiKey = QStringLiteral("");
      
      Expand

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 LA Trails and Parks web scene in the Scene Viewer in ArcGIS Online. This web scene displays trails, trailheads and parks in the Santa Monica Mountains.
  2. Make a note of the item ID at the end of the browser's URL. The item ID should be 579f97b2f3b94d4a8e48a5f140a6639b

Remove unneeded code

A web scene can define all of the content created in this code, such as the basemap, elevation layer, and initial viewpoint. Accordingly, the following code needs to be removed or changed.

  1. In Projects, double-click Sources > Display_a_scene.cpp to open the file.

  2. Delete the following lines to remove the Camera object and all of its arguments.

    Display_a_scene.cpp
    Use dark colors for code blocks
    41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 41 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
    Remove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove 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
    // Set the view (created in QML)
    void Display_a_scene::setSceneView(SceneQuickView* sceneView)
    {
      if (!sceneView || sceneView == m_sceneView)
      {
        return;
      }
      m_sceneView = sceneView;
      m_sceneView->setArcGISScene(m_scene);
    
      constexpr double latitude = 33.909;
      constexpr double longitude = -118.805;
      constexpr double altitude = 5330.0;
      constexpr double heading = 355.0;
      constexpr double pitch = 72.0;
      constexpr double roll = 0.0;
      const Camera sceneCamera(latitude, longitude, altitude, heading, pitch, roll);
      m_sceneView->setViewpointCameraAndWait(sceneCamera);
    
  3. Change the constructor to avoid initializing m_scene with the BasemapStyle enum. Make the constructor match the following code.

    Display_a_scene.cpp
    Use dark colors for code blocks
    21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 21 22 23 24 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25 25
    Change 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
    using namespace Esri::ArcGISRuntime;
    Display_a_scene::Display_a_scene(QObject* parent /* = nullptr */):
    
        QObject(parent)
    
  4. Remove all of the existing code from the setupScene method.

    Display_a_scene.cpp
    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 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 63 64 65 66 67 68 69 70 71 72 73 74 75
    Remove lineRemove lineRemove lineRemove lineRemove 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
    void Display_a_scene::setupScene()
    {
    
      ArcGISTiledElevationSource* elevationSource = new ArcGISTiledElevationSource(QUrl("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"), this);
    
      Surface* elevationSurface = new Surface(this);
      elevationSurface->elevationSources()->append(elevationSource);
    
      elevationSurface->setElevationExaggeration(2.5);
      m_scene->setBaseSurface(elevationSurface);
    
    }

    Loading a scene from a web scene usually requires less code and makes it easier to update a scene used by several apps. Furthermore, web scenes can provide a more consistent experience for your user.

Display a web scene using its portal item URL

You can display a web scene using the web scene's item ID. Create a scene from the web scene portal item, and display it in your app.

  1. Add code to the setupScene method to create the web scene portal URL. Concatenate the web scene's unique item ID and the URL for ArcGIS Online.

    Display_a_scene.cpp
    Expand
    Use dark colors for code blocks
    52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 53 54 55 56 57 58 59 60 60 60 59 59
    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
    void Display_a_scene::setupScene()
    {
    
        // Create an item_id to reference an item at a web server
        const QString item_id("579f97b2f3b94d4a8e48a5f140a6639b");
        // Create a QUrl from the web scene server URL and the item_id
        const QUrl portal_url(QString("https://arcgis.com/sharing/rest/content/items/" + item_id));
    
    
    Expand
  2. Create the Scene using the web scene's URL.

    Display_a_scene.cpp
    Expand
    Use dark colors for code blocks
    52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 53 54 55 56 57 58 59 60 61 62 62 62
    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
    void Display_a_scene::setupScene()
    {
    
        // Create an item_id to reference an item at a web server
        const QString item_id("579f97b2f3b94d4a8e48a5f140a6639b");
        // Create a QUrl from the web scene server URL and the item_id
        const QUrl portal_url(QString("https://arcgis.com/sharing/rest/content/items/" + item_id));
    
        // Create the scene, referencing the QUrl
        m_scene = new Scene(portal_url, this);
    
    Expand
  3. Press <Ctrl+R> to run the app.

Your app displays the scene that you viewed earlier in the Scene Viewer.

Steps for Qml

Open the project in Qt Creator

  1. To start this tutorial, complete the Display a scene tutorial or download and unzip the solution.

  2. Open the display_a_scene project in Qt Creator.

  3. If you downloaded the Display a scene solution, set your API key.

    An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.

    1. Go to your developer dashboard to get your API key. For these tutorials, use your default API key. It is scoped to include all of the services demonstrated in the tutorials.

    2. In the Projects window, in the Sources folder, open the main.cpp file.

    3. Modify the code to set the API key. Paste the API key, acquired from your dashboard, between the quotes.

      main.cpp
      Expand
      Use dark colors for code blocks
      48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 48 49 50 51 52 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53 53
      Change 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
        // 2. API key: A permanent key that gives your application access to Esri
        // location services. Create a new API key or access existing API keys from
        // your ArcGIS for Developers dashboard (https://links.esri.com/arcgis-api-keys).
      
        const QString apiKey = QStringLiteral("");
      
      Expand

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 LA Trails and Parks web scene in the Scene Viewer in ArcGIS Online. This web scene displays trails, trailheads and parks in the Santa Monica Mountains.
  2. Make a note of the item ID at the end of the browser's URL. The item ID should be 579f97b2f3b94d4a8e48a5f140a6639b

Remove unneeded code

A web scene can define all of the content created in this code, such as the basemap style, elevation layer, and initial viewpoint. Accordingly, the following code needs to be removed or changed.

  1. If the main.qml file is not already open, in the Projects window, navigate to Resources > qml\qml.qrc > /qml and open main.qml.

  2. Delete the code that sets the BasemapStyle enum for the Scene. At the same time, delete the Surface created using the ArcGIS image server.

    main.qml
    Expand
    Use dark colors for code blocks
    26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40 40
    Remove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove 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
            // add a Scene to the SceneView
            Scene {
    
                // add the ArcGISImagery basemap to the scene
                initBasemapStyle: Enums.BasemapStyleArcGISImageryStandard
    
    
                // add a surface, surface is a default property of scene
                Surface {
                    // add an arcgis tiled elevation source...elevation source is a default property of surface
                    ArcGISTiledElevationSource {
                        url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
                    }
                }
    
    Expand
  3. Delete the code that sets the ViewPoint on Camera.

    main.qml
    Use dark colors for code blocks
    43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 43 44 45 46 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47 47
    Remove lineRemove lineRemove lineRemove 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
            Component.onCompleted: {
                // set viewpoint to the specified camera
                setViewpointCameraAndWait(camera);
            }
    
  4. Remove the Camera.

    main.qml
    Use dark colors for code blocks
    50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 51 52 53 54 55 56 57 58 59 60 61 62 63 63 63
    Remove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove lineRemove 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
        Camera {
            id: camera
            heading: 355.0
            pitch: 72.0
            roll: 0.0
    
            Point {
                x: -118.794
                y: 33.909
                z: 5330.0
                spatialReference: SpatialReference { wkid: 4326 }
            }
        }
    

    Loading a scene from a web scene usually requires less code and makes it easier to update a scene used by several apps. Furthermore, web scenes can provide a more consistent experience for your user.

Display a web scene using its portal item ID

You can display a web scene using the web scene's item ID. Create a scene from the web scene portal item, and display it in your app.

  1. Create the Scene using a PortalItem and set the itemId to the ID for the LA Trails and Parks web scene. This code creates a Scene from the web scene configuration.

    main.qml
    Expand
    Use dark colors for code blocks
    26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 26 27 28 29 30 31 32 33 33 33 33 33 33 33
    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
            // add a Scene to the SceneView
            Scene {
    
                // Declare a PortalItem by setting Item ID. PortalItem is a default property of Scene.
                PortalItem {
                    itemId: "579f97b2f3b94d4a8e48a5f140a6639b"
                }
    
    Expand
  2. Press <Ctrl+R> to run the app.

Your app displays the scene that you viewed earlier in the Scene Viewer.

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.