出典:ArcGIS Maps SDK for Swift - Tutorials - Display a map
このチュートリアルでは ArcGIS Maps SDK for Swift を使用して、マップとベースマップ レイヤーを表示する方法を紹介します。
マップには、地理データのレイヤーが含まれています。マップには、ベースマップ レイヤーと、オプションで 1 つ以上のデータレイヤーを追加できます。マップ ビューを使用し、場所とズーム レベルを設定することで、マップの特定の領域を表示できます。
このチュートリアルでは、地形ベースマップ レイヤーを使用して、富士山付近を表示する地図を作成します。
このチュートリアルのトピックの背景情報については、Mapping API and location services guide の Maps (2D) と ベースマップ を参照してください。
このチュートリアルを実施するには、以下が必要です。
このチュートリアルで使用するセキュアな ArcGIS ロケーション サービスにアクセスするには、ArcGIS Location Platform または ArcGIS Online アカウントを使用して、API キー認証またはユーザー認証を実装する必要があります。
このチュートリアルでは、API キー認証またはユーザー認証を実装することができます。以下の違いを比較してください。
詳しくは API キー認証をご覧ください。
このチュートリアルで使用するセキュアなリソースにアクセスする権限を持つ、新しい API キーのアクセス トークンを作成します。
詳しくは、ユーザー認証をご覧ください。
このチュートリアルで使用するセキュアなリソースにアクセスするための新しい OAuth 認証情報を作成します。
ユーザー認証用の OAuth 認証情報を作成するチュートリアルを完了します。
client ID
は、認証サーバー上でアプリを一意に識別します。サーバーは、提供された Client ID を持つアプリを見つけることができない場合、認証を続行しません。
Redirect URL
(callback url とも呼ばれる)は、OAuth ログイン後にシステムがアプリに制御を戻す際に、認証サーバーからの応答を識別するために使用されます。必ずしもユーザーがナビゲートできる有効なエンドポイントを表しているわけではないので、redirect URL は my-app://auth
のようなカスタム スキームを使用できます。アプリのコードで使用する redirect URL が、認証サーバーで設定された redirect URL と一致することを確認することが重要です。
ClientID と RedirectURL をコピーして安全な場所に貼り付けます。これらは後のステップで使用します。
このアプリケーションにアクセスするすべてのユーザーには、ベースマップ スタイル サービスにアクセスするためのアカウント権限が必要です。
セキュリティと認証ガイド : 認証の種類について詳しくは、認証の種類をご覧ください。
このチュートリアルを完了するには、2 つの選択肢があります。
始めるには、Xcode を使って iOS アプリを作成し、API を参照するように設定する。
Xcode を開き、メニュー バーから [File] > [New] > [Project] をクリックします。
[Choose a template for your new project] ウィンドウで、次の値を設定します。
[Next] をクリックします。
[Choose options for your new project] ウィンドウで、次の値を設定します。
<your app name>
<任意の組織>
他のすべてのオプションのチェックを外します。
[Next] をクリックします。
プロジェクトを保存する場所を選択して、[Create] をクリックします。
Project Navigator で、<your app name>.App
をクリックします。Editor で、MainApp
に変更します。 右上の [Rename] ボタンをクリックして、新しい名前を確認します。 これにより、影響を受けるすべての領域の構造体 (struct) とファイルの名前が変更されます。
Swift Package Manager を使用して API への参照を追加します。
MainApp.swift ファイルで、ArcGIS のインポート後にエラーが表示される場合があります。Scene
と Scene protocol
を区別することで、エラーを解決します。これを行うには、SwiftUI
接頭辞を Scene
に追加します。
MainApp.swift
// 追加開始
var body: some SwiftUI.Scene {
// 追加終了
WindowGroup {
ContentView()
}
}
アプリのユーザーが ArcGIS Location Services にアクセスできるようにするには、認証の設定 ステップで作成した開発者認証情報を使用して、リソースへの要求を認証します。
API キーを使用すると、ArcGIS Online でホストされているサービス、Web マップ、および Web シーンにアクセスできるようになります。
API キー アクセストークンを ArcGISEnvironment
に渡します。
Project Navigator で、[MainApp.swift] をクリックします。
MainApp
構造体にイニシャライザーを実装し、ArcGISEnvironment.apiKey
プロパティーに API キーのアクセス トークンを設定します。
MainApp.swift
import SwiftUI
import ArcGIS
@main
struct MainApp: App {
// 追加開始
init() {
ArcGISEnvironment.apiKey = APIKey("<#アクセストークンを入力#>")
}
// 追加終了
ベストプラクティス : アクセス トークンは、このチュートリアルの便宜のためにコードに直接格納されています。本番環境では、認証情報をソース コードに直接保存しないでください。
Authenticator
toolkit コンポーネントを使用して OAuth 認証情報を管理し、ArcGISEnvironment
に渡します。
以下の手順に従って、ArcGIS Maps SDK for Swift Toolkit パッケージをアプリケーションに追加します。
Project Navigator で、[MainApp.swift] をクリックします。
コードに import ArcGISToolkit
を追加します。
MainApp
構造体で Authenticator
ツールキット コンポーネントを宣言し、初期化します。
MainApp
構造体にイニシャライザーを実装します。
OAuthUserConfiguration
を使用して Authenticator
の新しいインスタンスを作成します。
PortalURL
、clientID
、および redirectURL
の値を追加します。
authenticator
を ArcGISEnvironment.authenticationManager
に渡して、チャレンジを処理します。
MainApp.swift
import SwiftUI
import ArcGIS
// 追加開始
import ArcGISToolkit
// 追加終了
@main
struct MainApp: App {
// 追加開始
@ObservedObject var authenticator: Authenticator
init() {
authenticator = Authenticator(oAuthUserConfigurations: [
OAuthUserConfiguration(
portalURL: URL(string: "<#YOUR-PORTAL-URL#>")!,
clientID: ""<#YOUR-CLIENT-ID#>"",
redirectURL: URL(string: "<#YOUR-REDIRECT-URL#>")!
)
])
ArcGISEnvironment.authenticationManager.handleChallenges(using: authenticator)
}
// 追加終了
body で、ContentView
に.authenticator(authenticator)
修飾子を追加します。
ベストプラクティス : OAuth 認証情報は、このチュートリアルの便宜のためにコードに直接格納されています。本番環境では、認証情報をソース コードに直接保存しないでください。
地形ベースマップ レイヤーを含むマップを作成します。 マップは、富士山付近が中心になります。
Project Navigator で、[ContentView.swift] をクリックします。
Editor で、API を参照する import
ステートメントを追加します。
ContentView.swift
import SwiftUI
// 追加開始
import ArcGIS
// 追加終了
デフォルト値を持つ Map
タイプの map
という名前の @State プロパティー ラッパーを追加します。arcGISTopographic
ベースマップ スタイルで Map
を作成し、それを返します。
ContentView.swift
struct ContentView: View {
// 追加開始
@State private var map = {
//ベースマップのラベルを日本語で表示します。
let bsp = BasemapStyleParameters(language: BasemapStyleLanguage.specific(Locale.Language(identifier: "ja")))
let map = Map(basemap:Basemap(style:.arcGISTopographic,parameters: bsp))
return map
}()
// 追加終了
}
ArcGIS Enterprise ユーザーは、ArcGIS Location ベースマップ スタイル サービスにアクセスできません。ArcGIS Enterprise ユーザ向けのアプリを作成する場合は、ユーザーがアクセスできるベースマップを含む マップ
を作成する必要があります。
マップの initialViewpoint プロパティーを、富士山付近の座標を持つ Viewpoint
で設定します。
ContentView.swift
struct ContentView: View {
@State private var map = {
//ベースマップのラベルを日本語で表示します。
let bsp = BasemapStyleParameters(language:BasemapStyleLanguage.specific(Locale(languageCode: "ja")))
let map = Map(basemap:Basemap(style:.arcGISTopographic,parameters: bsp))
// 追加開始
map.initialViewpoint = Viewpoint(latitude: 35.360626, longitude: 138.727363, scale: 200000)
// 追加終了
return map
}()
}
マップ ビューは、マップを表示する UI コンポーネントです。 また、タッチ ジェスチャを使用したナビゲーションなど、マップとのユーザー インタラクションも処理します。Xcode と SwiftUI を使用してマップ ビューを追加します。
body で、前の手順で作成したマップを使用して MapView
を作成します。
ContentView.swift
struct ContentView: View {
@State private var map = {
//ベースマップのラベルを日本語で表示します。
let bsp = BasemapStyleParameters(language:BasemapStyleLanguage.specific(Locale(languageCode: "ja")))
let map = Map(basemap:Basemap(style:.arcGISTopographic,parameters: bsp))
map.initialViewpoint = Viewpoint(latitude: 35.360626, longitude: 138.727363, scale: 200000)
return map
}()
var body: some View {
// 追加開始
MapView(map: map)
// 追加終了
}
}
Project Navigator で、[MainApp.swift] をクリックします。
ContentView
に .ignoresSafeArea()
修飾子を追加します。ContentView
の body には MapView
が含まれており、この修飾子により、マップ ビューがセーフ エリアを超えてすべての端まで表示されるようになります。
MainApp.swift
var body: some Scene {
WindowGroup {
ContentView()
// 追加開始
.ignoresSafeArea()
// 追加終了
}
}
<Command + R> を押してアプリを実行します。
富士山を中心とした地形ベースマップ レイヤーのマップが表示されます。マップ ビューをピンチ、ドラッグ、およびダブルタップして、マップを操作します。
Xcode シミュレータを使用する場合、システムは以下の最低要件を満たしている必要があります ( macOS 14 (Sonoma), Xcode 16, iOS 18)。 物理的なデバイスを使用する場合は、システム要件を参照してください。
あるいは、以下のチュートリアル ソリューションをダウンロードすることもできます。
.xcodeproj
ファイルを開きます。ダウンロードしたソリューションには認証情報が含まれていないため、認証の設定セクションで作成した開発者認証情報を追加する必要があります。
アプリのユーザが ArcGIS 位置情報サービスにアクセスできるようにするには、認証の設定ステップで作成した開発者認証情報を使用して、リソースへの要求を認証します。
API キー アクセス トークンを ArcGISEnvironment
に渡します。
Project Navigator で、[MainApp.swift] をクリックします。
AuthenticationMode
を .apiKey
に設定する。
MainApp.swift
// Change the `AuthenticationMode` to `.apiKey` if your application uses API key authentication.
// 追加開始
private var authenticationMode: AuthenticationMode { .apiKey }
// 追加終了
apiKey
プロパティーに API キーのアクセス トークンを設定します。
MainApp.swift
// Please enter an API key access token if your application uses API key authentication.
// 追加開始
private let apiKey = APIKey("<#YOUR-ACCESS-TOKEN#>")
// 追加終了
ベストプラクティス : アクセス トークンは、このチュートリアルの便宜のためにコードに直接格納されています。本番環境では、認証情報をソース コードに直接保存しないでください。
Authenticator
toolkit コンポーネントを使用して OAuth 認証情報を管理し、ArcGISEnvironment
に渡します。
Project Navigator で、[MainApp.swift] をクリックします。
AuthenticationMode
を .user
に設定します。
MainApp.swift
// Change the `AuthenticationMode` to `.user` if your application uses OAuth credentials.
// 追加開始
private var authenticationMode: AuthenticationMode { .user }
// 追加終了
portalURL
、clientID
、redirectURL
の値を設定します。
MainApp.swift
// 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#>")!
// 追加終了
)
]
)
ベストプラクティス : アクセス トークンは、このチュートリアルの便宜のためにコードに直接格納されています。本番環境では、認証情報をソース コードに直接保存しないでください。
アプリを実行するには、<Command + R> キーを押します。
Xcode シミュレータを使用する場合、システムは以下の最低要件を満たしている必要があります ( macOS 14 (Sonoma), Xcode 16, iOS 18)。物理的なデバイスを使用する場合は、システム要件を参照してください。
カリフォルニア州サンタモニカ山脈を中心とした地形ベースマップ レイヤーの地図が表示されるはずです。マップ ビューをピンチ、ドラッグ、ダブルタップしてマップを探索します。
これらのチュートリアルでは、追加の API 機能、ArcGIS ロケーション サービス、および ArcGIS ツールの使用方法について説明します。(英語ページ)