ビューコントローラーのビューとしてマップビューをはめ込む
MapKitを利用してとりあえず地図を表示するだけなら、驚くほど簡単なプログラムで実現できます。基本的に必要なのは、次の4つのステップだけです。
1. マップビューオブジェクトを作成
2. ビューコントローラーオブジェクトを作成
3. 2のビューコントローラーのビューとして1のマップビューを設定
4. 2のビューコントローラーをプレイグラウンドのライブビューとして設定
この4つのステップを、それぞれ1行ずつのプログラムで表すと、以下のようになります。
let mapView = MKMapView()
let pgvc = UIViewController()
pgvc.view = mapView
PlaygroundPage.current.liveView = pgvc
このプログラムを実際に動かすには、先頭でUIKit、MapKit、PlaygroundSupportの各フレームワークをインポートすることが必要です。白紙のプレイグラウンドにそれらを入力したら、さっそく動かしてみましょう。
右側のグラフィック画面には、ほぼ日本列島全体が収まった地図が表示されました。純正アプリの「マップ」と同じように、1本指のドラッグ操作で表示位置を移動したり、2本指の操作でズームイン/アウトしたりして、好きな場所を好きな縮尺で表示することが可能です。
地図の表示位置と縮尺を指定する
なんらかのアプリの中でマップビューを使う場合には、最初に日本列島全体を表示して、ユーザーに移動や拡大の操作を毎回してもらうのでは不便です。そこでマップビューには、表示する地図の中心の位置と表示範囲を指定する機能が用意されています。
位置は緯度と軽度の数値で指定できます。範囲も本来は緯度と経度の範囲で指定するのですが、それでは直感的にわかりにくいので距離(縦横のメートル)で指定することもできるようになっています。距離は南北と東西の距離を別々に指定しますが、それらに異なる値を指定しても、地図の縦横比は1対1のままです。
位置はCLLocationというオブジェクトで指定します。また位置を含む領域は、MKCoordinateRegionというオブジェクトで指定します。範囲をメートルで指定する場合は、MKCoordinateRegionMakeWithDistanceという長い名前のファンクションを使います。上で示した例に、次の3行を追加するだけで、位置と範囲を指定した地図を表示できます。
let loc = CLLocation(latitude: 35.6986, longitude: 139.7455)
let reg = MKCoordinateRegionMakeWithDistance(loc.coordinate, 1500, 1500)
mapView.setRegion(reg, animated: true)
さっそく動かしてみましょう。特定の場所が特定の縮尺で表示されました。
こうしておけば、アプリに案内図などを埋め込む際にも便利でしょう。もちろんユーザーは、この状態から地図の表示位置を移動したり、縮尺を自由に変更することができます。
地図の表示内容を選択する
マップビューで表示する地図も、純正アプリのマップと同じように、表示する内容を地図、または航空写真から選ぶことができます。マップでは、もう1つ「交通情報」の選択肢があるだけですが、マップビューでは、もっと細かく表示内容を選択できます。
まず表示する地図の種類は、MKMapTypeというタイプによって5種類から選択できます。普通の地図がstandard、航空写真はsatellite、それらを重ねて表示するのがhybridです。さらに地形や建物を3Dデータからレンダリングして、角度を変えて表示できるsatelliteFlyoverと、それに地名や建物の名前、目標物などを重ねて表示するhybridFlyoverも選択できます。
またマップビューの場合には、そうした表示内容を選択する地図のタイプとは別に、交通情報を表示するかどうかのスイッチshowsTrafficが用意されています。ほかにも、建物の情報を表示するかどうかを決めるshowsBuildingsというスイッチもあります。
例えば、3DデータからレンダリングするFlyoverを表示するには、作成したマップビューオブジェクトのmapTypeプロパティの値を.satelliteFlyoverに設定すればいいのです。次の1行を加えるだけです。
mapView.mapType = .satelliteFlyover
この設定で地図を表示してみましょう。
これだけでは通常の航空写真(satellite)との違いははっきりしません。
次にタイプを.hybridFlyoverに設定してから表示してみましょう。
道路の名前や目標物が表示されました。
マップビューで表示した地図でも、純正アプリ同様、2本指でドラッグすることで見る角度を変更することができます。その効果は3DデータからレンダリングするFlyover表示でこそ最大限に発揮されます。現状では大都市部のデータしか用意されていませんが、ぜひ試してみてください。
そのまま1本指ドラッグで表示位置を動かすと、街の上を低空飛行しているような効果が得られます。2本指でひねるようにして回転させることもできます。こんなに簡単なプログラムで、ここまで絶大な効果が得られる機能は、他にはほとんど例がありません。いろいろと試してみてください。
次回の予定
今回は、Swift Playgroundsとしての新機能、マップキットを使って地図を表示してみました。せっかくなので次回もマップキットを取り上げます。次回は任意の場所にアノテーション(ピン)を設定して表示する方法を紹介する予定です。