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 node selected, switch to the Identity Inspector tab in the Utilities Area. Change the class 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.

Add a web scene to the map

  1. Open ViewController.swift in the Project Navigator. Add a static url initialization closure to return the URL to the web scene hosted on ArcGIS Online. This references the web scene item ID and the portal hosting your content.

    class ViewController: UIViewController {
       /*** ADD ***/
       let webSceneItem: AGSPortalItem = {
          // Specify the item ID of the portal web scene.
          let webSceneItemID = "579f97b2f3b94d4a8e48a5f140a6639b"
          // Build a URL to ArcGIS Online
          let arcGISOnlineURL = URL(string: "https://www.arcgis.com")!
          // Build a portal object using ArcGIS Online
          let arcGISOnline = AGSPortal(url: arcGISOnlineURL, loginRequired: false)
          //Build a portal item
          let webSceneItem = AGSPortalItem(portal: arcGISOnline, itemID: webSceneItemID)
          return webSceneItem
       }()
    
  2. Remove the setupMap() function completely and replace it with a new private function named setupScene().

    /*** ADD ***/
    private func setupScene() {
        // Build a scene from portal item.
        sceneView.scene = AGSScene(item: webSceneItem)
        // Load the configured scene.
        sceneView.scene?.load(completion: { (error) in
            if let error = error {
                print(error.localizedDescription)
            }
        })
    }
    
  3. Replace the call to setupMap() with setupScene() in viewDidLoad().

     override func viewDidLoad() {
         super.viewDidLoad()
    
         /*** Change this ***/
         setupMap()
         /*** To this ***/
         setupScene()
    
  4. Press Command-R to run the app in the iOS Simulator. (Note, the simulator does not provide good performance for interacting with the 3D scene. For best experience, run the app on a physical device.)

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.