Skip To Content ArcGIS for Developers Sign In Dashboard

Overview

You will learn: how to display a web scene stored in ArcGIS Online with your ArcGIS Runtime app.

A web scene is a JSON structure that contains the settings required to display a 3D map. ArcGIS and custom applications can load web scenes and automatically configure the map extent, camera, basemap, layers and styles, labels and more. Web scenes can be created interactively with the Scene Viewer and ArcGIS Pro. Web scenes are stored in ArcGIS Online or ArcGIS Enterprise as an item with a unique ID.

In this tutorial, you will build an app that loads and displays a web scene.

Before you begin

Make sure you have installed the latest version of Xcode.

Reuse the starter project

If you have completed the Create a starter app tutorial, then copy the project into a new empty folder. Otherwise, download and unzip the project solution. Open the .xcodeproj file in Xcode. Run and verify the map displays in the device simulator.

Steps

Modify the project to display a scene (3D) instead of a map (2D)

  1. Open Main.storyboard in the Project Navigator. Drill down the View Controller Scene tree hierarchy in the Outline View until you reach Map View. Click on the Map View node to select it, and then click on it again to rename it to Scene View.

  2. With the scene view selected, in Xcode's app menu, select View > Inspectors > Show Identity Inspector and in the Identity Inspector (top-right), replace the existing Class attribute from AGSMapView to AGSSceneView.

  3. Open ViewController.swift in the Project Navigator. Change the map view outlet property declaration to scene view.

     /*** Change this ***/
     @IBOutlet weak var mapView: AGSMapView!
     /*** To this ***/
     @IBOutlet weak var sceneView: AGSSceneView!
    
  4. Switch back to Main.storyboard and right click on the yellow View Controller node in the Outline View. Disconnect the mapView outlet, and drag the sceneView outlet connector to the Scene View node to connect it.

Set the app settings

  1. Add a new swift file to your Xcode project named AppConfiguration. You will use this to hold configuration constants required by your app.

  2. Add the following extension to AppConfiguration.swift.

    /** ADD **/
    extension String {
        static let trails = "579f97b2f3b94d4a8e48a5f140a6639b"
    }
    

Add a web scene to the scene view

  1. Open ViewController.swift in the Project Navigator. Remove the setupMap() function completely and replace it with a new private function named setupScene().

    /*** ADD ***/
    private func setupScene() {
        // Build the trails portal item.
        let trailsWebScene: AGSPortalItem = {
            // Build a portal object using ArcGIS Online
            let portal = AGSPortal.arcGISOnline(withLoginRequired: false)
            //Build a portal item
            return AGSPortalItem(portal: portal, itemID: .trails)
        }()
        // Build a scene from portal item.
        sceneView.scene = AGSScene(item: trailsWebScene)
        // Load the configured scene.
        sceneView.scene?.load { (error) in
            if let error = error {
                print(error.localizedDescription)
            }
        }
    }
    
  2. Replace the call to setupMap() with setupScene() in viewDidLoad().

     override func viewDidLoad() {
         super.viewDidLoad()
    
         /*** Change this ***/
         setupMap()
         /*** To this ***/
         setupScene()
    
  3. Press Command-R to run the app in the iOS Simulator.

    (Note, as of 100.8 Runtime supports Metal. In order to run your app in a simulator you must meet some minimum requirements. You must be developing on macOS Catalina, using Xcode 11, and simulating iOS 13.)

Congratulations, you're done!

Your app should display a map that looks like this. Compare your application to our completed solution project to verify it is working correctly.

Challenge

Load other web scenes

Use the search tools in ArcGIS Online to locate other web scenes. Replace the web scene id in your code to load them in your app. Better yet, complete the Create a web scene tutorial and then display your own web scene!

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.