地図アプリでヒートマップの配色をカスタマイズしてみよう

1 Kudo

「ヒートマップ」とは、ポイントが集まっている密度が濃い場所と低い場所をグラデーションで表現し、状況を視覚的かつ効果的に伝えることができる可視化方法です。

ArcGISでは ArcGIS Online / ArcGIS Enterprise で配信されるデータをもとにマップビューアーで作成したヒートマップを、ArcGIS の開発者製品を使ってデスクトップまたはモバイルアプリから表示することができます。

マップビューアーに定義済みの配色で表現することもできますし、カスタムアプリで自分好みに配色を設定することもできます。

上図のようなレインボーカラーは標準で選択できる配色としては存在しないので、今回は ArcGIS Runtime SDK for Android を使ってヒートマップをレインボーカラーで表現する方法をご紹介します。

レインボー カラーのヒート マップ作成のための準備と作成方法

今回ご紹介する手順では、ArcGIS Online の開発者アカウントを使用して、ヒートマップとして表示するデータを ArcGIS Online 上に作成します。まだアカウントをお持ちでない方は、ArcGIS for Developers のサイトより無償アカウントを作成してご利用いただけます。作成方法はESRIジャパン開発リソース集の「アカウントの作成」をご覧ください。
ヒートマップで表示したいポイントのフィーチャレイヤーを準備する
今回は、ArcGIS Open Data より東京23区の保育園の位置情報データを使用して、保育園の密度を表示します。リンク先からデータを取得してフィーチャレイヤーとしてArcGIS Online へホストします。
方法はCSV ファイルの公開をご覧ください。

レインボー カラーで表現するための JSON を作成する

配色を指定するための JSON の定義は、作成したフィーチャレイヤーの詳細画面から取得することができます。

下図の左側の画面は ArcGIS Online でヒートマップを表現するように設定した、フィーチャレイヤーの詳細画面です。フィーチャレイヤーの詳細画面から[サービスの URL ]を選択して、”Drawing Info” の部分を使用します。この部分は、このフィーチャレイヤーに含まれるフィーチャをどのように地図上に表現するかということを定義しています。

下図は “Drawing Info” から必要な箇所を取り出して、レインボーカラーの 7 色を RGB で指定した JSON です。

{"type":"heatmap",
"blurRadius":22.4468085106383,
"colorStops":[
{"ratio":0,"color":[133,193,200,0]},
{"ratio":0.01,"color":[255,0,0,255]}, // 赤
{"ratio":0.09249999999999999,"color":[255,165,0,255]},　// オレンジ
{"ratio":0.175,"color":[255,255,0,255]},　//黄色
{"ratio":0.2575,"color":[0,128,0,255]},　// 緑
{"ratio":0.33999999999999997,"color":[0,255,255,255]},　// 水色
{"ratio":0.42250000000000004,"color":[0,0,255,255]}, // 青
{"ratio":0.505,"color":[128,0,128,255]},　//紫
{"ratio":1,"color":[255,255,0,255]}　//赤
],
"maxPixelIntensity":1466.0194349589192,"minPixelIntensity":0}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

この JSON を ArcGIS Runtime SDK の Renderer クラスに指定すると、ヒートマップレンダラーが作成されます。

”ratio” の要素で、構成する色の比率と色を指定しています。先の手順で取り出した JSON ではもう少し色が多く定義されていましたが、レインボーカラーに合わせて減らしました。

ここで定義している要素について説明します。

要素	説明
Type	レンダラーの種類
blurRadius	ヒートマップで表示するポイントの半径を定義します。
maxPixelIntensity	表示する密度の最大値を定義します。最大値以上の密度は同じ色で表現されます。
minPixelIntensity	表示する密度の最小値を定義します。最小値以下の密度は同じ色で表現されます。
colorStops:ratio	表示する色の比率と、色を定義します。比率は0～1の間で指定します。「“ratio”：0」と「“ratio”：1」の定義は、マップがズームイン/ズームアウトを行う上で必ず必要な値となります。

カスタム カラーでレンダリングして表示する

さて、いよいよ作成したレインボーカラーの JSON 定義を使用して、フィーチャレイヤーを表示してみます。

次のサンプルコードは、ArcGIS Online でホストした東京 23 区の保育園情報のフィーチャレイヤーにレインボーカラーの JSON 定義を設定し、保育園の密度をヒートマップで表現するという処理を行うものです。

定義した JSON を 'rainbowheatmap' の変数へ設定します。

public MapView mMapView;
public ArcGISMap mArcGISMap;
 
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
 
    // フィーチャレイヤーをレンダラークラスを使用してヒート マップを表示する
    mMapView = (MapView) findViewById(R.id.mapView);
    mArcGISMap = new ArcGISMap(Basemap.Type.TOPOGRAPHIC, 35.658581, 139.745433, 15);
    mMapView.setMap(mArcGISMap);
    
    // 表示したいフィーチャ レイヤーを呼び出す
    FeatureTable featureTable = new ServiceFeatureTable("https://services.arcgis.com/wlVTGRSYTzAbjjiC/arcgis/rest/services/Fujisawa_escape/FeatureServer/0");
    FeatureLayer featureLayer = new FeatureLayer(featureTable);
 
    // ヒート マップでレンダリングするための定義をjsonから作成する
    String rainbowheatmap = "定義したjsonデータ";
    Renderer heatRend = Renderer.fromJson(rainbowheatmap);
 
    // 作成したヒート マップの定義をフィーチャ レイヤーに追加する
    featureLayer.setRenderer(heatRend);
    mArcGISMap.getOperationalLayers().add(featureLayer);
 
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

こちらが、レインボーカラーの JSON 定義を使用して東京都 23 区内の保育園の密度を表示したアプリの画面です。

マップのズームイン/ズームアウトの動きに合わせて保育園の位置情報の密度を再計算し、その結果に従って JSON で定義した配色で表示しています。

サンプルコードは ESRIジャパン GitHub で公開しています。

おまけ：ArcGIS Online で作成したヒートマップをマップ ID で表示する

ヒートマップを使用した Web マップを作成すれば、そのマップ ID を取得して下記のコードに埋め込むだけで、アプリからヒートマップを表示できます。このサンプルコードは ArcGIS Runtime SDK for Android 用の物ですが、他の ArcGIS Runtime SDK でも同じようにヒートマップを表示することが可能です。次のコードは MainActivity クラスでマップ ID を設定して地図を表示する方法を示しています。

public MapView mMapView;
public ArcGISMap mArcGISMap;
 
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
 
    // マップ ID からヒート マップを表示する
    mMapView = (MapView) findViewById(R.id.mapView);
    // マップ ID を設定して、ArcGISMapオブジェクトを作成する
    mArcGISMap = new ArcGISMap("http://www.arcgis.com/home/item.html?id=" + "マップ ID ");
    mMapView.setMap(mArcGISMap);
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍