Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

You will learn: how to build an app to load and display a 3D web scene from ArcGIS Online.

Applications can load and display 3D web scenes that have been previously created with the Scene Viewer or ArcGIS Pro. Web scenes contain all of the settings required to set up the scene such as the camera viewpoint, basemap, layers and styles, labels, elevation source, and more. Web scenes are stored as items on ArcGIS Online or ArcGIS Enterprise portals. Web scenes are loaded by accessing a portal and requesting an item by its ID. All of the settings are applied to the scene and layers when the item is loaded, saving you time from having to set them up yourself. Learn more about working with web scenes in the Create a web scene tutorial or by using ArcGIS Pro.

In this tutorial, you will build an app that loads and displays a pre-configured web scene stored in ArcGIS Online.

Before you begin

You must have previously installed the ArcGIS Runtime SDK for Qt and set up the development environment for your operating system.

Steps

Preview the web scene

  1. Go to the LA Trails and Parks Scene to view the scene in the Scene Viewer. Make note of the ID at the end of the URL.

Create a new (3D) ArcGIS Runtime App Qt Creator Project

  1. Start Qt Creator.

  2. Choose the ArcGIS Runtime Qt Quick C++ project template.

  3. Give your app a name. For this tutorial we chose display_a_web_scene, but you can choose any name that suits you. Click Next.

  4. On the Define Project Details dialog, click the checkbox 3D project. Leave all the other settings as they are and click Continue.

  5. On the Kit Selection dialog, choose one of the kits you previously setup when you installed the Qt Framework. Click Next.

  6. Verify your selections and click Done.

Edit header statements

  1. In Projects, double click on Sources > display_a_web_scene.cpp and comment out the two include statements as shown next. The elevation source and basemap do not need to be configured in the code; they are defined in the web scene itself.

    #include "display_a_web_scene.h"
    
    // *** UPDATE **
    // #include "ArcGISTiledElevationSource.h"
    // #include "Basemap.h"
    

Modify the app to accept a URL and portal item ID

  1. Comment out the code that creates a new Scene from a basemap in the initializer list.

     // *** UPDATE ***
     // QObject(parent),
     // m_scene(new Scene(Basemap::topographic(this), this))
    
  2. Comment out the existing code in the constructor body. This app will not use an elevation source, but instead the elevation source is configured with the portal item (a web scene).

     // *** UPDATE ***
     // ArcGISTiledElevationSource* elevationSource = new ArcGISTiledElevationSource(
     //            QUrl("https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"), this);
     // m_scene->baseSurface()->elevationSources()->append(elevationSource);
    
  3. Add the following code to the constructor body to create m_scene from a portal item. The portal item is constructed using a URL and a portal item ID (scene_id below).

     // *** ADD ***
     const QString scene_id("579f97b2f3b94d4a8e48a5f140a6639b");
     const QUrl websceneUrl(QString("https://arcgis.com/sharing/rest/content/items/" + scene_id));
     m_scene = new Scene(websceneUrl, this);
    
  4. Run your app to test your code. When the app opens, you should see some trails of Los Angeles displayed in a scene.

Congratulations, you're done!

Compare your scene with our completed solution project.

Challenge

Explore other web scenes

ArcGIS Online contains thousands of public web maps and scenes that can be loaded by applications. Go to ArcGIS Online and search for web scenes around Los Angeles. Feel free to search for any topic of interest. When you find a scene you like, open it in the Scene Viewer and copy the ID (HINT: Look at the end of the URL) and paste it into this application. Run the application to view the scene in your app.

Change the displayed web scene at run time

Add a control that allows the user to select from a list of available web scenes when the app is running. Display the selected web scene in your app.