Learn how to create and display a map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more with a basemap layer A basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service. Learn more .

Figure : Overview of how to display a map

A map contains layers A layer is a reference to a collection of geographic data that is used to access and display data. The data for layers are typically provided by the basemap layer service and data services. Learn more of geographic data. A map contains a basemap layer A basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service. Learn more and, optionally, one or more data layers A data layer is a layer that references geographic data from a file or a service and is used to visualize the data in a map or scene. Learn more . You can display a specific area of a map by using a map view A map view is a user interface that displays map layers and graphics in 2D. It controls the area (extent) of the map that is visible and supports user interactions such as pan and zoom. Learn more and setting the location A location is a position or region (point, line, or polygon) on the earth's surface. Learn more and zoom level Zoom level is a value that sets the scale for a map view or a scene view. Learn more .

In this tutorial, you create and display a map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more of the Santa Monica Mountains in California using the topographic basemap layer A basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service. Learn more .

The map and code will be used as the starting point for other 2D tutorials.

Prerequisites

Before starting this tutorial:

  1. You need an ArcGIS Location Platform or ArcGIS Online account.

  2. Your system meets the system requirements.

Set up authentication

To access the secure ArcGIS location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more used in this tutorial, you must implement API key authentication API key authentication is a type of authentication that uses an API key to authenticate requests to ArcGIS services and secure portal items. Learn more or user authentication User authentication is a type of authentication that allows users with an ArcGIS account to sign into an application and allow it to access ArcGIS content, services, and resources on their behalf. The typical authorization protocol used is OAuth2.0. Learn more using an ArcGIS Location Platform An ArcGIS Location Platform account, formerly known as an ArcGIS Developer account, is an identity associated with an ArcGIS Location Platform subscription. Learn more or an ArcGIS Online An ArcGIS Online account, also known as an ArcGIS Organization account, is an identity associated with an ArcGIS Online subscription. It can be used to access ArcGIS tools and develop applications with ArcGIS location services for an organization. Learn more account.

To complete this tutorial, click on the tab in the switcher below for your authentication type of choice, either API key authentication or User authentication.

Create a new API key access token An access token is an authorization string that provides access to secure ArcGIS content, data, and services. Its capabilities are determined by the privileges it supports. It is obtained by implementing API key authentication, User authentication, or App authentication. Learn more with privileges Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more to access the secure resources used in this tutorial.

  1. Complete the Create an API key tutorial and create an API key with the following privilege(s) Privileges are a set of permissions assigned to ArcGIS accounts, developer credentials, and applications that grant access to secure resources and functionality in ArcGIS. Learn more :

    • Privileges
      • Location services > Basemaps
  2. Copy and paste the API key access token into a safe location. It will be used in a later step.

Develop or Download

You have two options for completing this tutorial:

  1. Option 1: Develop the code or
  2. Option 2: Download the completed solution

Option 1: Develop the code

Create a new app

To get started, use Xcode to create an iOS app and configure it to reference the API.

  1. Open Xcode. In the menu bar, click File > New > Project.

    • In the Choose a template for your new project: window, set the following properties:
      • Multiplatform iOS
      • Application App
    • Click Next.
    • In the Choose options for your new project: window, set the following properties:
      • Product Name: <your app name>
      • Organization Identifier: <your organization>
      • Interface: SwiftUI
      • Language: Swift
    • Uncheck all other options.
    • Click Next.
    • Choose a location to store your project. Click Create.
  2. In the Project Navigator, click <your app name>App. In the Editor, right click on the struct name, <your app name>App. Select Refactor > Rename… to rename the struct to MainApp. Click the Rename button in the top right to confirm the new name. This will rename the struct and file in all affected areas. This file and struct will be named MainApp for all the subsequent tutorials.

  3. Add a reference to the API using Swift Package Manager.

  4. In the MainApp.swift file, some errors may appear after importing ArcGIS. Resolve the errors by distinguishing the Scene protocol from Scene. To do so, add the SwiftUI prefix to Scene.

    MainApp.swift
    var body: some SwiftUI.Scene {
    WindowGroup {
    ContentView()
    }
    }

Set developer credentials

To allow your app users to access ArcGIS location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more , use the developer credentials that you created in the Set up authentication step to authenticate requests for resources.

Pass your API Key access token to the ArcGISEnvironment.

  1. In the Project Navigator, click MainApp.swift.

  2. Implement an initializer in the MainApp struct and set the ArcGISEnvironment.apiKey property with your API key access token.

    MainApp.swift
    import SwiftUI
    import ArcGIS
    @main
    struct MainApp: App {
    init() {
    ArcGISEnvironment.apiKey = APIKey("<#YOUR-ACCESS-TOKEN#>")
    }

Best Practice: The access token is stored directly in the code as a convenience for this tutorial. Do not store credentials directly in source code in a production environment.

Add a map

Create a map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more that contains a topographic basemap layer A basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service. Learn more . The map will be centered on the Santa Monica Mountains in California.

  1. In the Project Navigator, click ContentView.swift.

  2. In the Editor, add an import statement to reference the API.

    ContentView.swift
    import SwiftUI
    import ArcGIS
  3. Add a @State property wrapper named map of type Map with a default value. Create a Map with an arcGISTopographic basemap style and return it.

    ContentView.swift
    struct ContentView: View {
    @State private var map = {
    let map = Map(basemapStyle: .arcGISTopographic)
    return map
    }()
    }
  4. Set the map’s initialViewpoint property with a Viewpoint using the Santa Monica Mountains coordinates.

    ContentView.swift
    @State private var map = {
    let map = Map(basemapStyle: .arcGISTopographic)
    map.initialViewpoint = Viewpoint(latitude: 34.02700, longitude: -118.80500, scale: 72_000)
    return map
    }()

Add a map view

A map view A map view is a user interface that displays map layers and graphics in 2D. It controls the area (extent) of the map that is visible and supports user interactions such as pan and zoom. Learn more is a UI component that displays a map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more . It also handles user interactions with the map, including navigating with touch gestures. Use Xcode and SwiftUI to add a map view.

  1. In the body, create a MapView with the map created in the previous step.

    ContentView.swift
    var body: some View {
    // Displays the map.
    MapView(map: map)
    }

Run the solution

  1. In the Project Navigator, click MainApp.swift.

  2. In the body, add an .ignoresSafeArea() modifier to the ContentView. The ContentView’s body contains the MapView and this modifier ensures that the map view is displayed beyond the safe area to all edges.

    MainApp.swift
    .ignoresSafeArea()
  3. Press Command + R to run the app.

You should see a map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more with the topographic basemap layer A basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service. Learn more centered on the Santa Monica Mountains in California. Pinch, drag, and double-tap the map view to explore the map.

Alternatively, you can download the tutorial solution, as follows.

Option 2: Download the solution

  1. Click the Download solution link under Solution and unzip the file to a location on your machine.

  2. Open the .xcodeproj file in Xcode.

Since the downloaded solution does not contain authentication credentials, you must add the developer credentials that you created in the Set up authentication section.

Set developer credentials in the solution

To allow your app users to access ArcGIS location services ArcGIS Location Services, also referred to as Location Services, are services hosted by Esri that provide geospatial functionality for developing mapping applications. They include the ArcGIS Basemap Styles service, ArcGIS Static Basemap Tiles service, ArcGIS Places service, ArcGIS Geocoding service, ArcGIS Routing service, ArcGIS GeoEnrichment service, and ArcGIS Elevation service. An ArcGIS Location Platform or ArcGIS Online account is required to use the services. Learn more , use the developer credentials that you created in the Set up authentication step to authenticate requests for resources.

Pass your API Key access token to the ArcGISEnvironment.

  1. In the Project Navigator, click MainApp.swift.

  2. Set the AuthenticationMode to .apiKey.

    MainApp.swift
    // Change the `AuthenticationMode` to `.apiKey` if your application uses API key authentication.
    private var authenticationMode: AuthenticationMode { .apiKey }
  3. Set the apiKey property with your API key access token.

    MainApp.swift
    31 collapsed lines
    // Copyright 2022 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 SwiftUI
    import ArcGIS
    import ArcGISToolkit
    @main
    struct MainApp: App {
    // The authentication mode.
    private enum AuthenticationMode {
    case apiKey
    case user
    }
    // Change the `AuthenticationMode` to `.apiKey` if your application uses API key authentication.
    private var authenticationMode: AuthenticationMode { .apiKey }
    // Please enter an API key access token if your application uses API key authentication.
    private let apiKey = APIKey("<#YOUR-ACCESS-TOKEN#>")
    43 collapsed lines
    // Setup an `Authenticator` with OAuth configuration if your application uses OAuth credentials.
    @ObservedObject var authenticator = Authenticator(
    oAuthUserConfigurations: [
    OAuthUserConfiguration(
    // Please enter OAuth credentials for user authentication.
    portalURL: URL(string: "<#YOUR-PORTAL-URL#>")!,
    clientID: "<#YOUR-CLIENT-ID#>",
    redirectURL: URL(string: "<#YOUR-REDIRECT-URL#>")!
    )
    ]
    )
    func setAuthentication() {
    switch authenticationMode {
    case .apiKey:
    ArcGISEnvironment.apiKey = apiKey
    case .user:
    ArcGISEnvironment.authenticationManager.arcGISAuthenticationChallengeHandler = authenticator
    }
    }
    init() {
    setAuthentication()
    }
    var body: some SwiftUI.Scene {
    WindowGroup {
    ContentView()
    .authenticator(authenticator)
    .ignoresSafeArea()
    }
    }
    }

Best Practice: The access token is stored directly in the code as a convenience for this tutorial. Do not store credentials directly in source code in a production environment.

Run the solution

Press Command + R to run the app.

You should see a map A map is a collection of layers that are displayed in 2D. It is typically composed of a basemap layer and data layers. Learn more with the topographic basemap layer A basemap layer is the layer in a map or scene that displays basemap data. The data source for a basemap layer is typically a basemap service. Learn more centered on the Santa Monica Mountains in California. Pinch, drag, and double-tap the map view to explore the map.

What’s next?

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