ArcGIS で始める Web マップアプリ開発　ポップアップ編

はじめに

「ArcGIS で始める Web マップアプリ開発」のシリーズ記事では、はじめてマップアプリ開発を行う方に向けて、ArcGIS Maps SDK for JavaScript を使用した Web マップアプリ開発の流れをシリーズで連載しています。

第 4 回目となる今回は、マップ上でクリックしたフィーチャの属性情報を表示する画面（ポップアップ）の作成方法をご紹介します。

前回の記事と同様にソースコードは ESRIジャパンの Github で公開しています。Web アプリ開発の実行環境をお持ちでない方は、CodePen を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。

ポップアップ

ポップアップを使用すると、ユーザーのクリック操作に応じて対話的にフィーチャの属性情報を表示する機能を簡単に追加できます。

ポップアップは通常、レイヤー（FeatureLayer や GraphicsLayer など）とともに使用されますが、レイヤーを伴わない操作でも使用できます。たとえば、ユーザーが地図上でクリックした場所の緯度/経度座標を表示することもできます。

今回は、第 2 回目の記事でマップに追加した地価公示レイヤー（FeatureLayer）の属性情報を表示するポップアップを作成します。

FeatureLayer のポップアップの設定手順は、まず、PopupTemplate を使用して表示するコンテンツを定義します。次に、作成した PopupTemplate を、レイヤーの読み込みの際に popupTemplate プロパティへ設定する、という流れになります。

では、地価公示価格と利用状況の属性情報をポップアップで表示してみましょう。

1．マップの表示

マップコンポーネントを利用して地図を表示するまでのステップは、これまでの記事でご紹介していますので省略します。

2． PopupTemplate の作成

まず PopupTemplate オブジェクトを定義します。PopupTemplate では、

ポップアップの上部に表示されるタイトルとなる title プロパティ
表示させるフィールドを指定する fieldInfos プロパティ
表示のさせ方を指定する content プロパティ

を設定します。

モジュールのインポート文に続けて下記のコードを記述します。

// PopupTemplate の作成
const popupLandprice = {
  title: "地価公示",
  fieldInfos: [{
    fieldName: "L01_006", // 地価公示価格
    }, {
    fieldName: "L01_028", // 利用状況
    }],
  content: [{ // 属性値の表示
    type: "fields",
  }],
};

※ PopupTemplate は autocast（必要なときに自動でモジュールが読み込まれる）に対応しているため、モジュールのインポート文は必要ありません。

3．地価公示レイヤーの popupTemplate プロパティの設定

上記で作成した popupLandprice を、地価公示レイヤーを読み込む際にpopupTemplate プロパティとして設定します。

ステップ 2 の PopupTemplate を作成するコードに続けて、下記のコードを記述します。

// 地価公示レイヤーの読み込みと popupTemplate プロパティの設定
const landpriceLyr = new FeatureLayer({
  url: "https://services.arcgis.com/wlVTGRSYTzAbjjiC/ArcGIS/rest/services/LandPrice/FeatureServer",
  id: "landprice",
  definitionExpression: "L01_022 = '13201'",
  title: "八王子市の地価公示(FeatureLayer)",
  opacity: 0.7,
  popupTemplate: popupLandprice
});

4．属性値を整形する

現状、地価公示価格は数字のみの表示となっており、これを 3 桁区切りで表示させます。また、ポップアップで表示されるフィールド名を指定します。こうしたフィールドの書式設定には、FieldConfiguration を使用します。

まず、FieldConfiguration モジュールのインポート文を追加します。

const [WebTileLayer, FeatureLayer, FieldConfiguration] = await $arcgis.import([
  "@arcgis/core/layers/WebTileLayer",
  "@arcgis/core/layers/FeatureLayer",
  // FieldConfiguration モジュールのインポート 追加開始
  "@arcgis/core/layers/support/FieldConfiguration.js"
  // 追加終了
]);

次に、地価公示レイヤーの読み込みのコードに、FieldConfiguration プロパティを設定するコードを追加します。

// FieldConfiguration プロパティの設定 追加開始
fieldConfigurations: [
  new FieldConfiguration({
    name: "L01_006",
    alias: "地価公示価格（円/㎡）", // ポップアップで表示されるフィールド名
    fieldFormat: { type: "number", userGrouping: "always" }
  }),
  new FieldConfiguration({
    name: "L01_028",
    alias: "利用状況" // ポップアップで表示されるフィールド名
  })
] // 追加終了

これでポップアップを表示する手順は完了です。

市区町村界レイヤーの読み込み以降は第 2 回目の記事と同様に記述します。作成したアプリで地価公示のポイントフィーチャをクリックしてみましょう。

属性情報のポップアップ表示

ポップアップの様々な機能

ポップアップの表示内容には、属性値以外にも様々な情報を選択できます。

1．テキストの表示

独自のテキストを表示させる場合は、PopupTemplateの content プロパティにおいて、 type プロパティに ”text” と指定し、text プロパティに表示する文字列を指定します。text プロパティに表示する文字列には {フィールド名} と入力することで特定フィールドの属性値を埋め込むことも可能です。

上記で作成してきた popupTemplate を、下記のように追加・書き換えを行います。

content: [{
  // テキストの表示 追加・書き換え開始
  type: "text",
  text: "最寄り駅は{L01_048}駅で、{L01_049} m 離れています。"
}, // 追加・書き換え終了

テキストのポップアップ表示

2．グラフの表示

さらに、ポップアップにはグラフを表示させることもできます。

グラフを表示するには content の type プロパティに "media"、mediaInfos プロパティに表示するグラフとデータを指定します。

ここまで作成してきた popupTemplate のコードへ下記のように追加します。

// グラフの表示 追加開始
{
  type: "media",
  mediaInfos: [
    {
      type: "column-chart",
      title: "直近3年間の調査価格の変遷",
      value: {
        fields: ["L01_101", "L01_102", "L01_103"],
        normalizeField: null,
        tooltipField: "LandPrice",
      },
    },
  ],
}, // 追加終了

ポップアップへ直近3年間の地価公示の推移のグラフを載せることができました。

グラフのポップアップ表示

おわりに

本記事では、ポップアップの設定方法をご紹介しました。ぜひお手持ちのデータでも試してください！

ポップアップには本記事で紹介したもの以外にも、チャートを表示したり独自の関数を埋め込むことで、より柔軟にポップアップの表示を調整できます。米国 Esri のサンプルサイトにはポップアップのサンプルも充実しているので、ご興味がある方はぜひそちらもご覧ください。

今回作成したアプリケーションは以下で動作を確認できます。

https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_sdk/popup/popup.html

ArcGIS で始める Web マップアプリ開発　ポップアップ編