ポップアップの構成

ポップアップは Web カートグラフィにとって重要な要素です。 ポップアップを使用すると、マップの各フィーチャの追加情報を共有できます。 また、シンボルを使うことで、伝達する情報が明確になります。 ポップアップにはチャートや写真を含められ、コンテキストを提供できます。 レイヤーの属性テーブルに存在するものは何でも、ポップアップを使って伝えられます。

ポップアップには非常に多くの情報を含められるため、何を含めるべきか注意深く検討することが重要です。 このチュートリアルでは、2 つのレイヤーのポップアップを設計します。 一方はフィーチャ名を表示するのみですが、もう一方ではより複雑な書式設定を使います。

シンプルなポップアップの作成

マップのあらゆるレイヤーにポップアップが必要なわけではありません。 不必要なポップアップは必要なポップアップの邪魔になり、マップの探索を難しくします。 今回のマップでは、[LakeDistrictFells][National Parks (England)] の 2 つのレイヤーでのみ、ポップアップが有益です。 これらのレイヤーは同時に表示されないため、それぞれのポップアップが競合することはありません。 まず、他のすべてのレイヤーのポップアップを無効にし、公園のレイヤー向けにシンプルなポップアップを構成します。

  1. 前のチュートリアルの「カートグラフィック作成 - ベースマップのカスタマイズ」を完了している場合は、ArcGIS アカウントまたは ArcGIS Enterprise ポータルにサイン インします。 [Lake District National Park] Web マップを再度開きます。
  2. 前のチュートリアルを完了していない場合は、Lake District National Park 3 Web マップを開きます。 [サイン イン] をクリックし、ArcGIS アカウントにサイン インします。 [コンテンツ] ツールバーで、[保存して開く] ボタンをクリックしてから [名前を付けて保存] をクリックします。 [タイトル][3] を削除します。 [保存] をクリックします。
    注意:

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

  3. 必要に応じ、[コンテンツ] (暗い背景の) ツールバーにある [レイヤー] をクリックして [レイヤー] ウィンドウを開きます。

    コンテンツ ツールバーのレイヤー ボタン

  4. [レイヤー] ウィンドウで、[Lake District National Park] レイヤーを選択します。

    レイヤーが選択されると、そのレイヤーの横に青いバーが表示されます。

  5. [設定] (明るい背景の) ツールバーで、[ポップアップ] ボタンをクリックします。 [ポップアップ] ウィンドウで、[ポップアップの有効化] 切り替えボタンをオフにします。

    ポップアップの有効化をオフ

  6. [Clip] レイヤー、[Lakes] レイヤー、[Rivers] レイヤーのポップアップも無効にします。
  7. マップに英国全土と国立公園 10 か所が表示されるまで縮小します。

    英国の国立公園 10 か所を示すマップ

  8. [National Parks (England)] レイヤーを選択します。

    マップにポップアップの 1 つが表示されます。 そこには 6 つのフィールドがあるテーブルが含まれています。 このマップで必要な唯一の情報は、それぞれの公園名です。 テーブルを削除します。

  9. [ポップアップ] ウィンドウの [フィールド リスト] の横で、[オプション] ボタンをクリックしてから [削除] をクリックします。

    フィールド リストのオプション メニューの削除

  10. [タイトル] をクリックします。

    レイヤー名はこのマップでは不要な情報です。 不要な情報があると、ユーザーがマップを読むのに時間がかかったり、マップが見にくくなったりするだけでなく、混乱させることもあり得るので、不要な情報はマップからできるだけ削除する必要があります。 今回の場合、レイヤー名は重要な情報である公園名の邪魔になります。

  11. [{NAME}] の前のテキストをすべて削除します。

    {NAME} に設定されているタイトル

    中括弧 ({}) で囲まれたテキストは、フィーチャ レイヤー内のフィールド名の参照に使用されます。

  12. マップで、さまざまな公園をクリックして、ポップアップのタイトルが変更されていることを確認します。

    National Parks (England) レイヤーのポップアップ

ポップアップ テキストの書式設定

次に、[LakeDistrictFells] レイヤーのポップアップを構成します。 テキストを追加して、わかりやすくするために書式を設定します。

  1. マップで、三角形のシンボルが再び見えるようになるまで拡大します。
  2. [レイヤー] ウィンドウで、[LakeDistrictFells] レイヤーをクリックして選択します。

    [LakeDistrictFells] レイヤーのポップアップが表示されます。

    LakeDistrictFells レイヤーのポップアップ

  3. [ポップアップ] ウィンドウで [タイトル] をクリックします。 [{NAME}] 以外のテキストをすべて削除します。

    ポップアップにはフィールドが多数あるテーブルがあります。 そこには各山に関する興味深い情報が含まれていますが、大半がこの特定のマップとその目的に関係ありません。 フィールド リストを削除して、書式設定したテキストに置き換えます。

  4. [フィールド リスト] の横にある [オプション] ボタンをクリックして、[削除] をクリックします。
  5. [コンテンツの追加] をクリックしてから [テキスト] をクリックします。

    ポップアップ ウィンドウのコンテンツの追加ボタンとテキストボタン

  6. テキスト ウィンドウで、次のテキストを入力するか、コピーして貼り付けます。

    Click here to see a photo of {Name}.

    Height: {Metres} meters

    Height is the change in elevation between a mountain's peak and sea-level.

    Prominence: {Drop_} meters

    Topographic prominence, or drop, is the change in elevation between a mountain's peak and the lowest contour line that encircles it, but no other higher peaks.

    ヒント:

    書式設定なしでコピーするには、右クリックして [書式なしテキストとして貼り付け] を選択します。

    このテキストは、三角形シンボルにすでに符号化されている、各山頂の高さと突出度の情報を繰り返しています。 ただし、ポップアップの方が各シンボルのサイズおよび色よりも、正確な値を伝えられます。 また、高さと突出度の違いを説明する余白もあります。

  7. テキストの 2 行目 ([Height: {Metres} meters]) をハイライト表示します。 ツールバーの [太字] ボタンをクリックします。

    テキスト編集ツールバーの太字ボタン

  8. テキストの 4 行目 ([Prominence: {Drop_} meters]) も太字にします。
  9. [OK] をクリックします。

    ポップアップにテキストが表示されます。 2 つの数字はどちらも小数点以下 2 桁までです。

    テキストの書式が設定されたポップアップ

    このレベルの精度は今回のマップには必要なく、数字を理解しづらくするだけです。 書式を変更して、これらをシンプルにします。

  10. [設定] ツールバーで [フィールド] ボタンをクリックします。 [フィールド] ウィンドウで、[Height (m)] をクリックします。

    フィールド ウィンドウで選択された Height (m)

  11. [書式] ウィンドウの [有効桁数] で、[小数点以下 0 桁] を選択します。

    小数点以下 0 桁に設定された有効桁数

  12. [完了] をクリックします。
  13. [Prominence (m)] フィールドも小数点以下 0 桁を使用するように設定します。

    ポップアップで、小数点以下の桁が表示されなくなります。

    フィールドの書式が設定されたポップアップ

属性式の記述

次に、それぞれの山の写真にリンクを追加します。

[LakeDistrictFells] レイヤーには写真へのリンクを含むフィールドはありませんが、各山頂の ID 番号を含むフィールドがあります。 hillsummits の Web サイトで、各山頂の写真が共有されていて、各写真のページの URL に山頂の ID 番号が含まれています。 次に、それぞれの山頂の ID 番号から固有の URL を構成する属性式を作成します。 これらの URL は各山頂の写真にリンクします。

  1. [ポップアップ] ウィンドウを再び開きます。

    各フィーチャのリンクを作成する属性式を作成できます。

  2. [オプション] の下で、[属性式] をクリックします。

    ポップアップ ウィンドウの属性式ボタン

  3. [式の追加] をクリックします。
  4. 式ボックスで、既存のテキストを削除して、「"http://hillsummits.org.uk/htm_portrait/"++".htm"」と入力するか、コピーして貼り付けます。

    引用符はテキスト値を示します。 URL の間にあるプラスの記号の場所には、テキストを追加できます。

  5. 2 つのプラス記号の間にカーソルを置いて、[プロファイル変数] ボタンをクリックします。

    プロファイル変数ボタン

  6. [$feature] の横にある矢印をクリックします。

    $feature の横の矢印ボタン

  7. フィールドのリストをスクロールして [$feature.Number] をクリックします。

    式が、"http://hillsummits.org.uk/htm_portrait/"+$feature.Number+".htm" となります。

    [Number] フィールドには、各山頂の ID 番号が保存されます。

  8. [実行] をクリックします。

    実行ボタン

    URL が [出力] ウィンドウに表示されます。 そこで、[$feature.Number] が 4 ~ 5 桁の番号に置き換わっています。

    出力ウィンドウ

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

    [属性式] ウィンドウに、[{expression/expr0}] という名前の新たな式がリストされます。

  10. [属性式] ウィンドウの上部にある、[戻る] ボタンをクリックします。

    戻るボタン

  11. 必要に応じて、[テキスト] セクションを展開します。 [テキストの編集] をクリックします。
  12. テキストの編集ウィンドウの 1 行目の、[here] という単語をハイライト表示します。 ツールバーの [リンク] ボタンをクリックします。

    テキスト編集ツールバーのリンク ボタン

  13. [リンクの URL] に「{expression/expr0}」と入力します。 [保存] ボタンをクリックします。

    リンクの URL ウィンドウの保存ボタン

  14. [here] のテキストがハイライト表示されたままの状態で、[太字] ボタンをクリックします。
  15. [OK] をクリックします。
  16. ポップアップで [here] リンクをクリックします。

    ポップアップのハイパーリンク テキスト

    注意:

    ポップアップが表示されない場合、マップを拡大して、三角形シンボルの 1 つをクリックします。

    新しいブラウザー タブが、選択した山の写真と共に開きます。 これらの写真をマップに直接追加する権限はありませんが、他のユーザーが写真を見られるようにリンクを提供できます。

  17. 新しいブラウザー タブを閉じます。

ポップアップへのダイアグラムの追加

マップを見ている多くのユーザーが、「突出度」という用語をよく知らない可能性があります。 優れたマップの条件は、提示する情報をだれもが理解できることです。 つまり、シンボルや凡例に加えて、説明や描写が必要になることがよくあります。 ここでは、高さと突出度の違いの説明に役立つテキストとダイアグラムをポップアップに追加します。

  1. [ポップアップ] ウィンドウで、[コンテンツの追加] をクリックし、[画像] をクリックします。
  2. [URL] に「https://www.arcgis.com/sharing/rest/content/items/5172c58b3caf4361b612878d5f5da9e2/data」と入力するか、コピーして貼り付けます。
    注意:

    この画像は ArcGIS Online にアイテムとしてホストされています。 画像のホスト方法については、Adding and using photos and images in ArcGIS Online のブログ記事をご参照ください。

  3. [キャプション] に「Height (h) and prominence (p)」と入力します。 [代替テキスト] に「Diagram describing height and prominence」と入力します。

    画像の構成のプロパティ

    代替テキストを含めると、マップにアクセスしやすくなります。

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

    ポップアップに、高さの計測値と突出度の計測値を比較しているダイアグラムが表示されます。 色はマップと一致しています。 色を一致させると、より調和したデザインができます。

    ダイアグラムがあるポップアップ

  5. [コンテンツ] ツールバーで、[保存して開く] ボタンをクリックしてから [保存] をクリックします。

    コンテンツ ツールバーの保存ボタン

これで 2 つのレイヤーのポップアップが構成できました。 [National Parks (England)] レイヤーには、各公園名のみを表示するシンプルなポップアップを作成しました。 [LakeDistrictFells] レイヤーには、テキストの書式設定、フィールド プロパティ、属性式、ダイアグラムを使用して、複雑なポップアップを作成しました。

注意:

HTML を使うと、さらにポップアップをカスタマイズできます。 ここで作成したものと同じポップアップを使用した手順については、Beginner steps for formatting pop-ups with HTML のブログ記事をご参照ください。


ラベルの構成

ポップアップは、Web マップでは印刷されたマップに比べ、ラベルの役割が非常に小さくなることを意味していますが、ラベルを完全に取り払うべきというわけではありません。 ラベルで情報をあらかじめ提供することで、ポップアップを開く必要性をなくせば、マップが見やすくなります。

山岳のラベル付け

ユーザーはポップアップ内で各山の名前を確認できますが、最も突出度の高い山頂にラベルを付けることでマップを読みやすくすることができます。 こうすることで、聞いたことのある山頂の位置が見つけやすくなります。

  1. [設定] ツールバーの [ラベル] ボタンをクリックします。 [ラベル] ウィンドウで、[LakeDistrictFells] レイヤーが選択されていることを確認します。
  2. [ラベル クラスの追加] をクリックします。

    ラベル クラスの追加ボタン

  3. [ラベル フィールド][Name] を選択します。

    マップにラベルが表示されます。 ラベルが多数あり、マップが煩雑に見えます。 すべての山にラベルを示すことはできませんし、その必要もありません。 突出度が高い山のみにラベルを付けるために、フィルターを作成します。

  4. [ラベル フィルターの編集] をクリックします。

    ラベル フィルターの編集

  5. [新しく追加] をクリックします。 メニューを使用して [Prominence (m) が次の値以上である]250」という式を作成します。

    条件式とヒストグラム

    マップ上のラベルの大半が表示されなくなります。 「250」というカットオフ値は任意の値です。独自のマップを設計するときは、このような選択を試してみて、情報と煩雑さのバランスを取る必要があります。

  6. [フィルター] ウィンドウを閉じます。

    次に、ラベルのスタイルを変更して、マップの残りの部分と調和させます。

  7. [ラベル スタイルの編集] をクリックします。
  8. [フォント][Noto Sans Bold] に、[サイズ] を「16」に変更します。

    フォント設定

    情報量の多い地図では太字の方が読みやすくなります。 Noto Sans は ArcGIS StoryMaps で入手可能なフォント フェイスです。このフォントは後でマップのレイアウト作成に使用します。 マップとレイアウトの両方に同じフォントを使うと、マップの統一感が高まり、より洗練された雰囲気になります。

  9. [色] メニューをクリックします。 [#] に「202e03」と入力します。

    #202e03 (濃い緑) に設定されたカラー ピッカー

    これは先に公園のアウトラインおよび影に使用したのと同じ色です。

  10. [完了] をクリックします。
  11. [ハロー] で、[色] を「dae3d3」に、サイズを「2」に変更します。

    ハローの設定

    この色はラベルが非常に多く表示される背景にマッチします。

    ハローを使用すると視覚的な煩雑さがマップに追加されますが、ラベルが背景の色や詳細に邪魔されず読みやすい状態のままになるため、情報量が多い背景に有益です。 ハローの色はラベルの色とのコントラストが高く、最もよく使用されている背景色に似た色であるべきです。

  12. [ラベル スタイル] ウィンドウを閉じます。

    ラベルは読みやすくなりましたが、すべての縮尺で表示される必要はありません。 マップを拡大した時にのみラベルが表示されるように、表示範囲を設定します。

  13. [表示範囲] で、メニューを [都市 (複数)][部屋] に設定します。

レイク・ディストリクトのラベル付け

[Lake District National Park] レイヤーにもラベルを付けます。 ラベルのテキストのカスタマイズには ArcGIS Arcade を使用します。

  1. 山が見えなくなり、レイク・ディストリクト国立公園のみが表示されるまで縮小します。

    レイク・ディストリクト国立公園の境界のマップ

  2. [フィーチャのラベル作成] ウィンドウの上部にある黒いバナーをクリックし、[Lake District National Park] を選択します。
  3. [ラベル クラスの追加] をクリックします。 [ラベル フィールド][NAME] に設定されていることを確認します。

    まず、このラベルがマップの他のラベルのスタイルと調和していることを確認します。

  4. [ラベル スタイルの編集] をクリックします。

    ラベル スタイルの編集ボタン

  5. [フォント][Noto Sans Regular] に、[サイズ] を「18」に変更します。
  6. 色を「202e03」に、ハローの色を「dae3d3」に変更します。
    ヒント:

    これらの色は、最近使用した色のリストにあるかもしれません。

  7. ハローのサイズを「2」に変更します。

    ラベル スタイル設定

  8. [ラベル スタイル] ウィンドウを閉じます。

    マップには、「LAKE DISTRICT」というラベルが表示されています。 Arcade を使用して、後ろに「NATIONAL PARK」というテキストを追加します。

    マップ上の LAKE DISTRICT のラベル

  9. [フィーチャのラベル作成] ウィンドウの [NAME] の横にある式のボタンをクリックします。

    式ボタン

  10. [$feature[“NAME”]] のテキストの後ろに、「+ TextFormatting.NewLine + “NATIONAL PARK”」と入力するか、コピーして貼り付けます。

    式

    [TextFormatting.NewLine] 定数はテキストを 2 行に分割します。

  11. [実行] をクリックします。 エラーが返ってこなければ、[完了] をクリックします。

    マップ上でラベルが更新されます。 テキストが 2 行で表示されます。

    マップ上の LAKE DISTRICT NATIONAL PARK のラベル

  12. [表示範囲] で、メニューを [郡][都市圏] に設定します。

    郡と都市圏に設定された表示範囲

  13. マップを拡大、縮小します。

    ラベルは 1 つの縮尺のみで表示されます。 後でマップをユーザーに案内するときに、この縮尺で停止するようにします。

  14. [コンテンツ] ツールバーで、[保存して開く] ボタンをクリックしてから [保存] をクリックします。

本チュートリアルでは、レイク・ディストリクト国立公園にある山々のマップのためのポップアップとラベルを構成しました。 テキストの書式の設定方法、属性式の作成方法、ポップアップに画像を追加する方法を学習しました。 ラベルのスタイルを設定し、フィルターする方法を学習しました。 これで Web マップが完成しました。 次のチュートリアルでは、ArcGIS StoryMaps を使用して、演出が施された共有可能なマップのバージョンを作成します。