MapBox for iOS SDK を使って、OpenStreetMap を iPhone で表示する

OpenStreetMap Advent Calendar 用の記事です。

去年、route-me というSDKを使って OpenStreetMap (OSM) を表示する記事、地図SDKは MapKit だけじゃない！OSMやBingが使える iOS用 Map SDK、route-me のセットアップ方法 という記事を書いたのですが、だいぶ経っていますので、今回は今をときめく MapBox の iOS SDK を使うという選択肢を紹介します。MapBox iOS SDK は、 route-me をベースに、MapBox の地図を呼び出しやすくする改良を加えたものです。

https://www.mapbox.com/tour/#section-mobile

MapBox で地図をデザインする

まず、 https://www.mapbox.com/ にアクセスし、アカウントを作りましょう。サイト右上の Sign up ボタンから簡単に作れます。
ログイン後、「Make a map →」というボタンなどから、早速地図のデザインを行います。
画面のような MapBox editor が立ち上がり、地図のデザインを変更できます。

デザインの仕方はそれほど難しくはありませんので、詳しくは解説しません。幾つかプリセットのデザインもありますし、ベースレイヤーを変更したり、水域、道路、建物などの色を個別に変更することもできます。
デザインが決まったら、Save ボタンを押して保存しましょう。
次に、Share ボタンを押し、「Code」タブから Map ID をメモしておきます。

地図のベースレイヤーが Streets の場合、Setting画面内Advanced メニューの中にある Force @2x scale for MapBox Streetsをチェックしておくと、Retina に最適化されます。

iOS SDK のインストール

次に、iOS 側の設定をしていきましょう。
MapBox iOS SDK は CocoaPods に対応しているので、下記の Podfile でインストールできます。

platform :ios, '5.0'
pod 'MapBox'

pod install

マップを表示

早速MapBoxのマップを表示してみましょう。最初のステップでメモしておいた、Map IDをここで使います。
呼び出し方はとても簡単です。

1. MapBox.h を include する
   #import <MapBox/MapBox.h>
2. RMMapBoxSource を、initWithMapID でインスタンス化する
3. RMMapView を、2で作ったsource を与えてインスタンス化する
4. 3 のインスタンスを view に加える
   のみです。

ソースコードの例

GRViewController.m

//
//  GRViewController.m
//  MapBoxSample
//
//  Created by Haruyuki Seki on 12/9/13.
//  Copyright (c) 2013 Georepublic. All rights reserved.
//

#import "GRViewController.h"
#import <MapBox/MapBox.h> 

@interface GRViewController ()
{
RMMapView *_mapView;
}
@end

@implementation GRViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    RMMapBoxSource *tileSource = [[RMMapBoxSource alloc] initWithMapID:@"メモしておいた Map ID"];
    _mapView = [[RMMapView alloc] initWithFrame:self.view.bounds andTilesource:tileSource];
    [_mapView setZoom:5];
    [self.view addSubview:_mapView];

}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

実行してみると、以下のように地図が表示されるはずです。

やりましたね！

MapBox 側でデザインを修正すれば、iOS 側でも反映されます。

また、MapKitライブラリと同じく、マーカーやポリゴンの設置や地図操作の検知なども可能です。
その他、MapBoxで作った複数の地図をレイヤーとして重ねることもできます。

https://www.mapbox.com/mapbox-ios-sdk/examples/ に数多くのサンプルがありますので、是非見てみて下さい。
MapBox を使うと色々できるので、反響次第で続きを書こうかと思っています。