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

## はじめに

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

また、Maps SDK for iOS の最新バージョンは、本日時点では、[v5.8.0](https://github.com/mapbox/mapbox-gl-native-ios/blob/ios-v5.8.0/platform/ios/CHANGELOG.md) となっています。

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

実際に作成したプロジェクトは、[GitHub mapbox-ios-sdk-samples](https://github.com/valuecreation/mapbox-ios-sdk-samples) を参照してください。

## 新規ブロジェクトの作成

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

|![Xcode新規プロジェクト作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/66bc444d-6047-575c-1584-783b6ad9a5d4.png)|
|:-:|

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

|![Xcode新規プロジェクト作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/8e11223e-a519-5667-da8c-46831de9f9ec.png)|
|:-:|

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

|![Xcode新規プロジェクト作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/dcf6e5f1-7cb6-53f0-9805-fb138bdbee74.png)|
|:-:|

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

|![Xcode新規プロジェクト作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/400b614f-497e-a99c-05b9-9e0c5bdc85ec.png)|
|:-:|

## インストール

Mapbox の Maps SDK for iOS ドキュメント の [Overview](https://docs.mapbox.com/ios/maps/overview/) から Install をクリックします。次のような画面が表示されます。
インストール方法として、

- Download
- Cocoapods
- Carthage 

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

|![Maps SDK for iOS インストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/c854adf0-411b-a8aa-ac69-5051b5334c0c.png)|
|:-:|

以下の 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 のダウンロードを行います。

|![Maps SDK for iOS インストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/cf00f4c5-a5d2-106d-ff2e-d7d3c04804e7.png)|
|:-:|

ダウンロードして、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] にドラッグします。

|![Maps SDK for iOS インストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/e91e6f48-a4d0-b184-c654-1f2c91190d6f.png)|
|:-:|

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

|![Maps SDK for iOS インストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/3589a3b3-3269-5479-c9d6-5ea589edd1f6.png)|
|:-:|

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

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

|![Maps SDK for iOS インストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/ef1e274b-776e-a4fb-c46b-9cb66e7a7f8e.png)|
|:-:|

### MapboxAccessToken の設定

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

```
pk.eyJ1IjoidmFsdWVjcmVhdGlvbiIsImEiOiJjanM0Z21xamQwNHRrM3lueXZrOHBxZmNmIn0.oF6cKsx1z4NzUNiJ7RTXNQ
````

|![Maps SDK for iOS インストール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/905e78a6-1174-7e82-d7fb-42189d80e206.png)|
|:-:|

### マップの作成

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

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

|![Maps SDK for iOS マップの作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/56cbf595-3147-f605-c942-8dd4aa78b4aa.png)|
|:-:|

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

|![Maps SDK for iOS マップの作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/b6334c40-0d90-3a34-7e03-b39f326fa188.png)|
|:-:|

#### 2. View Controller にコードを追加 
View Controller に次のように追加します。

```Swift
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 から実行すればビルドが始まり、シュミレーターが起動して地図が表示されれば成功です。

|<img width="350px" alt="ファイMaps SDK for iOS マップの作成.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102251/e02ea9c9-9841-3c86-7b9b-1047d7b50071.png">|
|:-:|

## 最後に

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