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.

A web map is a JSON structure that contains the settings required to display a 2D map. ArcGIS and custom applications can load web maps and automatically configure the map extent, basemap, layers and styles, pop-ups, labels and more. Web maps can be created interactively with the Map Viewer and ArcGIS Pro. Web maps 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 map.

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.

Preview the web map

  1. Go to the LA Trails and Parks Map to view the map in the Map Viewer. Make note of the id at the end of the URL.

Steps

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 trailheads = "41281c51f9de45edaf1c8ed44bb10e30"
    }
    

Add a web map to the map

  1. In the ViewController.swift file, update setupMap() to change the way the AGSMap is initialized to reference the web map that was created in the Configure pop-ups design tutorial. Create the web map given its item ID and the portal where it is hosted.

    /** UPDATE **/
    private func setupMap() {
        // Build Trailheads Item.
        let trailheadsItem: AGSPortalItem = {
            let portal = AGSPortal.arcGISOnline(withLoginRequired: false)
            return AGSPortalItem(portal: portal, itemID: .trailheads)
        }()
        // Set the trailheads web map.
        mapView.map = AGSMap(item: trailheadsItem)
        mapView.map?.load { (error) in
            if let error = error {
                print(error.localizedDescription)
            }
        }
    }
    
  2. 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 solution with our completed solution project.

Challenge

Use your web map

Instead of using the web map we prepared, use the web map you made in the design tutorial Create a web map.

In Step 1 above, replace the itemId variable with the id of your web map.

Change your map design

Open your web map in the ArcGIS Online Map Viewer, make changes to your map design, then save your map. Next time you load that map in your app your changes will be reflected.