iOS用 Mapbox Maps SDKを使った最初のステップ

iOS用 Mapbox Map SDKはiOS用のベクターマップライブラリです。このガイドでは、マップのカスタマイズ方法、コールアウト付マーカーの追加方法 、マップ上のユーザー位置の表示方法など、iOS用Mapbox Map SDKの使い方についてご説明します。

まず始めに

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

インストールの手順を完了した後、「コードで追加」オプションを選択した場合、ビュー・コントローラーは以下のよう表示されます。また、インストール中に「ストーリーボードで追加」オプションを選択した場合、ビュー・コントローラー内でアクセスできるよう、MGLMapViewIBOutletに接続し、このガイドを続行して利用します。

show hidden lines
let mapView = MGLMapView(frame: view.bounds)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
mapView.setCenter(CLLocationCoordinate2D(latitude: 40.74699, longitude: -73.98742), zoomLevel: 9, animated: false)
view.addSubview(mapView)
show hidden lines

マップスタイルの変更

マップスタイルを変更するには、MGLMapView.styleURL プロパティをスタイルURLに設定する必要があります。このスタイルURLは、当社提供のテンプレートまたはデザイナースタイルから選択、または、Mapbox Studioでオリジナルのカスタムデザインを作成出来ます。

MGLStyleクラスでは、デフォルトのMapboxスタイルのスタイルURLを返す便利な方法を提供しています。

このガイドでは、Mapboxサテライト・ストリートスタイルを使用します。satelliteStreetsStyleURLを使って、MGLMapView.styleURLプロパティをこのスタイルのURLに設定してください。

show hidden lines
mapView.styleURL = MGLStyle.satelliteStyleURL
show hidden lines

次に、アプリケーションを起動して新しいスタイルを確認してください。

マップにマーカーを追加

マーカーアノテーション をマップに追加する方法は複数あります。MGLPointAnnotationは、マップに予め決められたポイント・スタイルを追加する簡単な方法を提供します。

viewDidLoadメソッドでは、ニューヨークのセントラル・パークにポイント・アノテーションを配置する場合、以下のコードのように表示されます。

show hidden lines
// Add a point annotation
let annotation = MGLPointAnnotation()
annotation.coordinate = CLLocationCoordinate2D(latitude: 40.77014, longitude: -73.97480)
annotation.title = "Central Park"
annotation.subtitle = "The biggest park in New York City!"
mapView.addAnnotation(annotation)
show hidden lines

アプリケーションを起動し、新しいポイント・アノテーションが追加されたことを確認してください。

MGLPointAnnotationは全てのポイント・アノテーションのベースクラスで、デフォルトのアノテーション・スタイルの代わりに、ビューやスタティック・イメージを使用するために追加で設定できます。このタイプのアノテーションの使用方法に関する詳細については、MGLAnnotationViewMGLAnnotationImageのドキュメントをご参照ください。

データ・ビジュアライゼーションの作成を目的とした iOS 用 Mapbox Maps SDK のもう 1 つの機能であるランタイム スタイル設定の使用ご検討ください。 マップにポイントを追加する方法や、各アプローチの違いに関する詳細は、マーカーとアノテーションガイドをご参照ください。

コールアウトを追加

ユーザーのタップでアノテーションがコールアウトを表示するように設定するには、MGLMapViewDelegateがて提供するデリゲート・メソッドを使用する、MGLMapViewDelegateプロトコルに準拠する必要があります。

View ControllerがMGLMapViewDelegateプロトコルに準拠し、Map ViewのデリゲートがView Controller自体に設定後、- mapView:annotationCanShowCallout:デリゲートメソッドを実行できます。その後、ユーザーがアノテーションをタップする際にコールアウトを表示するように、マップ・ビューを認識出来ます。詳細は以下をご覧ください。

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

アプリケーションを起動し、アノテーションをタップしてください。アノテーションのタイトルと小見出しを含んだコールアウトが表示されています!

マーカーにズーム

タップしたマーカーをマップの中心として調整するには、 - mapView:didSelectAnnotation: デリゲート・メソッドを実行してください。デリゲート・メソッドをコール後、マップのフィールド・ビューである、新しいMGLMapCameraを初期化します。MGLMapCameraを作成した後、- setCamera:animated:メソッドをMGLMapViewでコールし、マップの表示域を新しいカメラに設定してします。設定した表示域は、アノテーションの座標を中心とした地上からの指定距離からの視点で表示されます。

show hidden lines
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)
}
show hidden lines

ユーザーの位置を表示

デバイスの位置情報サービスを利用するには、位置情報の許可を設定する必要があります。ユーザーの位置をマップ上で表示できるように、位置情報データをどのように使用するか概要を説明をし、許可を得る必要があります。

Info.plist file でNSLocationWhenInUseUsageDescriptionキーを設定し、位置情報の許可を設定します。値を次の文字列に設定し、アプリケーションの位置情報の使用状況となる値を設定することを推奨します:Show your location on the mapは、マップの改善に役立ちます。ユーザーが初めてアプリケーションを起動する際、アプリケーションがユーザーの位置情報にアクセスを許可するかを尋ねるアラートを表示します。

さらに、Info.plist fileの中でNSLocationAlwaysAndWhenInUseUsageDescriptionキーを含めることも出来ます。このキーを使う際に、ユーザーがアプリケーションに与えるアクセス許可のレベルを選択できるよう、別の文字列を入力する事をお勧めします。許可レベルの違いについては、Appleの記事:Choosing the Location Services Authorization to Request をご参照ください。

メモ

アプリケーションのターゲットがiOS 10以前の場合、NSLocationAlwaysUsageDescriptionキーをアプリケーションに含むことができます。このキーはiOS 11では無視されるのでご注意ください。

アプリケーションの位置情報の許可を設定後、マップ・ビューの showsUserLocation プロパティをtrueに設定し、デバイスの現在のマップ上の位置を表示します。

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

位置のシュミレーション

Simulatorでアプリケーションを起動すると、位置情報サービスの許可を尋ねるダイアログボックスを表示します。許可する、をクリックしてください。

シミュレーターのメニューバーに移動して、「デバッグ」>「位置情報」>「カスタム位置情報」を選択するまで、位置情報をマップ上に表示しません。緯度:40.74699と経度: -73.98742を入力すると、ニューヨークのセントラル・パークのちょうど外に、位置を表示します!

完成したプロダクト

import UIKit
import Mapbox
class FirstStepsTutorialViewController: UIViewController, MGLMapViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
let mapView = MGLMapView(frame: view.bounds)
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
mapView.setCenter(CLLocationCoordinate2D(latitude: 40.74699, longitude: -73.98742), zoomLevel: 9, animated: false)
view.addSubview(mapView)
mapView.styleURL = MGLStyle.satelliteStyleURL
// Add a point annotation
let annotation = MGLPointAnnotation()
annotation.coordinate = CLLocationCoordinate2D(latitude: 40.77014, longitude: -73.97480)
annotation.title = "Central Park"
annotation.subtitle = "The biggest park in New York City!"
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)
}
}

次のステップ

iOS用Mapbox Maps SDKを使って、小規模なアプリを作成しました!MapboxのマップをiOSのアプリケーションに追加し、マップスタイルを表示し、マップにアノテーションを配置し、その上にユーザーの位置情報を表示しました。おめでとうございます!

Mapboxアプリケーションの開発を続けるには、以下の記事を読むことを推奨します。