Edited at

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

More than 5 years have passed since last update.

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

MapBoxSDK sample


MapBox で地図をデザインする

まず、 https://www.mapbox.com/ にアクセスし、アカウントを作りましょう。サイト右上の Sign up ボタンから簡単に作れます。

ログイン後、「Make a map →」というボタンなどから、早速地図のデザインを行います。

画面のような MapBox editor が立ち上がり、地図のデザインを変更できます。

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


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

iphone画面

やりましたね!

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

また、MapKitライブラリと同じく、マーカーやポリゴンの設置や地図操作の検知なども可能です。

その他、MapBoxで作った複数の地図をレイヤーとして重ねることもできます。

https://www.mapbox.com/mapbox-ios-sdk/examples/ に数多くのサンプルがありますので、是非見てみて下さい。

MapBox を使うと色々できるので、反響次第で続きを書こうかと思っています。