対話型ダッシュボードの構築

ArcGIS Dashboards では、意思決定を支援するマップやリアルタイム データなどの情報を 1 つの画面にまとめて表示できます。 ほとんどのダッシュボードでは、すべてのエレメントが一度に表示され、情報がひと目でわかります。 ただし、対話型ダッシュボードの方が適した状況もあります。 対話型ダッシュボードでは、ユーザーが選択したりフィルタリングしたりすることによって、必要な情報だけをダッシュボードに表示できます。

このチュートリアルでは、ユーザーがカナダの電気自動車充電ステーションを検索可能な対話型ダッシュボードを構築します。 電気自動車がますます普及するにつれて、充電ステーションがどこにあるかを把握することが重要になっています。 十分な数の充電ステーションがあれば、電気自動車への切り替えを決断しやすくなります。 旅行中も確実に充電ステーションにアクセスできることが重要です。 充電ステーションを検索する場合、すべての場所を調べる必要はなく、目的の場所で自分の車種に適したステーションだけを検索します。 ユーザーが州、市町村、およびコネクタ タイプによってデータを絞り込むことができるようにダッシュボードを構成します。

このチュートリアルは、2024 年 2 月 28 日に最終テストされました。

最終結果の表示​

要件

• ArcGIS 組織でのユーザー、公開者、または管理者ロール (ソフトウェア アクセスのオプションをご参照ください)
• ArcGIS Dashboards

Web マップの構成および Web マップを使用したダッシュボードの作成

最初に、ダッシュボードの基盤となる Web マップを設定します。 電気自動車充電ステーションの位置情報がすでに含まれている、既存の Web マップをベースとして使用します。 このマップのコピーを ArcGIS アカウントに保存することで、これを編集してマップからダッシュボードを作成できるようにします。

Web マップの構成

最初にマップのポップアップを構成します。これを後でダッシュボードで再利用します。

1. Electric charging stations in Canada Web マップを開きます。
2. [サイン イン] をクリックし、ArcGIS の組織アカウントでサイン インします。

   注意:

   組織アカウントがない場合は、ソフトウェア アクセスのオプションをご参照ください。

   カナダの電気自動車の充電ステーションの場所を示すマップが表示されます。 次に進む前に、このマップのコピーを保存します。

   

3. 必要に応じて、[コンテンツ] (暗い背景の) ツールバーの一番下にある [展開] ボタンをクリックします。

   

4. [保存して開く] をクリックし、[名前を付けて保存] を選択します。

   

5. [マップの保存] ウィンドウの [タイトル] で、既存のテキストの末尾に名前またはイニシャルを追加します。

   注意:

   ArcGIS 組織に同じ名前で 2 つのレイヤーを作成することはできません。 レイヤー名にユーザーのイニシャルを追加すると、組織の他のユーザーもこのチュートリアルを完了することができます。 レイヤーが作成されたら、マップ内で名前を変更してイニシャルを削除できます。基になるデータ レイヤーの名前には影響しません。

   

6. [保存] をクリックします。

   マップが編集できる状態になりました。 最初に、使用可能なレイヤーを表示して、ダッシュボードを構築する際に使用可能なデータを確認します。

7. [コンテンツ] ツールバーの [レイヤー] をクリックし、[レイヤー] ウィンドウを開きます。

   

   3 つのレイヤーが [レイヤー] ウィンドウにリストされます。 Electric Charging Stations ではマップに青のドットが表示されます。 このデータは ArcGIS Living Atlas of the World を介してカナダ政府、カナダ天然資源省から提供され、電気自動車の充電ステーションの位置情報と属性情報が含まれています。 主にこのデータを使用してダッシュボードを作成します。

   OpenStreetMap Amenities for North America レイヤーは、大きな縮尺でのみ表示されるように構成されているため、マップに表示されていません。 拡大してこのレイヤーを表示します。

8. マップに多数のシンボルが表示されるまで拡大します。

   

   OpenStreetMap レイヤーは、充電ステーションを検索しているユーザーに周辺情報を提供します。 車両の充電には時間がかかるため、レストラン、ショップ、図書館などの施設に近い充電ステーションの方が魅力的です。 施設レイヤーは拡大したときにだけ表示されるため、マップが情報過多になることはありません。

   3 番目のレイヤー Provinces and Territories of Canada はオフになっています。 このレイヤーは、後でダッシュボードの空間処理を構成するときに使用します。 ユーザーに境界が表示される必要はないため、このレイヤーがマップに表示されることはありませんが、このレイヤーが存在することで、ユーザーは州によって充電ステーションを絞り込むことができるようになります。

   次に、Electric Charging Stations レイヤーのポップアップを構成します。

9. [レイヤー] ウィンドウで、Electric Charging Stations レイヤーをクリックして選択します。
10. [設定] (明るい背景の) ツールバーを展開し、[ポップアップ] をクリックします。

    

    サンプル ポップアップがマップに表示されます。

    

    ポップアップは、マップ フィーチャの概要を示すのに役立ちます。 デフォルトでは、フィーチャのフィールドとその値がすべて表示されます。 現在のポップアップには多数のフィールドがリストされ、その多くが空になっています。 作成するダッシュボードにはこのレイヤーのポップアップが表示されるため、充電ステーションを探している人が必要とする情報だけが含まれるように構成します。

11. [ポップアップ] ウィンドウで、[タイトル] をクリックし、このフィールドが空白になっていることを確認します。

    

    フィーチャのタイトルは、ポップアップではなくダッシュボードで構成します。

12. [フィールド リスト] をクリックし、[フィールドの選択] をクリックします。
13. [フィールドの選択] ウィンドウで、[すべて選択解除] をクリックしてすべてのフィールドを選択解除します。
14. [Station Name] フィールドをクリックして選択します。

    

    このフィールドの横にチェック マークが表示され、サンプル ポップアップに表示されます。

    

15. [フィールドの選択] ウィンドウで、[フィールドの検索] をクリックし、「EV Connectors」と入力します。 検索結果で、[EV Connectors] フィールドをクリックして選択し、ポップアップに追加します。

    

16. 次のフィールドを検索して追加します。
    • Street Address
    • Station Phone
    • EV Pricing
    • Access
    • Access Days Time
    • Cards Accepted
    • Date Last Confirmed
17. [完了] をクリックします。

    サンプル ポップアップに 9 つのフィールドが追加されました。 これらは追加した順序で表示されます。

    

18. [ポップアップ] ウィンドウを閉じます。

Web マップからのダッシュボードの作成

次に、Web マップを保存し、そこからダッシュボードを作成します。

1. マップ上で、[デフォルト マップ ビュー] ボタンをクリックしてデフォルトのマップ ビューに戻ります。

   

   マップを保存すると、保存したときの表示範囲が新しいデフォルトのマップ ビューになります。 ユーザーがダッシュボードを表示すると、このデフォルトの表示範囲が最初に表示されます。

2. [コンテンツ] ツールバーにある [保存して開く] をクリックし、[保存] をクリックしてマップを保存します。
3. [コンテンツ] ツールバーで [アプリの作成] をクリックしてから [ダッシュボード] をクリックします。

   

4. [新しいダッシュボードの作成] ウィンドウで、次の情報を入力します。
   • [タイトル] に、「Vehicle charging stations」と入力します。
   • [タグ] に「electric vehicles」と入力し、Enter キーを押します。
   • [サマリー] で、既存のテキストを削除し、「This dashboard allows you to find electric vehicle charging stations near you」と入力します。
5. [ダッシュボードの作成] をクリックします。

   新しいダッシュボードが表示されます。 ダッシュボード全体に 1 つのエレメント (前の手順で構成した Web マップ) が表示されています。

Web マップからダッシュボードを作成しました。 これまでのところ、外観はマップと変わりませんが、次の手順で、マップに表示される充電ステーションについて詳細情報を提供するエレメントを追加して構成します。

ダッシュボードの情報エレメントの構成

カナダの充電ステーションの場所が表示されるダッシュボードを作成します。 タイトルとして表示されるヘッダー、充電ステーションの総数が表示されるインジケーター、選択した地域の充電ステーションがリストされるテーブル、選択した充電ステーションの (構成したポップアップからの) 詳細情報を追加します。

ヘッダーの追加

ダッシュボードに追加する最初のエレメントは、ヘッダーです。 ヘッダーはダッシュボードのタイトルとして機能します。 このチュートリアルの後の手順で、ヘッダーにセレクターを追加します。

1. ダッシュボードのツールバーの一番下にある [展開] ボタンをクリックします。
2. ツールバーの [表示] ボタンをクリックして [表示] ウィンドウを開きます。

   

   このウィンドウではダッシュボードのすべてのエレメントを構成できます。

3. [ヘッダー] タブをクリックし、[ヘッダーの追加] をクリックします。

   

   [ヘッダー] 構成ウィンドウが開き、左側に設定、右側にプレビューが表示されます。

4. [タイトル] に、「Electric vehicle charging stations」と入力します。

   

   ヘッダー エレメントには、デフォルトで、[サイン アウト] オプションを含むメニューがあります。 このダッシュボードは不特定のユーザーが利用することを目的としているため、ユーザーがサイン インとサイン アウトを行う必要はありません。 このメニューを削除します。

5. [メニュー リンク] セクションを展開し、[サイン アウト] をオフにします。

   

6. [完了] をクリックします。

   ダッシュボード上のマップの上側にヘッダーが表示されます。

   

稼働している充電ステーションを示すインジケーターの追加

次に追加するエレメントは、カナダで稼働している充電ステーションの数を示すインジケーターです。 このチュートリアルの後の手順で、ユーザーによって選択されたフィルターに基づいて数値が表示されるようにインジケーターを構成します。

1. ツールバーで、[エレメントの追加] をクリックします。

   

   [エレメントの追加] ボタンが青色に変わり、マップ上の色がフェードし、マップの各端に [追加] ボタンが表示されます。 エレメントはヘッダーと同じ方法で [レイアウト] ウィンドウから追加することもできますが、[エレメントの追加] を使用すると、エレメントを追加するときにその位置を指定することができます。

2. マップの下側で、[追加] ボタンをクリックし、[インジケーター] をクリックします。

   

   [レイヤーの選択] ウィンドウで、インジケーターのデータを提供するマップのレイヤーを選択するよう求められます。

3. [レイヤーの選択] ウィンドウで、[Electric Charging Stations] をクリックします。

   

   インジケーターのプレビューが表示されます。

   

   デフォルトでは、データ ソース内のフィーチャの数がインジケーターの値として表示されます。 この場合、この値はカナダで稼働している充電ステーションの総数です。 このレイヤーは毎日更新されるため、実際のプレビューではこのチュートリアルの画像とは異なる数値が表示されることがあります。

   インジケーターには、数値の意味についての説明はありません。 その意味を説明するラベルを追加します。

4. [インジケーター] タブをクリックします。 [下位テキスト] に、「Operational stations」と入力します。

   

5. [アイコンの追加] をクリックします。
6. [その他] を展開し、丸枠チェック マーク アイコンをクリックします。

   

7. [OK] をクリックします。
8. [インジケーター オプション] ウィンドウで、[位置] が [左] に設定されていることを確認します。

   プレビューで、アイコンが数値の横に表示されます。 その色をマップのシンボルに合わせて変更します。

9. [塗りつぶし] の色をクリックします。 [Hex] に「005ce6」と入力して、Enter キーを押します。
10. [値の書式設定] セクションを展開し、[単位の接頭辞] をオフにします。

    プレビューに、充電ステーションのおおよその数ではなく正確な数が表示されるようになりました。

    

    後から、インジケーター エレメントをダッシュボード上の他のエレメントに接続して、ユーザーが適用したフィルターに基づいて数値が変わるようにします。 ここでは、インジケーター エレメントに意味のある名前を付けて、後からアクションを構成する際に簡単に識別できるようにします。

11. [一般] タブをクリックします。
12. [名前] フィールドに、「Operational stations indicator」と入力します。
13. [完了] をクリックします。

    ダッシュボード上のマップの下側にインジケーター エレメントが表示されます。 これでは大きすぎますが、エレメントをさらに追加するとサイズが変わります。

テーブルの追加

テーブルは、データのフィールドや値を整理して表示するのに便利です。 対話型ダッシュボードでは、テーブルはアクションのソースになることができます。 たとえば、ユーザーはダッシュボードのテーブルから充電ステーションを選択して詳細を表示することができます。 充電ステーションの簡単な概要を示すいくつかのキー フィールドが表示されるようにテーブルを構成します。ユーザーはこのキー フィールドを選択することで詳細を表示します。

1. ツールバーで、[エレメントの追加] をクリックします。
2. インジケーター エレメントにポインターを合わせます。

   インジケーター上に [追加] ボタンが表示されます。

3. インジケーターの左側の [追加] ボタンをクリックします。 [テーブル] をクリックします。

   

4. [レイヤーの選択] ウィンドウで、[Electric Charging Stations] をクリックします。

   [テーブル] 構成ウィンドウが表示されます。

5. [テーブル タイプ] として、[フィーチャ] を選択します。
6. [値フィールド] で、[フィールドの追加] をクリックし、[Station_Name] を選択します。

   

   [Station Name] フィールドが [値フィールド] リストに追加され、プレビュー テーブルの 1 列目として表示されます。

   

   [値フィールド] セクションによってテーブルの列が決まり、各行は個々のフィーチャを表します。

7. [フィールドの追加] をさらに 4 回クリックして次のフィールドを追加します。
   • Street_Address
   • City
   • ZIP
   • Facility_Type

   プレビュー テーブルが更新されて新しいフィールドが追加されます。

8. [テーブル] タブをクリックし、[行のストライピング] をオンにします。

   

   プレビュー テーブルの行が白色と薄い灰色で交互に表示されて、テーブルが見やすくなります。

   次に、ダッシュボードでテーブルのヘッダーがさらに目立つように表示設定します。

9. [ヘッダー] タブをクリックします。
10. [ラベルのオーバーライド] セクションで、ラベルからアンダースコアを削除して、ラベルを [Station Name]、[Street Address]、[Facility Type] にします。
11. [テキストの色] の値を「#ffffff」に変更します。 [背景色] を「#004da8」に変更します。

    テーブルのヘッダーが濃い青色に変わり、白色のテキストが表示されます。

    

    テーブルの表示エリアが構成されました。 次に、テーブルに名前を付けて、後からアクションを設定する際に簡単に識別できるようにします。

12. [一般] タブをクリックします。 [名前] フィールドに、「Station table」と入力します。

    このテーブルはユーザーが少なくとも 1 つの地域を選択したときにだけ情報が表示されるように構成するため、選択が行われていない場合にテーブルに表示されるテキストも設定します。

13. [選択なし] セクションを展開し、[ラベル] の横の [編集] をクリックします。
14. テキスト エディターで、[書式設定] ボタンをクリックし、[見出し 3] を選択します。

    

15. テキスト エディターで、「Select a province to start viewing stations」と入力します。
16. [完了] をクリックします。

    ダッシュボード上のインジケーターの横にテーブルが表示されます。

    

詳細エレメントの追加

詳細エレメントには、フィーチャに関する情報が表示されます。 これを使用して、先ほど Web マップで構成した充電ステーションのポップアップ コンテンツを表示します。

1. ツールバーで、[エレメントの追加] をクリックします。
2. ダッシュボードの左側にある [追加] ボタンをクリックし、[詳細] をクリックします。

   

3. [レイヤーの選択] ウィンドウで、[Electric Charging Stations] を選択します。

   詳細エレメントのプレビューが表示されます。 先ほどポップアップ用に構成したものと同じフィールドがリストされています。

4. [一般] タブをクリックします。 [名前] に、「Station details」と入力します。
5. [タイトル] で、[編集] をクリックします。
6. [書式設定] ボタンをクリックし、[見出し 2] を選択します。 「Station details」と入力します。

   

   プレビューにタイトルが表示されます。

   

7. [選択なし] セクションを展開します。 [ラベル] で、[編集] をクリックします。
8. [書式設定] ボタンをクリックし、[見出し 3] を選択します。 「Select a station to view details」と入力します。

   充電ステーションが選択されていない場合には必ず、このメッセージが詳細エレメントに表示されます。

9. [完了] をクリックします。

   ダッシュボード上の他のエレメントの左側に、詳細ウィンドウが表示されます。 これはダッシュボードの幅の半分を占めています。

10. ダッシュボードの幅の約 25 パーセントになるまで詳細ウィンドウの右端をドラッグします。

    

ダッシュボードのマップ、ヘッダー、インジケーター、テーブル、および詳細エレメントの構成が完了しました。 次に、ユーザーがダッシュボード上のデータを絞り込むことができるようにします。

ダッシュボード セレクターの構成

現在のところ、ダッシュボードにはカナダのすべての充電ステーションの情報が表示されます。 しかし、ほとんどのユーザーは、別の市町村や州にある充電ステーションの情報は必要としません。 これに加えて関心があるのは、自分の車種に適したタイプのコネクタを備えた充電ステーションだけです。

次に、3 つのセレクターを追加して、ユーザーが州、市町村、コネクタ タイプによって充電ステーションの検索を絞り込むことができるようにします。 セレクターによってダッシュボードがフィルター処理され、ユーザーに関連する情報だけが表示されます。

州セレクターの追加

1 つ目に追加するのは、ユーザーが州を選択できるようにするセレクターです。 ユーザーがダッシュボードで操作を行うときには、最初にこのセレクターを使用します。

1. 必要に応じて、ツールバーの [表示] ボタンをクリックして [表示] ウィンドウを開きます。
2. [表示] ウィンドウで、[ヘッダー] タブをクリックします。 [セレクターの追加] をクリックし、[カテゴリ セレクター] をクリックします。

   

   このセレクターを構成して、カナダのすべての州が表示されるドロップダウン リストにします。 州を表すレイヤーがマップにあるため、このレイヤーのフィーチャからセレクターのカテゴリを作成します。

3. [カテゴリの設定元] で、[フィーチャ] を選択します。
4. [レイヤーの選択] ウィンドウで、[Provinces and Territories of Canada] をクリックします。

   

5. [ライン アイテム テンプレート] で、[フィールドの追加] ボタンをクリックし、[PRENAME] を選択します。

   

   PRENAME は英語の州名の略称です。 プレビューが更新されて州名が表示されます。

   

6. [セレクター] タブをクリックします。 [ラベル] に、「Select a province」と入力します。

   プレビューでテキストが更新されます。

7. [アイコンの追加] をクリックします。
8. [ハブ] セクションを展開し、[境界] アイコンをクリックします。

   

9. [OK] をクリックします。
10. [検索結果の表示] をオンにします。
11. プレビューをクリックします。

    州のリストが表示されます。 一番上にある検索バーを使用すると、リストをテキストで検索できます。

    

    ユーザーが州を 1 つも選択しないことを可能にするアイテムをこのリストに追加します。

12. [[なし] オプション] をオンにします。 [[なし] のラベル] に「No province selected」と入力します。

    

    プレビューが更新されて新しいテキストが表示されます。

13. [一般] セクションを展開します。 [名前] に、「Province selector」と入力します。
14. [完了] をクリックします。

    ダッシュボード上のマップの上側にあるヘッダーに州セレクターが表示されます。

    

市町村セレクターの追加

2 つ目に追加するセレクターは市町村セレクターです。 ユーザーがこのセレクターを使用して、特定の市町村によって充電ステーションを絞り込むことができるようにします。

1. [表示] ウィンドウの [ヘッダー] タブで、[セレクターの追加] をクリックし、[カテゴリ セレクター] を選択します。

   前のセレクターでは、フィーチャからカテゴリを作成しました。 今度は、市町村を表すフィーチャがありません。 ただし、Electric Charging Stations レイヤーの [City] フィールドで検出されたすべての値がリストされるようにセレクターを構成できます。 このためには [グループ化された値] オプションを使用できます。

2. [カテゴリの設定元] セクションで、[グループ化された値] を選択します。

   

3. [レイヤーの選択] ウィンドウで、[Electric Charging Stations] を選択します。
4. [カテゴリ フィールド] で、[City] を選択します。

   [City] フィールドが [並べ替え] セクションにも追加されます。 これにより、セレクターで市町村がアルファベット順に並べ替えられて、見つけやすくなります。

   

   [最大カテゴリ] は 50 に設定されているため、最初の 50 市町村だけがセレクターに表示されます。 ほとんどの州には 50 を超える市町村があるため、この上限を上げます。

5. [最大カテゴリ] に「350」と入力します。
6. [セレクター] タブをクリックします。 [ラベル] に、「Select a city」と入力します。

   新しいラベルがプレビューに表示されます。

   

7. [アイコンの追加] をクリックします。
8. [ハブ] セクションを展開し、[都市] アイコンを選択して [OK] をクリックします。

   

   アイコンがプレビューに表示されます。 次に、ユーザーが一度に複数の市町村を選択できるようにします。

9. [選択] で、[複数] を選択します。 [プレースホルダー テキスト] に、「No city selected」と入力します。

   

10. [検索結果の表示] と [リセットとすべて選択の表示] の切り替えボタンをオンにします。
11. プレビューをクリックして市町村のリストを展開します。

    

    [リセット] ボタンと [すべて選択] ボタンがリストの下に表示されます。 ユーザーはこれらのツールを使用して長いリストを簡単に操作することができます。

12. ウィンドウの下部にある [一般] セクションを展開します。
13. [名前] に、「City selector」と入力します。
14. [完了] をクリックします。

    ダッシュボードのヘッダーに新しいセレクターが表示されます。

    

コネクタ セレクターの追加

最後に追加するのは、ユーザーが自分の車種と互換性のあるコネクタ タイプを選択できるようにするセレクターです。 このセレクターを使用して、選択したタイプのコネクタを備えた充電ステーションだけが表示されるようにその他のエレメントがフィルター処理されます。

1. [表示] ウィンドウの [ヘッダー] タブで、[セレクターの追加] をクリックし、[カテゴリ セレクター] を選択します。
2. [カテゴリの設定元] で、[グループ化された値] を選択します。
3. [レイヤーの選択] ウィンドウで、[Electric Charging Stations] を選択します。
4. [カテゴリ フィールド] で、[EV_Connector_Types] を選択します。

   

5. [セレクター] タブをクリックします。
6. [ラベル] フィールドに、「Select connector type」と入力します。
7. [アイコンの追加] をクリックします。
8. [対象ポイント] セクションを展開し、燃料ステーション アイコンを選択して [OK] をクリックします。

   

9. [選択] で、[複数] を選択します。
10. [プレースホルダー テキスト] に、「No connector selected」と入力します。
11. [検索結果の表示] と [リセットとすべて選択の表示] をオンにします。

    

12. [一般] セクションを展開します。 [名前] フィールドに、「Connector selector」と入力します。
13. [完了] をクリックします。

    

3 つのセレクターすべてが構成されました。 しかし、まだこれらを使用してダッシュボード上のデータを絞り込むことはできません。 次に、ダッシュボードのすべてのエレメントを接続するアクションを構成して、ユーザーが各自のニーズに応じてダッシュボードを調整できるようにします。

アクションの構成

対話型ダッシュボードを作成する際には、すべてのエレメントを先に構成してから、これらを接続するアクションを構成してダッシュボードを対話型にすることをお勧めします。 この順序でダッシュボードを構築することをお勧めするのは、各エレメントがどのように構成されているかによって、使用可能なアクションが決まるからです。

ダッシュボードのすべてのエレメントを設定したので、アクションを使用してダッシュボードの対話性を構成することができます。

州セレクターのアクションの構成

最初に、州セレクターのアクションを構成します。 ユーザーがダッシュボードで操作を行うときには、主にセレクターを使用します。 ユーザーはセレクターを使用することで、表示される充電ステーションを場所やコネクタ タイプによって絞り込むことができます。 最上位のフィルタリングには州セレクターが使用され、これによって他のセレクターやテーブル エレメントがフィルター処理されます。

1. 必要に応じて、ツールバーの [表示] ボタンをクリックして [表示] ウィンドウを開きます。 [ヘッダー] タブをクリックします。
2. [Province selector] にポインターを合わせます。 オプション ボタンをクリックし、[構成] をクリックします。

   

   [カテゴリ セレクター] 構成ウィンドウが表示されます。

3. [アクション] タブをクリックします。

   新しい州が選択されたときに発生するように [フィルター]、[点滅]、[ポップアップの表示]、[画面移動]、[ズーム] アクションを構成できます。

   

   最初に構成するアクションはフィルター アクションです。 ユーザーが州セレクターで州を選択すると、その州内の市町村だけが表示されるように市町村セレクターがフィルター処理されます。

4. [フィルター] セクションをクリックして展開します。
5. [City selector] をオンにします。

   アクションは 2 つの異なるエレメントを接続します。 これらは、アクションに反応するエレメント (この場合、市町村セレクター) の側ではなく、アクションをトリガーするエレメント (この場合、州セレクター) の側で構成します。

   2 つのエレメントのデータ ソースは異なるため、対応付けフィールドによってこれらを接続する必要があります。 幸い、どちらのレイヤーにも、同じように書式設定された州の略称のフィールドが含まれています。

6. [ソース フィールド] で、[Province Postal Abbreviation] を選択します。 [ターゲット フィールド] で、[State] を選択します。

   

   州が選択されたときに、マップ、インジケーター、テーブルもフィルター処理されるように、さらにアクションを設定します。

7. [Electric charging stations in Canada] で、[Electric Charging Stations] のフィルター アクションをオンにします。 [ソース フィールド] を [Province Postal Abbreviation] に設定し、[ターゲット フィールド] を [State] に設定します。

   

8. [Operational stations indicator] と [Station table] のフィルター アクションをオンにします。 これらのエレメントで、[ソース フィールド] を [Province Postal Abbreviation] に設定し、[ターゲット フィールド] を [State] に設定します。

   カナダのすべての充電ステーションが表示されている状態ではテーブルはあまり役に立ちません。 州が選択されたときにだけ情報が表示されるようにテーブルを構成します。

9. [Station table] セクションで、[フィルター処理時のみレンダリング] チェックボックスをオンにします。

   

   州セレクターにアクションをもう 1 つ追加して、選択された州にマップがズームするようにします。

10. [ズーム] セクションを展開し、[Electric charging stations in Canada] をオンにします。

    

11. [完了] をクリックします。

    ダッシュボードの外観は以前と同じですが、テーブルの代わりにメッセージが表示されています。

    

    構成したアクションが正常に機能するかテストします。

12. ヘッダーで、[Select a province] をクリックし、[Prince Edward Island] を選択します。

    マップがプリンス エドワード アイランド州にズームします。 この州にある充電ステーションだけがテーブルに表示されます。 インジケーター エレメントの数値がこれまでより小さくなります。

13. ヘッダーで、[Select a city] をクリックします。

    

    プリンス エドワード アイランド州内の充電ステーションがある市町村だけがリストされます。

市町村セレクターとコネクタ セレクターのアクションの構成

次に、他の 2 つのセレクターのアクションを構成します。 市町村セレクターによって、コネクタ セレクター、マップ、インジケーター、テーブルがさらにフィルター処理されます。 コネクタ セレクターによって、マップ、インジケーター、テーブルがさらにフィルター処理されます。

1. [表示] ウィンドウで [City selector] にポインターを合わせ、オプション ボタンをクリックし、[構成] をクリックします。

   

2. [アクション] タブをクリックします。

   市町村セレクターは (フィーチャではなく) グループ化された値を使用して作成されているため、使用可能なアクション タイプは [フィルター] のみとなります。

3. [フィルター] セクションを展開します。
4. [Connector selector]、[Electric Charging Stations]、[Operational stations indicator]、および [Station table] をオンにします。

   

   接続するエレメントはすべて同じ Electric charging stations in Canada レイヤーに基づいているため、今度は対応付けフィールドを定義する必要がありません。

5. [完了] をクリックします。

   最後に、コネクタ セレクターのアクションを構成します。

6. [レイアウト] ウィンドウで [Connector selector] にポインターを合わせ、オプション ボタンをクリックし、[構成] をクリックします。
7. [アクション] タブをクリックし、[フィルター] セクションを展開します。
8. [Electric Charging Stations]、[Operational stations indicator]、および [Station table] をオンにします。

   

9. [完了] をクリックします。

   これらのアクションが全体として正常に機能するかテストします。

10. 必要に応じて、ヘッダーで、[Select a province] をクリックし、[Prince Edward Island] を選択します。
11. [Select a city] をクリックし、[Charlottetown] を選択します。

    マップ、テーブル、およびインジケーターが更新され、表示される充電ステーションの数が減ります。

    

12. ヘッダーで、[Select connector type] をクリックします。

    

    リスト内のオプションの数が減りました。

13. コネクタ セレクターで、[TESLA] をクリックします。

    マップ、テーブル、およびインジケーターが更新され、表示される充電ステーションの数が減ります。

テーブル アクションの構成

最後に構成するアクションはテーブル アクションです。 このテーブルには、ヘッダーで州を選択したときにだけ情報が表示されます。 同様に、テーブルで充電ステーションを選択したときにだけ、詳細エレメントに情報が表示されるようにします。 そうしないと、閲覧者に関係のない充電ステーションの詳細も表示されることになります。 テーブルで何も選択されていない場合、前の手順で構成したメッセージが表示されます。

1. [表示] ウィンドウで、[本文] タブをクリックします。
2. [本文] タブで、[Station table] にポインターを合わせ、オプション ボタンをクリックし、[構成] をクリックします。

   

3. [テーブル] 構成ウィンドウで、[アクション] タブをクリックし、[フィルター] セクションを展開します。
4. [Station details] をオンにし、[フィルター処理時のみレンダリング] チェックボックスをオンにします。

   

   テーブルでフィーチャが選択されたときにそれらのフィーチャをマップ上で点滅させるアクションも構成します。

5. [点滅] セクションを展開し、[Electric charging stations in Canada] をオンにします。

   選択されたフィーチャにマップがズームするようにするアクションをさらに追加します。

6. [ズーム] セクションを展開し、[Electric charging stations in Canada] をオンにします。
7. [完了] をクリックします。
8. ダッシュボードで、テーブルの任意の行をクリックします。

   

   詳細エレメントに、選択されたフィーチャのポップアップ情報が表示されます。 選択されたフィーチャにマップがズームし、点滅表示されます。

ダッシュボードの共有

最後に、ダッシュボードを閲覧用に共有します。

1. ダッシュボード ツールバーで [保存] をクリックし、[保存] をクリックします。

   

2. ダッシュボードのタイトルの横にあるメニュー ボタンをクリックし、[ダッシュボード アイテムの詳細] をクリックします。

   

   ダッシュボードのアイテム ページが表示されます。 共有する前に、ダッシュボードを表示し、テストします。

3. [ダッシュボードを開く] をクリックします。

   

   ダッシュボードが新しいブラウザー タブで表示されます。 テーブルと詳細エレメントは空になっています。

4. ダッシュボードを使用して、オンタリオ州、サンダー ベイにある J1772 充電ステーションを検索します。

   

5. アイテム ページに戻り、[共有] をクリックします。
6. [共有] ウィンドウで、[すべての人に公開 (パブリック)] を選択して、[保存] をクリックします。

   サイン インしないでダッシュボードを表示するには、ダッシュボードで使用される Web マップをすべての人と共有する必要があります。

7. リボンの [コンテンツ] をクリックします。
8. [コンテンツ] ページの [タイトル] の下にある [Electric charging stations in Canada] で、[共有の更新] アイコンをクリックします。

   

9. [共有] ウィンドウで、[すべての人に公開 (パブリック)] を選択して、[保存] をクリックします。

このチュートリアルでは、カナダの電気自動車充電ステーションを検索可能な対話型ダッシュボードを構築しました。 ユーザーが場所やコネクタ タイプなどのニーズに合わせて情報を調整できるようにダッシュボードを構成しました。

他のチュートリアルについては、チュートリアル ギャラリーをご覧ください。

使用許諾

• カード ギャラリーの画像は Tong Patong によるものです。
• Electric Charging Stations: カナダ政府、カナダ天然資源省、Electric Charging and Alternative Fuelling Stations Locator
• OpenStreetMap Amenities for North America: © OpenStreetMap 提供者
• Provinces and Territories of Canada: カナダ統計局、2021 国勢調査 - カートグラフィック境界ファイル
• Light Gray Canvas マップの出典: Esri、HERE、Garmin、FAO、NOAA、USGS、OpenStreetMap の投稿者、GIS ユーザー コミュニティ