Display a web map

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

display a web map

A web map contains the definition of a map. Web maps are created interactively in the Map Viewer or in ArcGIS Pro and are used to share maps in ArcGIS. Applications and APIs can read, write, and display web maps. All web maps are stored in ArcGIS as an item with an item ID.

In this tutorial, you use a web map's item ID to display a map of trails, trailheads and parks in the Santa Monica Mountains. The web map is hosted in ArcGIS Online.

Prerequisites

The following are required for this tutorial:

  1. An ArcGIS account to access your API keys. If you don't have an account, sign up for free.
  2. Your system meets the system requirements.
  3. The ArcGIS Runtime API for iOS is installed.

Steps

Open an Xcode project

  1. To start the tutorial, complete the Display a map tutorial or download and unzip the solution.

  2. Open the .xcodeproj file in Xcode.

  3. If you downloaded the solution project, set your API key.

    An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.

    1. Go to your developer dashboard to get your API key. For these tutorials, use your default API key. It is scoped to include all of the services demonstrated in the tutorials.

    2. In Xcode, in the Project Navigator, click AppDelegate.swift.

    3. In the editor, set the apiKey property on the AGSArcGISRuntimeEnvironment with your API key.


      AppDelegate.swift
                                         
      Change line
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      // Copyright 2021 Esri
      //
      // Licensed under the Apache License, Version 2.0 (the "License");
      // you may not use this file except in compliance with the License.
      // You may obtain a copy of the License at
      //
      //   https://www.apache.org/licenses/LICENSE-2.0
      //
      // Unless required by applicable law or agreed to in writing, software
      // distributed under the License is distributed on an "AS IS" BASIS,
      // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      // See the License for the specific language governing permissions and
      // limitations under the License.
      
      
      import UIKit
      
      import ArcGIS
      
      
      @UIApplicationMain
      class AppDelegate: UIResponder, UIApplicationDelegate {
          var window: UIWindow?
      
          func application(_ application: UIApplication,
                           didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
              // Note: it is not best practice to store API keys in source code.
              // The API key is referenced here for the convenience of this tutorial.
      
              AGSArcGISRuntimeEnvironment.apiKey = "YOUR_API_KEY"
      
              return true
          }
      
      }
      

Set the API Key

An API Key enables access to services, web maps, and web scenes hosted in ArcGIS Online.

  1. Go to your developer dashboard to get your API key. For these tutorials, use your default API key. It is scoped to include all of the services demonstrated in the tutorials.

  2. In Xcode, in the Project Navigator, click AppDelegate.swift.

  3. In the editor, set the apiKey property on the AGSArcGISRuntimeEnvironment with your API key.


    AppDelegate.swift
                                       
    Change line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    // Copyright 2021 Esri
    //
    // Licensed under the Apache License, Version 2.0 (the "License");
    // you may not use this file except in compliance with the License.
    // You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    // Unless required by applicable law or agreed to in writing, software
    // distributed under the License is distributed on an "AS IS" BASIS,
    // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    // See the License for the specific language governing permissions and
    // limitations under the License.
    
    
    import UIKit
    
    import ArcGIS
    
    
    @UIApplicationMain
    class AppDelegate: UIResponder, UIApplicationDelegate {
        var window: UIWindow?
    
        func application(_ application: UIApplication,
                         didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
            // Note: it is not best practice to store API keys in source code.
            // The API key is referenced here for the convenience of this tutorial.
    
            AGSArcGISRuntimeEnvironment.apiKey = "YOUR_API_KEY"
    
            return true
        }
    
    }
    

Get the web map item ID

You can use ArcGIS tools to create and view web maps. Use the Map Viewer to identify the web map item ID. This item ID will be used later in the tutorial.

  1. Go to the LA Trails and Parks web map in the Map Viewer in ArcGIS Online. This web map displays trails, trailheads and parks in the Santa Monica Mountains.
  2. Make a note of the item ID at the end of the browser's URL.

    The item ID should be 41281c51f9de45edaf1c8ed44bb10e30

Display the web map

You can create a map from a web map using the web map's item ID. Use the AGSPortalItem class to access the web map, and the AGSMap class to create and display a map from it.

  1. In Xcode, in the Project Navigator, click ViewController.swift.

  2. In the editor, modify the setupMap() function to create an AGSPortalItem for the web map. To do this, provide the web map's item ID and an AGSPortal referencing ArcGIS Online.

    ViewController.swift
    23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 24 25 26 27 28 29 29 29 29 30 30 30 30 30 30 30 30 30 30
    Change lineChange lineChange line
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    // Copyright 2020 Esri
    //
    // Licensed under the Apache License, Version 2.0 (the "License");
    // you may not use this file except in compliance with the License.
    // You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    // Unless required by applicable law or agreed to in writing, software
    // distributed under the License is distributed on an "AS IS" BASIS,
    // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    // See the License for the specific language governing permissions and
    // limitations under the License.
    
    
    import UIKit
    
    import ArcGIS
    
    class ViewController: UIViewController {
        @IBOutlet weak var mapView: AGSMapView!
    
    
        private func setupMap() {
    
            let portal = AGSPortal.arcGISOnline(withLoginRequired: false)
            let itemID = "41281c51f9de45edaf1c8ed44bb10e30"
            let portalItem = AGSPortalItem(portal: portal, itemID: itemID)
    
            let map = AGSMap(item: portalItem)
            mapView.map = map
    
        }
    
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            setupMap()
    
        }
    }
    

    The AGSPortal object is created using a convenience function that points to ArcGIS Online. This is the equivalent of:

     
    1
    AGSPortal(url: URL(string: "https://www.arcgis.com")!, loginRequired: false)
  3. Create an AGSMap using the AGSPortalItem. To display the map, set the mapView's map property to this new AGSMap.

    ViewController.swift
    23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 23 24 25 26 27 28 29 30 31 32 33 33 33 33 33 33 33 33 33 33
    Add line.Add line.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    // Copyright 2020 Esri
    //
    // Licensed under the Apache License, Version 2.0 (the "License");
    // you may not use this file except in compliance with the License.
    // You may obtain a copy of the License at
    //
    //   https://www.apache.org/licenses/LICENSE-2.0
    //
    // Unless required by applicable law or agreed to in writing, software
    // distributed under the License is distributed on an "AS IS" BASIS,
    // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    // See the License for the specific language governing permissions and
    // limitations under the License.
    
    
    import UIKit
    
    import ArcGIS
    
    class ViewController: UIViewController {
        @IBOutlet weak var mapView: AGSMapView!
    
    
        private func setupMap() {
    
            let portal = AGSPortal.arcGISOnline(withLoginRequired: false)
            let itemID = "41281c51f9de45edaf1c8ed44bb10e30"
            let portalItem = AGSPortalItem(portal: portal, itemID: itemID)
    
            let map = AGSMap(item: portalItem)
            mapView.map = map
    
        }
    
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            setupMap()
    
        }
    }
    
  4. Press <Command+R> to run the app.

    If you are using the Xcode simulator your system must meet these minimum requirements: macOS Catalina, Xcode 11, iOS 13. If you are using a physical device, then refer to the system requirements.

You should see a map of trails, trailheads and parks in the Santa Monica Mountains. Pinch, drag, and double-tap the map view to explore the map.

What's next?

Learn how to use additional API features, ArcGIS platform services, and ArcGIS tools in these tutorials:

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.