Maps Zen — 地図情報の視覚化

[この記事は Ankur Kotwal、Google デベロッパー アドボケートによる Geo Developers Blog の記事 "Maps Zen — Visualize" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]

編集者注: ユーザーが地図上のマーカーに感動したのは、遠い昔のことです。Maps Zen ブログ シリーズでは、デベロッパーのアプリに卓越した地図のユーザー エクスペリエンスをもたらす Google Maps API のインテグレーションについて紹介します。Zen のパターンとは何か？簡単に言うと、調和の取れたユーザー エクスペリエンスをもたらすデザイン パターンのことです。


地図上のマーカーは、地点を識別するよりもずっと便利です。マーカーは、場所に関する情報を視覚的に伝えるためにも利用できます。ユーザーが評判の良いレストランを探している場合、ユーザーはアプリを起動し、現在地の近くにある多くのレストランを見つけ出します。しかしながら、行く価値のあるレストランをユーザーに伝えるのは簡単ではありません。評価を見るには、レストランごとにタップする必要があります。
このような情報を表示するのに便利なマーカー セレクションとマーカー アニメーションをここでご紹介します。この例では、薄い色のマーカーは評価が低く、明るい色のマーカーは評価が高いことが示されています。評価の高いレストランを強調するため、マーカー上に乗せる「スチーム アニメーション（動作する蒸気）」もあります！
スチーム アニメーションを実現するため、マーカーのアイコンは定期的に setIcon()と呼ばれるメソッドにより変更されています。32ms の遅延は、1 秒間で約 30 個のマーカー アイコンの更新に相当します。つまり、1 秒のアニメーションに 30 フレームを使用しています。

mAnimHandler.post(new Runnable() {
@Override
public void run() {
marker.setIcon(mSteamFrames.nextFrame());
// Next frame in 32 ms
mAnimHandler.postDelayed(this, 32);
}
});

マーカー アイコンの彩度を減らすには、Android framework の ColorMatrixColorFilterを使用します。まず、ColorMatrixを経由して、レストランの評価スケールに基づいてカラー フィルターを設定します。この場合、星 3 つの評価を受けているレストランは、全体的にグレースケールのアイコンで示されます。星が 4.5 以上の評価を受けているレストランは、フルカラーで示されます。レストラン スケールがペイント オブジェクトに設定され、キャンバスを使用してマーカー画像にフィルターが適用されます。

ColorMatrix desatMatrix = new ColorMatrix();
desatMatrix.setSaturation(restaurantRating);

ColorFilter paintColorFilter = new
ColorMatrixColorFilter(desatMatrix);
Paint paint = new Paint();

paint.setColorFilter(paintColorFilter);

Canvas canvas = new Canvas(newImage);
canvas.drawBitmap(oldImage, 0, 0, paint);

マーカーは地図上の地点を示すのに便利な方法ですが、時として無数のマーカーが表示されることもあります。この場合、評価の高いレストランが近くに多くあるということであり、もちろん嬉しい悲鳴ではありますが、ユーザーがレストランを選ぶ上では何の助けにもなりません。このような場合、わかりやすい表示を維持したまま多数のマーカーを表示する必要があります。この課題を解決するための 2 つの方法を見てみましょう。

1 つ目は、マーカー クラスタリングの使用です。地図のズーム レベルを変更するにしたがって、受け入れられやすい表示になるようマーカーが集約されます。地図が縮小表示されると、マーカーは結合され、近辺にあるレストランの数を表示させます。
この視覚効果は大変な作業のように思われるかもしれませんが、実際はそうでもありません。Android Maps Util libraryが マーカー クラスタリングを導入する 4 つのステップを提供します。

1. 上記のライブラリを Gradle の config 設定に追加します。

compile 'com.google.maps.android:android-maps-utils:0.3+'

2. メイン データ クラスにインターフェース ClusterItemを実装します。

public interface ClusterItem {
LatLng getPosition();
}

3. クラスター マネージャーのインスタンスを作成し、マップ リスナーを 2 件登録します。

mClusterManager = new ClusterManager<>(this, mMap);
mMap.setOnCameraChangeListener(mClusterManager);
mMap.setOnMarkerClickListener(mClusterManager);

4. クラスター マネージャー を呼び出すと共に、マーカー管理コードを置き換えます。クラスター マネージャーが、マーカーの追加および削除を管理します。

mClusterManager.addItem(clusterItem);

5. オプションとして、「カスタム集約マーカー」を提供することにより、さらに効果をカスタマイズできます（例えば、カウントの代わりにイメージを表示）。

今度は、集約マーカーを表示させるための 2 つ目の方法を見てみましょう。見た目がかなりカッコいい方法です! こちらでは、カウントがマーカーの集中を示す「ヒートマップ」に置き換えられています。
ヒートマップのおかげで、この効果は Android Maps Utils libraryを利用した 4 つのシンプルなステップにより実現できます。

1. 上記のライブラリを Gradle の config 設定に追加します。

compile 'com.google.maps.android:android-maps-utils:0.3+'

2. HeatMapTileProvider のインスタンスを作成し、LatLngs に渡します。

mHeatmapTileProvider = new HeatmapTileProvider.Builder()
.data(mLatLngCollection)
.build();

3. これを使用して、オーバーレイマップを作成します。

mTileOverlay = mMap.addTileOverlay(
new TileOverlayOptions().tileProvider(mHeatmapTileProvider));

4. オプションとして、ヒートマップの勾配と範囲を指定することにより、さらなるカスタマイズが可能です。

情報過多は、モバイル アプリがしばしば直面する課題であると覚えておいて損はありません。特に地図アプリについては、場所が多数存在する場合、ユーザー エクスペリエンスの満足度が低くなるという問題があります。Android Maps Utils libraryにより美しい視覚化がもたらされ、驚くほど見やすい地図のビルドが可能になります。

Posted by Eiji Kitamura - Developer Relations Team