Mapbox Maps SDKを使って地図を表示してみよう iOS編
この記事は Mapbox Japan Advent Calendar 2022 の 5日目の記事です。
はじめに
本記事は、iPhoneアプリでMapboxのSDKを使って地図を表示してみよう!という基礎的な内容となります。
Maps SDKのリンクは以下になります。
Maps SDK for iOS
地図を表示してみよう
ここからは地図を表示するまでの過程を順番に説明していきたいと思います。
トークンの取得
MapboxのSDKを利用するためには、Mapboxアカウントを作成してアクセストークンを取得する必要があります。もしまだMapboxアカウントを持ってない場合はこちらから作成をお願いします。
すでにアカウントのお持ちの場合はアカウントページを開いて以下の2つのトークンを取得します。
-
Publicトークン: アクセストークンページの「Default public token」からトークンをコピーして取得します。
-
Secretトークン: 上記と同様のアクセストークンページから、「Create Token」ボタンより新規のトークンを作成します。このとき
Downloads:Read
にチェックを入れることを忘れないようにしましょう。次のライブラリのダウンロードの際に必要になります。
Publicトークン | Secretトークン |
---|---|
Secretトークンの設定
作成したSecretトークンはMapboxSDKをダウンロードするために必要になります。そのために以下の設定を行います。
- まず
.netrc
ファイルをホームディレクトリに作成します。 -
.netrc
には、以下の設定を追加します。注意点としてlogin 部分はアカウント名ではなく、mapbox
とする必要があります。
machine api.mapbox.com
login mapbox
password YOUR_SECRET_MAPBOX_ACCESS_TOKEN <-先程作成したSecretトークン
Publicトークンの設定
続いてPublicトークンです。こちらは、iOSプロジェクトのInfo.plist
に直接設定します。以下の設定を追加しましょう。
Key: MBXAccessToken
Type: String
Value: YOUR_PUBLIC_MAPBOX_ACCESS_TOKEN
こちらは後ほどソースコードから読み込むので、ソースコードへ直接記入でも構いませんが、前述したように、くれぐれも公開しないように注意しましょう。
トークンを安全に管理する方法はこちら(英語)を参考にしてください。
Mapbox SDK iOS のインストール
CocoaPodsを利用してライブラリの導入を行います。
-
アクセストークンの設定を確認する
Mapboxのライブラリをダウンロードするには、前章にて設定したアクセストークンにDownloads:Read
スコープを設定し、.netrc
に追加する必要があります。 -
Podfile
以下の記述を追記する。
use_frameworks!
target 'TargetNameForYourApp' do
pod 'MapboxMaps', '10.9.1'
end
-
pod install
コマンドでライブラリをインストールします
### Error
RuntimeError - [Xcodeproj] Unknown object version (56).
/opt/homebrew/Cellar/cocoapods/1.11.3/libexec/gems/xcodeproj-1.21.0/lib/xcodeproj/project.rb:228:in `initialize_from_file'
/opt/homebrew/Cellar/cocoapods/1.11.3/libexec/gems/xcodeproj-1.21.0/lib/xcodeproj/project.rb:113:in `open'
/opt/homebrew/Cellar/cocoapods/1.11.3/libexec/gems/cocoapods-1.11.3/lib/cocoapods/command/init.rb:41:in `validate!'
/opt/homebrew/Cellar/cocoapods/1.11.3/libexec/gems/claide-1.1.0/lib/claide/command.rb:333:in `run'
/opt/homebrew/Cellar/cocoapods/1.11.3/libexec/gems/cocoapods-1.11.3/lib/cocoapods/command.rb:52:in `run'
/opt/homebrew/Cellar/cocoapods/1.11.3/libexec/gems/cocoapods-1.11.3/bin/pod:55:in `<top (required)>'
/opt/homebrew/Cellar/cocoapods/1.11.3/libexec/bin/pod:25:in `load'
/opt/homebrew/Cellar/cocoapods/1.11.3/libexec/bin/pod:25:in `<main>'
2022/12/3 現在、こちらはまだ解決していない模様で、ワークアラウンドとしてこちらの解決方法で解消することができましたので、参考になればと思います。
地図の表示
以下のソースをMapを表示したいViewControllerに追加します。
import UIKit
import MapboxMaps
class ViewController: UIViewController {
internal var mapView: MapView!
private let tokyoStation = CLLocationCoordinate2D(latitude: 35.6812, longitude: 139.7671)
override public func viewDidLoad() {
super.viewDidLoad()
let token = Bundle.main.object(forInfoDictionaryKey: "MBXAccessToken") as? String ?? ""
let option = MapInitOptions(
resourceOptions: ResourceOptions(accessToken: token),
cameraOptions: CameraOptions(center: tokyoStation, zoom: 14.5)
)
mapView = MapView(frame: view.bounds, mapInitOptions: option)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
self.view.addSubview(mapView)
}
}
SwiftUI で表示をしたい場合は、UIViewRepresentable
を使ったView
に MapをWrappingすることで表示するとが可能なようです。こちらは別途どこかで記事にしたいと思います。
実行結果
ソースコード
本日使用したソースコードはこちらです。トークンはご自身のトークンに差し替えて使用していただければと思います。
おわりに
いかがでしたでしょうか?
最初のクレデンシャル設定が少し複雑だったかもしれませんが、思いの外簡単に地図の表示までできたのかなと思います。
Android 編
Android編もありますのでぜひ見てみてください!
Discussion