YOLP iOS Map SDKからMapbox iOS SDKへの移行ガイド

‍Mapbox Maps SDK for iOS は、iOS用ベクターマップライブラリです。このガイドでは、マップのカスタマイズ、吹き出し付きマーカーの追加、ユーザー位置の表示方法を含むMaps SDK for iOSの操作方法とYahoo! iOS Map SDKからの移行方法を解説します。

マップを表示‍

開始前に、インストールガイドに従ってMapbox Maps SDK for iOSをインストールしてください。CarthageやCocoaPodsなどの依存関係マネージャーを使用し、Mapbox Maps SDK for iOSを統合するか、SDKを手動でインストールします。

インストール完了後、「コードで追加」オプションを選択した場合、ビューコントローラはこちらのドキュメンテーションのようになります。インストールプロセス中に、「ストーリーボードで追加」オプションを選択した場合MGLMapViewをIBOutletに接続し、ビューコントローラ内でこのガイドにアクセスできるようにする必要があります。詳細はこちらのドキュメンテーションをご覧ください。

マップスタイルの変更

マップのスタイルを変更するには、MGLMapView.styleURLプロパティをスタイルのURLに設定します。このスタイルURLは、Mapboxが提供するデザイナースタイル か Mapbox Studioでカスタムに作ったスタイルが指定できます。

MGLStyle クラスは、デフォルトの Mapbox スタイルのスタイル URLを返す便利なメソッドを提供します。

このガイドでは、Mapbox Satellite Streetsスタイルを使用します。提供された簡易メソッドである satelliteStreetsStyleURL を使用し、MGLMapView.styleURL プロパティをこのスタイル用URLに設定します。

let mapView = MGLMapView(frame: view.bounds)
mapView.styleURL = MGLStyle.satelliteStyleURL

マーカー追加

マップに、アノテーションとも呼ばれるマーカーを追加する方法は多数あります。MGLPointAnnotationは、定義済みポイントスタイルをマップにスイカする最も簡単な方法を提供します。

viewDidLoadメソッドはニューヨーク市のセントラルパークにポイントアノテーションを配置するため、以下のコードのように見える必要があります。

let annotation = MGLPointAnnotation()
annotation.coordinate = CLLocationCoordinate2D(latitude: 35.6762, longitude: 139.6503)
annotation.title = "東京都"
annotation.subtitle = "(Tokyo)"
mapView.addAnnotation(annotation)

コールアウト追加

ユーザーがタップした際にコールアウトを表示するアノテーションを取得するには、ビューコントローラがMGLMapViewDelegateプロトコルに準拠し、MGLMapViewDelegateが提供するデリゲートメソッドを使用する必要があります。

ビューコントローラがMGLMapViewDelegateプロトコルに準拠し、マップビューのデリゲートがビューコントローラ自体に設定されると、-mapView:annotationCanShowCallout:デリゲートメソッドを実装できます。これにより、タップされた際にアノテーションがコールアウトを表示する必要があることを、マップビューに認識させることができます。これらの亜kン善実装を以下に示します:

func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
  // Always allow callouts to popup when annotations are tapped.
  return true
}

ユーザー位置の表示

位置情報のアクセス許可をまだ構成していない場合、デバイス位置情報サービスを使用するように構成する必要があります。マップにユーザー位置を描画する前に、ユーザーの許可を求めアプリケーションが位置データをどのように使用するかについて簡単に説明する必要があります。

Info.plistファイルでNSLocationWhenInUseUsageDescriptionキーを設定して、場所のアクセス許可を構成します。アプリケーションの場所の使用法の説明となりますので、値を次の文字列に設定することをお勧め致します。: マップ上の場所を示しマップ向上に役立ちます。ユーザーが初めてアプリケーションを開くと、アプリケーションに自分の場所へのアクセスを許可するかどうか尋ねるアラートが表示されます。

さらに、Info.plist内にNSLocationAlwaysAndWhenInUseUsageDescriptionキーを含めることができます。このキーを使用する際にユーザーがアプリケーションに付与する許可のレベルを決定できるように、別の文字列の提供をお勧め致しますこれら許可レベルの違いの詳細に関しては、AppleのChoosing the Location Services Authorization to Requestドキュメントをご参照ください。

// Allow the map view to display the user's location
mapView.showsUserLocation = true

まとめ

import UIKit
import Mapbox
class ViewController: UIViewController, MGLMapViewDelegate {
  override func viewDidLoad() {
    super.viewDidLoad()
    let mapView = MGLMapView(frame: view.bounds)
    mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    mapView.setCenter(CLLocationCoordinate2D(latitude: 35.6762, longitude: 139.6503), zoomLevel: 9, animated: false)
    view.addSubview(mapView)
    mapView.styleURL = MGLStyle.satelliteStyleURL
    // Add a point annotation
    let annotation = MGLPointAnnotation()
    annotation.coordinate = CLLocationCoordinate2D(latitude: 35.6762, longitude: 139.6503)
    annotation.title = "東京都"
    annotation.subtitle = "(Tokyo)"
    mapView.addAnnotation(annotation)
    // Set the map view's delegate
    mapView.delegate = self
    // Allow the map view to display the user's location
    mapView.showsUserLocation = true
  }
  func mapView(_ mapView: MGLMapView, annotationCanShowCallout annotation: MGLAnnotation) -> Bool {
    // Always allow callouts to popup when annotations are tapped.
    return true
  }
  func mapView(_ mapView: MGLMapView, didSelect annotation: MGLAnnotation) {
    let camera = MGLMapCamera(lookingAtCenter: annotation.coordinate, fromDistance: 4500, pitch: 15, heading: 180)
    mapView.fly(to: camera, withDuration: 4,
      peakAltitude: 3000, completionHandler: nil)
  }
}