地図SDKは MapKit だけじゃない！OSMやBingが使える iOS用 Map SDK、route-me のセットアップ方法

MapKit の有無を言わせない変更により自作アプリの地図がしょぼくなってしまったとお嘆きのデベロッパーのあなたにお送りします。自分の地図アプリが Apple 対 Google の争いに巻き込まれて影響を受けるなんて耐えられない！そう思いませんか？

route-me という SDK をご存知でしょうか。MapKitと同じような機能を提供するオープンソースのSDKです。現在のところ、 OpenStreetMap, Microsoft VirtualEarth, CloudMade, OpenAerialMap, OpenCycleMap, SpatialCloud などに対応しています。

この記事では、route-me の使い方を解説します。

ライブラリのダウンロードとセットアップ

早速 iOS でビルドしてみましょう。まずはソースコードをダウンロードしてきます。

git clone https://github.com/route-me/route-me.git

clone している間に、CloudMade のライセンスキーを取ってきましょう。http://cloudmade.com/register からアカウントを取ると、APIキーが取得できます。
clone が終わったら、サンプルプロジェクトを適当なフォルダにコピーします。

cp -rp samples/SampleMap/ ../your/awesome/mapproject

プロジェクトファイルを開きます。

open your/awesome/mapproject/SampleMap.xcodeproj/

Exampleフォルダ以下のプロジェクトからは相対パスでroute-meのライブラリにリンクがされている為、Exampleプロジェクトを別のフォルダに移すとリンクが壊れビルドできませんので、リンクを修正します。

• MapView.xcodeproj のリンク先を、route-me フォルダ配下のMapView.xcodeproj に指定しなおします。（XCode4 以降の場合、左のファイルインデックスから赤くなっている MapView.xcodeproj を選択した状態で右ペインの Utility を開き、Location 部分のアイコンをクリックすると変更できます。）
• SampleMap の TARGETS を選択し、Build Phases からTarget Dependencies を開き、MapView を追加します。
• Link Binary With Libraries を開き、libMapView.a を追加します。
• Build Settings を開き、Header Search Paths を検索、../MapView/ となっているところを正しい位置に修正します。

MainViewController.m の、CloudMade のライセンスキー部分を、先ほど取得したものに変更します。

MapViewController.m

id myTilesource = [[[RMCloudMadeMapSource alloc] 
              initWithAccessKey:@"YOUR_API_KEY" styleNumber:999] autorelease];

本来これで動くはずなのですが、私の場合ビルドすると RMCloudMadeMapSource.h が存在しないというエラーになってしまいました。
よく見ると MapView.xcodeproj/Map の中にRMCloudMadeMapSource 関連のファイルが入っていません。したがって Finder から、MapView/Map/以下にある RMCloudMadeMapSource.h と RMCloudMadeMapSource.m のファイルを XCode 上の MapView.xcodeproj/Map にドラッグドロップしたところ動くようになりました。

移動やピンチイン、アウトでのズームなんかも問題なく動きます。

デザインを変更する

あれ、でもなんか画像が夜みたいになってますね。かっこいいけど地図としてはみにくいです。ちゃんとした地図を表示したいですね。CloudMade にはStyleEditor というものがあって、ユーザーが様々なスタイルを作ることが可能です。先ほどの

MapViewController.m

id myTilesource = [[[RMCloudMadeMapSource alloc] 
              initWithAccessKey:@"YOUR_API_KEY" styleNumber:999] autorelease];

の、styleNumber 部分が実はスタイルを指定しているのです。
http://maps.cloudmade.com/editor から、好きなスタイルを選んできましょう。

いっぱいありますね！ 右下の数字がStyleIDです。試しに997番を選んでみました。

MapViewController.m

id myTilesource = [[[RMCloudMadeMapSource alloc] 
              initWithAccessKey:@"YOUR_API_KEY" styleNumber:997] autorelease];

みごとスタイルが変更されました。やりましたね！

CloudMade 以外の地図サービスの使い方も書こうと思ってたのですが、時間がなくなってきたので今日はこのへんで。