Display a web scene

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

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 features layers for the Santa Monica Mountains in California.

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.

   Copy

       

   1
   2
   3
   4
    /*** 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.

   Copy

                

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   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().

   More info

   The web scene document structure provides the map configuration, saving you from having to code it. Compare this with the Add layers to a 3D scene tutorial.

   Learn more about working with maps and scenes in the documentation.

   Copy

              

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   /*** 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().

   Copy

          

   1
   2
   3
   4
   5
   6
   7
    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.)

   More info

   Other ways to run the project in Xcode:

   • In Xcode's app menu, select Product > Run.

   • Pressing the Run button at the top-left of the Xcode project window.

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.