Mapbox の Maps SDK for iOS のインストールから地図表示までを実施 #iOS

はじめに

Mapbox GL JS の記事は多いですが、iOS などのネイティブの記事はあまり見かけないようなので、今回は Maps SDK for iOS を使用して、インストールから簡単な地図を表示するまで紹介したいと思います。

また、Maps SDK for iOS の最新バージョンは、本日時点では、v5.8.0 となっています。

インストールについては、Mapbox の Maps SDK for iOS のドキュメントを参考としています。現時点で幾つかドキュメントに記載している方法と差異があり、ドキュメントが少し古いような感じです。本手順が参考になれば幸いです。

実際に作成したプロジェクトは、GitHub mapbox-ios-sdk-samples を参照してください。

新規ブロジェクトの作成

はじめにインストールを行う前に、Xcode を立ち上げて、[Create a new Xcode project] を選択して新規にプロジェクトを作成します。

[Single View App] を選択して、[Next] をクリックします。

Product Name に任意の名前を入力して(ここでは、startMapbox と入力しました)、[Netxt] をクリックします。

最後に目的の場所で [Create] をクリックして、新規プロジェクトを作成します。新規プロジェクトを作成したら、次にインストールを行っていきます。

インストール

Mapbox の Maps SDK for iOS ドキュメントの Overview から Install をクリックします。次のような画面が表示されます。
インストール方法として、

Download
Cocoapods
Carthage

がありますが、今回は、Download 方法を紹介します。それでは、さっそく、Download をクリックします。

以下の Download ページが表示されますので、[Download and unzip the latest release] の mapbox-ios-sdk-5.8.0-dynamic-with-events.zip をクリックして、mapbox-ios-sdk-5.8.0-dynamic-with-events.zip のダウンロードを行います。

ダウンロードして、mapbox-ios-sdk-5.8.0-dynamic-with-events.zip を任意の場所に解凍します。解凍後、/Users/[ユーザー名]/Library に配置します。

Embed the framework

配置後、mapbox-ios-sdk-5.8.0-dynamic-with-events/dynamic/Mapbox.framework と mapbox-ios-sdk-5.8.0-dynamic-with-events/dynamic/MapboxMobileEvents.framework を General の [Frameworks,Libraries, and Embedded Content] にドラッグします。

次に以下の画面のように [Build Phases] タブで、上部にある + ボタンをクリックして、[New Run Script Phase] を選択します。

以下の画面のようにスクリプトのテキストフイールドに次のコードを入力します。

bash "${BUILT_PRODUCTS_DIR}/${FRAMEWORKS_FOLDER_PATH}/Mapbox.framework/strip-frameworks.sh"

MapboxAccessToken の設定

Info.plist の key に MGLMapboxAccessToken を追加し、Value にアクセストークンを入力します。

pk.eyJ1IjoidmFsdWVjcmVhdGlvbiIsImEiOiJjanM0Z21xamQwNHRrM3lueXZrOHBxZmNmIn0.oF6cKsx1z4NzUNiJ7RTXNQ

マップの作成

最後にいよいよ地図の表示です。地図の表示には Storyboard で View に View Controller に追加する方法と View Controller に直接コードで記述2つの方法があります。2つの方法をそれぞれ紹介します。

1. Storyboard

Storyboard で、View に View Controller に追加します。Identity inspector で Class を MGLMapView に変更します。

次に以下の画面のように Attributes inspector で Style URL をmapbox://styles/mapbox/streets-v11 を設定します。

2. View Controller にコードを追加

View Controller に次のように追加します。

import UIKit
import Mapbox

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let url = URL(string: "mapbox://styles/mapbox/streets-v11")
        let mapView = MGLMapView(frame: view.bounds, styleURL: url)
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        mapView.setCenter(CLLocationCoordinate2D(latitude: 59.31, longitude: 18.06), zoomLevel: 9, animated: false)
        view.addSubview(mapView)
    }

}

最後は、Xcode から実行すればビルドが始まり、シュミレーターが起動して地図が表示されれば成功です。

最後に

今回はインストールから地図表示までを行いましたが、実際に実務などで使用する場合にはもっと高度な機能が必要になってくるかと思います。ドキュメントには、Examples に幾つか機能が紹介されていますので、参考になるかと思います。
次回は、この辺りについても触れて紹介できればと思います。