AppとWebサイトにインドアマップを追加する

(音楽)

(拍手) エンジニアのステファンです マップの開発をしています アプリケーションとWebサイトに インドアマップを追加する方法です

iOS 11に インドアマップが導入されました 空港やモールなどの施設の 詳細なフロアマップです マップ上で屋内を閲覧し 経路を検索することもできます

GPSと同様 またはそれ以上の性能で 施設内の各フロアの 位置情報を取得できます

今から インドアポジショニングにより アプリケーションに インドアマップを表示します

まずは Indoor Mapping Data Formatについて 次にインドアマッププログラムで 利用できるツールをご紹介します 最後にアプリケーションとWebでの 表示方法を説明します

では 始めます IMDFつまり Indoor Mapping Data Formatは インドアスペースを モデリングする仕様書です 詳しく話す前に インドアマップとは 何か見ていきましょう

インドアマップはいくつかの レイヤーで構成され 各レイヤーはフィーチャを含みます インドアマップを分解します

基盤は建物のフットプリントです

そして各フロアに

部屋や通路などの設備があります

出入り口があり

モールで見かける売店もあります

店舗にはその事業名が表示されており

エレベーターやトイレなどを示す アイコンもあります

更に複数の設備を囲む境界線も 設定されています

これらがインドアマップを構成する レイヤーです しかし この説明だけでは不十分です 正確なマップを作成し表示するには コンテンツの正しい設定が必要です そこでIMDFが活躍します

IMDFによりインドアスペースを モデリングできます GeoJSON形式の２Ｄフォーマットで 作成するだけでなく アプリケーションへの適用も簡単です

IMDFアーカイブは JSONファイルです

JSON形式のマニフェストファイルと GeoJSONファイルで構成され 各ファイルには IMDFのフィーチャが含まれます

IMDFのフィーチャは GeoJSONのフィーチャです typeやgeometry propertiesなどがあります IMDFにはUUIDという 表示用のIDが必要です また 屋内のコンセプトを表現する― フィーチャタイプの フィールドも不可欠です

では 主なフィーチャを説明します

levelでは フロアの物理的な空間を設定します これには parking level 1やP1など 名前や建物の特徴などの 情報を表示できます ordinalでは建物の中での 階数を設定します

１階のordinalは０となっています 地下の階数はマイナス値にし 上階には 当然プラス値を設定します

levelにはunitを置きます unitには部屋 通路 階段やエレベーターを書きます

openingは出入り口を示します ここではアクセシビリティや 入退室管理などの propertiesも定義できます

kioskには インフォメーションや自動販売機など サービスや商品を 提供する設備を書きます

occupantでは 事業の情報を追加できます 会社名 電話番号 そして営業時間などの情報です geometryはないですが 関連するanchorを介し 表示先や住所を取得できます

anchorは 情報を表示する位置を設定します 住所も追加できます anchorはIMDFにおいて重要です occupantなどのフィーチャは anchorによって 表示位置にリンクされるのです

次はamenityです ここでは固定された設備や 証明写真機やATMなどの サービスを設定します

sectionでは モール内のフードコートなど その空間の特定のテーマを定義します 物理的な区切りが あるわけではありません

buildingは建物の構造を定義しており 名前や住所の設定もできます geometryはありませんが 範囲の指定には footprintという フィーチャを用います

footprintには３種類あります

area footprintでは ２階以上の最大範囲を ground footprintでは １階の最大範囲を示します subterranean footprintが示すのは 地下の最大範囲です

これらがIMDFの主なフィーチャです IMDFのおかげで 正確かつ柔軟にインドアスペースの データを表示できます より詳しい説明については register.apple.comに アクセスください

Appleは位置情報取得のため 多くのプロバイダと協働しています では 任意の施設に IMDFアーカイブを作成しましょう

後半のデモで作成するアーカイブは 実際にお使いいただけます

ではインドアポジショニングを どう行うか ここでインドアマッププログラムの 登場です

このプログラムに参加すると データを可視化し検証するツールを 利用できます 屋内の位置情報を示す機能や 青いドットも追加できます マップに該当の施設を 表示させることもできます

プログラムへの登録は register.Apple.com/indoorで行えます サインアップは簡単です 名前や住所など ご自身や所属機関の基本情報を 入力するだけで完了します

Appleに承認されれば 地理空間情報のツールで IMDFアーカイブを作成できます

作成したらIMDF Sandboxを使い 検証を行います

IMDFデータを可視化し 検証できるツールです 問題の多くは簡単に報告できます 修復が困難な場合は Mapmakerに戻し 修正してください

エラーがないと確認できたら 更に精密な検証テストを行います 問題なければ次のステップです 調査アプリケーションを使い インドアポジショニングを有効化します

このアプリケーションはiOSにおいて ポジショニングを行います RFのフィンガープリントの収集により 位置を確定します 固定のWi-Fiアクセスポイントから 発生するRFパターンは 自分がいる位置によって変わるため 測位が可能なのです

測位が終わると データはServerにアップされ 処理されます 問題なければ 施設内での検索が可能になります 調査アプリケーションで 位置情報の正確性も検証できます 測位を行うのはとても簡単です ガイドラインに従えば 正しい結果が得られます

ここまでIMDFアーカイブを作り それを検証し インドアポジショニングを 有効化しました 次は それをアプリケーションや Webで表示します まずアプリケーションでの表示方法を ミセレッシュが説明します (拍手) どうも

マップチームのエンジニアの ミセレッシュです では IMDFデータを使って アプリケーションに 表示する方法を説明します

Dinoseumという恐竜博物館のビジター用 アプリケーションを開発しましょう そこには展示物やショップの地図が 表示されます タップで詳細が表示される ラベルやアイコンが さまざまなエリアにあります

右上には階数を切り替える バーがあります

また インドアポジショニングによって ユーザの現在地が表示されます では 実際に作成します インドアマップは ３つの手順で表示できます

まずプロジェクトに IMDFファイルを追加し 各フィーチャの モデルクラスを作成します

次にIMDFファイルをデコードし モデルクラスの インスタンスを生成します これらを関連付けるグラフを作ります この施設は建物です 建物には フットプリントと階層があり 各階に設備や 出入り口があるといった具合です

最後にデコードしたオブジェクトから geometryをリトリーブし レンダリングすれば完成です

では入力するコードの説明です まずfeatureという 抽象クラスを作成します

各featureには 固有のidentifierが必要です

また propertiesも必須です

MKShapeオブジェクトの配列として geometryも設定可能です

これを基底とし フィーチャクラスの 具体的な実装を書いていきます

IMDFファイルのデコードについては 新しいMK GeoJSON Decoderを 使って行います 詳細は あとで説明します

次はMapKitフレームワークの addOverlayとaddAnnotation APIを使い ポリゴン 線 そして点のgeometryを書きます

マップに追加する各オーバーレイには MKMapViewDelegateメソッドや MapView rendererForOverlayを適用 各アノテーションには MapViewと viewFor annotationを適用します このメソッドでインドアマップの外観を カスタマイズできます

では博物館のマップを作りましょう

まずは 基本的なマップから これはMKMapView上の Single View Applicationです

最初にプロジェクトに IMDFファイルを追加します

アプリケーション内で処理するか Serverからダウンロードするか 選ぶことができます

ファイルを開きます これはunitのファイルです 中身をデコードして レンダリングしましょう

まずはfeatureという 抽象クラスを書きます

これにはidentifierとproperties そしてgeometryが含まれます

イニシャライザがないので追加します

初期化はproperties以外は簡単です MK GeoJSONのフィーチャでは プロパティは不透明データ型となり 使用前にデコードする必要があります

JSONデコーダークラスを使い 隣接したオブジェクトに変換します

ここでunitに 詳細な実装を書いていきます

基底クラスにfeatureを設定しましょう

unitフィーチャタイプを説明するため propertiesを定義します

これは各設備や各レベルIDを 区別するものです

ちなみにレベルIDとは 階数のことではありません

unitには occupantとamenityを追加します

これでunitフィーチャタイプの 作業は完了です unitと同じくデコードするため venueやlevelなど 他のフィーチャの モデルクラスも作成します これらはすでに プロジェクトに追加済みです サンプルコードを ダウンロードしてご確認ください

次の手順は IMDFデータのデコードです

これをIMDFデコーダーという クラスで行います

MK GeoJSON Decoderの プロパティタイプを追加 これはGeoJSONデータを デコードするための MapKitフレームワークの 新しいクラスです

デコードにはdecodeFeaturesという メソッドを使います

まずディスクからIMDFファイルの コンテンツを読み込みます 次にMK GeoJSON Decoderの インスタンスを使い データにデコードします

モデルクラスを初期化する MK GeoJSONの フィーチャオブジェクトに関しては あとで説明します

次はIMDFアーカイブや IMDFコレクションをデコードする decodeというメソッドです

デコードしたいオブジェクトの インスタンスを作成しましょう 先ほどのdecodeFeaturesを使い デコードしたい フィーチャタイプに渡します

一連のフィーチャを 正しく簡単にレンダリングするため 各フィーチャを 関連付ける必要があります 例えばvenueにはlevelがあるので ひも付けましょう

先にordinalで levelをグループ化します

levelにはunitやopeningがあるので これも関連付けます

unitとopeningの場合は レベルIDによって

グループ化を行います すべてのlevelで これを繰り返し unitを見つけてはlevelと関連付けます

openingも同様です

unitにはamenityと occupantがあるので 関連付けていきます

amenityにも同様の工程を繰り返し unitとひも付けします 同様に occupantも関連付けます

ただoccupantには例外が１つあります occupantは事業名を示しますが 固有のジオメトリはありません 代わりにanchorやオブジェクトを使い 表示点を取得します

これでIMDFアーカイブをデコードする メソッドが書けました レンダリングしたい すべてのフィーチャタイプとひも付けし デコードし構成された オブジェクトが完成しました ３つ目の手順は IMDFデータのレンダリングです

これは Indoor Map View Controllerで行います

先ほどのdecodeメソッドを使いましょう

そしてvenueに戻り オーバーレイとアノテーションに フィーチャを追加します まずshowFeaturesForOrdinalという メソッドを適用します

ordinalとは建物の全フロアにおける 階数を示すものです

このメソッドでは 前の階に属するオーバーレイと アノテーションをすべて削除します

そして現在の階に表示する フィーチャのサブセットを集約し

そこからジオメトリをリトリーブ オーバーレイとアノテーションとして マップに加えます

このメソッドを viewDidLoadからコールします

１階となる初めの階は １として設定します

MKMapViewDelegateメソッドの MapViewとrendererForOverlayでは MKOverlayRendererの インスタンスを生成できます 各タイプのGeoJSONジオメトリは 新しいMKMultiPolygonRendererと MKMultiPolylineRendererを含みます そうしてポリゴンと線を 効果的にレンダリングできます

アプリケーションを実行して マップを確認しましょう

博物館の基本的なマップが出ました

拡大しましょう

このマップでは 設備が ポリゴンで表示されていますね

トイレなどのアメニティーは アノテーションで表示され

レストランなどのテナントも アノテーションです

博物館は複数階あるので 階数表示バーを

追加します

UIを重ねたビューを用いたバーを Storyboardに作成済みなので 表示させます

階数表示バーの 更新メッセージ受信のため LevelPickerDelegateを実装 このselectedLevelDidChange メソッドは ユーザが階数をタップする度に コールされます

次は階数変更のイベントです

階数を切り替える際 選択した階のフィーチャで マップを更新するための showFeaturesForOrdinalを使います

階数表示は機能するでしょうか

階数表示バーの項目をタップすると 博物館の各階のマップが見られます

(拍手) 少し中断し おさらいをしましょう

まず IMDFフィーチャタイプに モデルクラスを作成 次にMK GeoJSON Decoderで IMDFデータをデコードし 各フィーチャタイプと関連付けました

最後にMapView上でaddOverlayと addAnnotation APIを使って レンダリングしました このマップは スタイリングが抜けていて アノテーションが単純すぎます

しかし２つの手順で より使いやすく改善できます

まずエレメントに スタイルを適用します スタイリングは 見かけや使用感の向上には必須です チームや会社のブランドに合う カラーを使いましょう

最後にユーザの現在地を 表示させれば より使いやすくなります

iOSでインドアマップを 活用するのに必要なのは インドアマッププログラムへの参加と インドア調査アプリケーションです 恐竜博物館の調査は完了したので マップに現在地や 青いドットを追加します

スタイリングに必要な コードを説明します

StylableFeatureというプロトコルには

プロパティと２つのメソッドがあります それらすべてに ジオメトリが必須です

configure overayRendererメソッドで スタイルをオーバーレイに適用します

アノテーションへの適用には configure annotationViewメソッドを 用います

Xcodeに切り替えて実行します

スタイルを適用するには このように― インドアマップ用に色を追加した Asset Catalogを活用します

色を付けるため styles.swiftというファイルを開きます StylableFeatureプロトコルは 定義済みです

では アメニティーに スタイリングを適用していきます まずStylableFeatureを適用する アメニティークラスの 拡張が必要です

アメニティーには 点のジオメトリがあるので configure annotationViewメソッドを 実施します annotationViewの背景色は Asset Catalogの既定色です アノテーションにおける既定色の 表示優先度を下げてみます

同様にunitクラスを拡張し 設備にスタイリングを適用します ここでは各設備の種類ごとに 違う色を付けていきます まず列挙型の StylableCategoryを定義します

ここに列挙した値は スタイルしたいカテゴリ名です

設備はポリゴン･ジオメトリなので configure overayRendererメソッドを 実装します

このメソッドでは unitのカテゴリごとに 塗りつぶしの色を適用します

ではメインのView Controllerクラスに 切り替え MapViewの rendererForOverlayを指定します 各ポリゴンに対し 同じ線や色は使いません configure overayRendererをコールして フィーチャに特化した スタイリングを行います

アノテーションについても同様です configure annotationViewメソッドを コールし

フィーチャ専用の スタイリングを適応します

occupantには シンプルな点やラベルを amenityには灰色の点を設定します それにはまず custom annotation viewを実装し プロジェクトに追加します ここでconfigure annotationViewを コールし フィーチャ専用のスタイルを設定します

では マップが変わったか確認します

前のマップより 格段によくなっています 設備ごとに色分けされていますし アメニティーも灰色の点で 表示されています

レストランなどのテナントは ドットやラベルで示されています

ただ 違和感もあります

マップ上のこのエリアには 通路がありますが 通路と周囲の設備の色が同じです 修正できるでしょうか

修正するには style.swiftにアクセスし 通路カテゴリを追加します

そしてconfigure overayRenderer メソッドで設定を行います

まずは色の設定です WalkwayFillという色を 通路に設定しています これはAsset Catalogにあります 見てみましょう 通路用に白があります

では 確認しましょう

更によくなりましたね 通路に違う色を適用するだけで マップがぐっと見やすくなりました

もう少し改善しましょう アメニティーには 灰色の点より アイコンの方がよさそうです

今回は恐竜のアイコンを 使ってみましょう

作成済みのアイコンがあるので マップに追加します

styles.swiftファイルに戻り ドットが設定されている アメニティーの箇所を修正します

分かりやすいように アメニティーのカテゴリと同じ名前を アイコンにも付けます この特定の名前に応じた Asset Catalogを探します アイコンがあれば annotation viewの 画像プロパティに設定し なければ このまま灰色の点で表示します

実際に見てみましょう

マップに見やすいアイコンが 表示されました トイレ エスカレーターや エレベーターなどの設備や 展示物の場所が 分かりやすく表示されています

(拍手) 最後に この博物館では 屋内の位置情報が検索可能なので 利用しましょう

ユーザの現在地を追加します まずMapViewにアクセスし ユーザの位置表示を有効化します

View Controllerで

CLlocationManagerという プロパティを追加します

アプリケーションを開いている時に

このプロパティを使い 位置情報サービスをリクエストします

位置が更新されるとMKMapViewDelegate メソッドにコールバックされ MapViewがユーザの位置を更新します

位置を更新してみましょう

まずはユーザが 施設内にいるか確認します 屋内にいる場合 更新は不要です

外にいる場合も更新は不要です ただ屋内の場合はMKUserLocationの CLLocationプロパティを使い ユーザに調整してもらいます

CLLocationは ユーザの経度や緯度だけでなく フロア情報も提供します これは施設が検証済みで ユーザが屋内にいる場合に限ります

ではCLLocationオブジェクトからの フロア情報を使いましょう showFeaturesForOrdinalで マップを更新し ユーザの位置を表示します もう一度 起動します

許可をタップすると

ユーザの現在地が表示されます (拍手) ユーザが別の階に移動すると マップも現在の階数に更新されます このデモは以上です 次はステファンが Webアプリケーションでの インドアマップの表示方法を説明します (拍手)

MapKit JSを使えば Web上で同様の インドアマップを利用できます これからMapKit JSを使って マップをレンダリングし 主要なブラウザに同じマップを 実装する方法を説明します

キーとなるメソッドはimportGeoJSONで ２つのパラメータがあります １つは変換用のGeoJSONフィーチャ ２つ目は項目の作成方法を カスタマイズする― GeoJSON Delegateオブジェクトです 基本的には２つのdelegateがあります geoJSONDidErrorはエラーに対応し geoJSONDidCompleteは 作成した項目を表示します

その後showItemsメソッドに 項目を追加し表示させます addItemsは使用しませんが これはマップの中央化を 行うものではありません

オーバーレイをスタイルするには styleForOverlayを使います 新しいオーバーレイはパラメータとなり スタイルオブジェクトが リターンされます 新規でも作成できます スタイルプロパティを介して オーバーレイに関連する― 既定値を使った カスタマイズもできます

itemForPointでも点のレンダリングを カスタマイズできます itemForPointはパラメータとして 点フィーチャを調整し 項目を返します ではマーカーアノテーションを返します タイトルや色などのオプションや―

優先度も設定可能です アノテーションが多いと 縮小した際 重複します アノテーションのクラスタリングや 表示優先度には いろいろな対策があります MapView JSではdisplayPriorityを使い 非表示にする アノテーションを決めます

importGeoJSONにより 博物館の マップに必要な物はそろいました

シンプルなMapViewから始めます こちらはWebのアセットを提供し MapKit JS認証を生成する HTTP Serverです ブラウザでマップを書くには IMDFファイルをロードし 各フィーチャに MapViewの項目を作成します 先ほど説明した importGeoJSONメソッドのおかげで 簡単に作成することができます

iOSのデモでは フィーチャのグラフを作成しました ここではお好みでフィーチャを フィルタする方法を試します フィーチャのロードや管理 フィルタに必要な― IMDFアーカイブという クラスを作成します

static loadメソッドは 必要なファイルをロードし フィーチャを配列し コンストラクタに渡します featureByIdとfeaturesByTypeの ２つのオブジェクトを作成します

このメソッドをコールし

フィーチャをロード importGeoJSONで MapKitの項目を作成します

それでは

新しく作ったマップの項目で showItemsをコールします

実行しましょう

想定どおり たくさんのジオメトリがあります MapView JSですべてのフィーチャを レンダリングしたからです そこで必要なフィーチャのみ残し フロアごとに特徴付けます ordinalから特定のタイプの フィーチャのみを返す― IMDFアーカイブクラスで いくつかメソッドを試しましょう まずはlevelです

正しいordinalのlevelのみ残します unitにも同じく設定します

レベルIDも同様です そしてunit内のamenityや openingそしてanchorにも実装します

少し中断します IMDFファイルは単純なので GeoJSONを使って簡単に作業できます 複雑なパーシングなどは不要で フィーチャに応じた propertiesの想定のみ必要です ではレンダリングロジックです

既定のordinalに対し 項目を作成するCreateItemを使います

ではフィーチャを取得します まずはlevelからです

各levelに対してunitを取得

次はamenityとopeningです

現時点で必要なフィーチャは これで全部です

ではこれらを表示していきます createItemsForOrdinalを使い ordinal 1を２階に設定し これをマップに適用します

では 書いていきます

２階の構造が 格段に見やすくなりましたね では階数表示を追加します HTML形式で階数表示バーを実装済みです この施設のフロア名で実装しました 詳細については あとで資料をご確認ください 階数表示バーは createItemsForOrdinal機能を使い 作成します

インポート済みのスクリプトを インスタンス化します

ordinal 1を選べば ２階が表示されます

もう一度

階数の切り替えができました

次はスタイリングを追加します unitの見た目がどれも一緒で 出入り口も分かりません どの設備にも ドアがないかのような 印象を与えそうです GeoJSON Delegateオブジェクトでは styleForOverlayから ポリゴンや 線のスタイルをカスタマイズできます では出入り口を白で書いてみます

openingのフィーチャを選択し strokeColorを白に設定するだけです

アプリケーションの時と同様に カテゴリに応じて色を付けましょう まずunitStyleという オブジェクトを作成します

このオブジェクトには 表示したい設備の 種類別の スタイルプロパティが含まれます カテゴリにスタイルがない場合は 既定値を使う必要があります

では対象のunitカテゴリに スタイルを設定します

その次は オブジェクトを使って unitのオーバーレイに スタイルを適用します

ここまでcategoryやfillOpacity strokeColorに 適切なスタイルを設定してきました fillColorはスタイルがなければ 既定値を設定します

このようにIMDFマップは レンダリングが容易です スタイリングにはフィーチャと カテゴリの組み合わせが重要です もちろん他のプロパティも使えます では確認しましょう

よくなりましたね 通路も表示され 施設へのアクセスが見やすいです

マップ上の赤いピンは一体何でしょうか これはアメニティーで 点のジオメトリがあります importGeoJSONは マーカーアノテーションで 点ジオメトリをレンダリングします

アプリケーションの時と 同じアイコンを使って実装します まずMapView JS 画像アノテーションを 使います 先ほどと同様 itemForPointを実装し importGeoJSONの既定動作を 置き換えます やってみましょう

propertiesから名前をインサートするか なければカテゴリに戻ります その名前をアノテーションの タイトルに使います

アノテーションをクリックすると タイトルが表示されます 全アメニティーの優先度を 低く設定すると 展示物など重要な箇所に 高い優先度を付けられます

最後に アイコンにURLがある場合 画像アノテーションを作成します ない場合は ドットアノテーションを作成します すでに作成したものを インポート済みなので 今回はそれを使います まず最初に カテゴリに応じて 正しいURLをアイコンに割り当てます iconURLというURLに対する オブジェクトを作りましょう

かなり分かりやすいですね このオブジェクトを使い

アイコンに対するURLを取得します

見て分かるとおり これらのエントリーは とても具体的です これはアメニティーではなく ティラノサウルスや竜脚類など 展示エリアのアイコンです なのでこのアイコンは 別の扱いにします

次に名前を付けます 決まったらアイコンを設定します フィーチャIDでもかまいません

すべての展示物に対して 高い優先度を設定し ティラノサウルスは最優先にします

最後に 展示物の名前に― マッチするような Unicode文字を追加します 恐竜やティラノサウルスには 実際に固有の文字を加えました それではリロードして レンダリングされているか 見てみましょう

Dinoseumのマップらしくなりました (拍手) 見てください マップを縮小すると 表示されるアノテーションは 恐竜の展示物だけになりました

それでは 次に ユーザがマップをどこまで 縮小できるか制限を決めます cameraZoomRangeという MapView JSの新規設定を使って

制限を行います 確認しましょう

制限できたでしょうか

これ以上 縮小できません (拍手) 最後に説明するフィーチャタイプは occupantです occupantには表示点がないので 扱うのが少し難しいですが 表示点を持つ anchorとリンクしています なので関連付けたanchorを使い マップ上に MapKitアノテーションを表示できます

特定のordinalで すべてのoccupantを集約できる― IMDFアーカイブクラスで メソッドを実装しましょう

こうしてoccupantとanchorを含む 一連のオブジェクトを返します では これを使って

occupantをレンダリングします

見てのとおり アメニティーの場合と似ていますが １つ例外があります インポートGeoJSONメソッドには ジオメトリを持つanchorを指定します アノテーションのタイトルには 事業名を使います

また category-annotationを使い 特定のクラスを設定します これでoccupantのカテゴリに 特定のスタイルを付加できます CSSファイルに スタイルを保存済みです

最後に もう一度リロードします

これでレストランが 見えるようになりました (拍手) まとめに入ります

まずロードしたGeoJSONファイルから フィーチャを抽出し タイプ別に体系化しました そして特定のフィーチャを取得する メソッドをいくつか実装

次に表示する階数を選べる 階数表示バーを設定し unitやopeningには カスタムスタイルを加えました

最後にamenityとoccupantに アイコンとカスタムアノテーションを 作成しました

MapView JSを使い iOSと同様のマップを構築しました 恐竜博物館のWebに載せる マップができました 主要なブラウザでも 同様のエクスペリエンスが得られます それについては ミセレッシュがご説明します

(拍手)

どうも

デモはいかがでしたか？ 最後にインドアマップ作成の 一番のコツをお伝えします

スタイリングの際は お使いのアプリケーションと 同じ使用感にすべきです チームや企業ブランドに合う 色やアイコンを使ってください 他のアプリケーションの 再現はやめましょう オーバレイやアイコンは ご自身のアプリケーションに合わせます

他と差別化できるスタイルを 選択しましょう カテゴリごとに色を分けることで 一目でスポットが分かります

分かりやすいアイコンにしましょう 見た目の主張だけでなく 目的に合う適切なものを 使ってください

ズームの度合いによって 項目を調整します 項目が多いと マップが見づらいためです 空間や建物など大きな項目を表示し 拡大するにつれ 詳細な情報を徐々に追加しましょう

周辺エリアの情報も付加します 周辺の情報があることで 自分の位置を特定しやすくなります

最後は重要です 目的地に着いた時の エクスペリエンス強化のため 屋内の位置情報を 有効化してください

詳細は 他のセッションをご覧ください What's New in MapKit and MapKit JSや Introducing the Apple Maps Programなどです ご質問がありましたら ラボまでお越しください 本日はありがとうございました 参考になれば幸いです (拍手)