Overview

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

The fastest way to create a fully styled 3D mapping application is to load a web scene. Web scenes are special because the format is interchangeable between a number of applications running on the ArcGIS platform. Web scenes are generally created interactively with the Scene Viewer and saved in ArcGIS Online. Complex scenes can also be created with ArcGIS Pro. When you save a web scene it stores a number of settings such as the basemap, extent, layers and styles, and label configurations. When a web scene is loaded by an application, the settings are used to set up and configure the map, saving you from having to set them up yourself. Web scenes can also be updated independently from your apps, making it handy if you want to update the map and layers but don't want to make changes to the application code itself.

In this lab, you will use the ArcGIS Runtime SDK for iOS to build a mapping app that loads and displays a web scene of trails and parks in the Santa Monica Mountains.

Before you begin

Reuse the starter project

Make a copy of the finished Create a starter app lab (or download here).

  • Open the .xcodeproj file in Xcode.

  • Run the project, verify the project builds and 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 untill 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 lab 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.