Zenn
🗺️

Mapbox Maps SDKを使って地図を表示してみよう iOS編

2022/12/04に公開
iOS
Swift
#
map
#
gis
Mapbox
tech

この記事は Mapbox Japan Advent Calendar 2022 の 5日目の記事です。

はじめに

本記事は、iPhoneアプリでMapboxのSDKを使って地図を表示してみよう！という基礎的な内容となります。

Maps SDKのリンクは以下になります。
Maps SDK for iOS

地図を表示してみよう

ここからは地図を表示するまでの過程を順番に説明していきたいと思います。

トークンの取得

MapboxのSDKを利用するためには、Mapboxアカウントを作成してアクセストークンを取得する必要があります。もしまだMapboxアカウントを持ってない場合はこちらから作成をお願いします。

すでにアカウントのお持ちの場合はアカウントページを開いて以下の２つのトークンを取得します。

  • Publicトークン: アクセストークンページの「Default public token」からトークンをコピーして取得します。

  • Secretトークン: 上記と同様のアクセストークンページから、「Create Token」ボタンより新規のトークンを作成します。このときDownloads:Readにチェックを入れることを忘れないようにしましょう。次のライブラリのダウンロードの際に必要になります。

Publicトークン Secretトークン
アクセストークン画面 トークン作成画面

Secretトークンの設定

作成したSecretトークンはMapboxSDKをダウンロードするために必要になります。そのために以下の設定を行います。

  1. まず .netrcファイルをホームディレクトリに作成します。
  2. .netrcには、以下の設定を追加します。注意点としてlogin 部分はアカウント名ではなく、mapbox とする必要があります。
.netrc
machine api.mapbox.com
login mapbox
password YOUR_SECRET_MAPBOX_ACCESS_TOKEN <-先程作成したSecretトークン

Publicトークンの設定

続いてPublicトークンです。こちらは、iOSプロジェクトのInfo.plistに直接設定します。以下の設定を追加しましょう。

Info.plist
Key: MBXAccessToken
Type: String
Value: YOUR_PUBLIC_MAPBOX_ACCESS_TOKEN

こちらは後ほどソースコードから読み込むので、ソースコードへ直接記入でも構いませんが、前述したように、くれぐれも公開しないように注意しましょう。
トークンを安全に管理する方法はこちら（英語）を参考にしてください。

Mapbox SDK iOS のインストール

CocoaPodsを利用してライブラリの導入を行います。

  1. アクセストークンの設定を確認する
    Mapboxのライブラリをダウンロードするには、前章にて設定したアクセストークンにDownloads:Readスコープを設定し、.netrcに追加する必要があります。

  2. Podfile以下の記述を追記する。

Podfile
use_frameworks!

target 'TargetNameForYourApp' do
  pod 'MapboxMaps', '10.9.1'
end
  1. 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に追加します。

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編もありますのでぜひ見てみてください！

https://zenn.dev/capotasto/articles/5c4347f4237e77

Discussion