日本語

Web AppBuilder for ArcGIS のポップアップのサイズを変更する方法

概要

Web マップでは、ポップアップは infoWindow クラスに関連付けられ、多くの場合、選択したフィーチャに関する情報の表示に使用されます。 このプロパティはスクリプト内で最初にプログラムされないため、通常、このポップアップには明確なサイズがありません。 ポップアップの詳細については、Web ヘルプ ドキュメント「ArcGIS API for JavaScript: クラス: ポップアップ」をご参照ください。

以下の手順では、ArcGIS API for JavaScript でポップアップのサイズを変更する方法について説明します。

手順

Web マップのポップアップ ウィンドウ サイズをカスタマイズするには、2 つの方法があります。 次の手順のいずれかに従って、ポップアップ ウィンドウの明確なサイズをカスタマイズおよび設定します。

  • ポップアップ ウィンドウの明確なサイズを設定する

スクリプトの resetInfoWindow: function() メソッドの最後に次の行を挿入して、ユーザー アプリ フォルダー (インストール ディレクトリ\server\apps\userApp\jimu.js) 内の MapManager.js ファイルを編集します。
resetInfoWindow: function() { 
...
...
this.map.infoWindow.resize(360,280); 
}
注意:
変更を適用にするには、Web アプリを更新します。
下の図は、デフォルトのポップアップ ウィンドウ サイズと、コードを実装した後のポップアップ ウィンドウ サイズの違いを示しています。
実装前
Picture of default popup window size
実装後
Picture of modified popup window size
 
  • コンテンツを自動的に適合するように、ポップアップ ウィンドウ サイズを設定します。

アプリ フォルダー (インストール ディレクトリ\server\apps\userApp\jimu.js\css) 内の jimu.css ファイルを、スタイル ウィンドウで次のコード スニペットの .esriPopup 関数を使用して編集します。
.esriPopup.light .esriPopupWrapper {

    position: initial!important;
}

 .esriPopup .sizer {
 position: initial !important;
 width: 100% !important;
 }
次の画像は、ポップアップ ウィンドウでのこのコードの効果を示しています。
The picture of modified popup window size in scenario 2

関連情報