MapBoxっていうOpenStreetMapのデザインをカスタムできるみたいなサービスがあるのでiOS SDKを触ってみた。 触ってて、なんか転がっている情報となんか違うなと思っていたら、ちょうど6日程前に2.0.0がリリースされたっぽい。

www.mapbox.com

使い方

1. MapBoxに登録する
2. なんかデザインいじいじする
3. pod 'Mapbox-iOS-SDK' して importしてあげてあとはよしなに

ドキュメントそこそこまとまっているのでちゃんと読めば、サンプル作る程度なら迷わなそう。

• https://www.mapbox.com/ios-sdk/examples/
  • 地図表示とピン立てるとこまでならこれ読めばできる
• https://www.mapbox.com/mapbox-studio/#darwin
  • このツール使うとデザイン超カスタマイズできる
• https://www.mapbox.com/blog/ios-native/
  • 簡単なやつならストーリーボードでちょちょいって表示することもできるっぽい
• https://www.mapbox.com/ios-sdk/api/hierarchy.html
  • リファレンス

感想

• Web上でデザインの設定ができるんだけどすごい簡単だし、いろいろな表示が出来て良い
  • ただ、アプリ側でどうやって表示するのかようわからんかった
  • JSON書いてね！みたいな記述もあれば（しかも書き方/何を変更すればいいのか分からん）
  • styleURLにMap ID（mapbox://<user.style>）指定してねみたいな記述もある

こういう感じ

        mapView.styleURL         = NSURL(string: "asset://styles/light-v7.json") // これはOK
        mapView.styleURL         = NSURL(string: "mapbox://silvers.xxxxxx") // 真っ黒の地図になった

• 地図の移動を検知するほうほうがなさそう？

google mapでいうところのこれ

    func mapView(mapView: GMSMapView, didChangeCameraPosition position:GMSCameraPosition) {
        println("didChangeCameraPosition(): latitude:\(position.target.latitude), longitude:\(position.target.longitude)")
    }

    func mapView(mapView: GMSMapView, idleAtCameraPosition position:GMSCameraPosition) {
        println("idleAtCameraPosition(): latitude:\(position.target.latitude), longitude:\(position.target.longitude)")
    }

• Mapのピンを独自の画像にすることが可能
  • ただしその場合はviewDidAppear後じゃないとクラッシュする…
  • [MGLAnnotationImage] does not work · Issue #1872 · mapbox/mapbox-gl-native · GitHub
• ピンの移動は出来ないので、removeAnnotationしてから位置変えてaddAnnotationする必要アリ

まとめ

簡単にカスタマイズされたデザインの地図表示するなら楽そうだなって感じだった。

一方で、地図上で複雑な処理させるならGoogleMapのほうがやりやすい。

Mapbox.js使えばWebでも使えるのでこっちは今すぐ使っても良いなあ！と思った（イベント会場の位置とか、お店の位置とかそういうの示すのに）。