対話形式でのデータの追加

これまでのチュートリアルでは、他の人が作成したレイヤからマップを作成していました。これはある程度までは良い方法ですが、いずれは自分が見つけた、編集した、または作成したデータからマップを作成したくなります。その一つの方法として編集可能レイヤがあります。編集可能レイヤでは、Web マップに直接描画でき、それらの機能に対してポップアップ ウィンドウを定義できます。

このチュートリアルでは、カリフォルニア州レッドランズの対象ポイントのマップを作成します。このようなマップはさまざまな用途にカスタマイズできます。たとえば、自分の都市の対象ポイントを示す、旅行や探検の過程をドキュメントする、さらにはサーフィン スポット、ゴーストタウン、空港のカフェなど、関心のあるスポットをマップに記すこともできます。

マップを開く

手順:
  1. Web ブラウザを開いて www.arcgis.com/home にアクセスします。
  2. 必要に応じてサインインします。
  3. [マップやアプリケーションを探す] ボックスで、「Redlands owner:ArcGISTutorials」と入力し、[検索] ボタンをクリックします。
    [マップを探す] テキスト ボックス

    次の検索結果だけが表示されるはずです。Redlands Places というマップです。

  4. サムネイル画像をクリックして、マップを開きます。
    検索結果のサムネイル画像

    カリフォルニア州レッドランズを示すマップが開きます。

  5. サイド パネルで、[マップのコンテンツの表示] をクリックします。
    クリックしてマップのコンテンツを開く

    マップには、Topographic ベースマップという 1 つのレイヤしかありません。このマップに関しては、ブックマークのリスト以外にはこれといった特徴がありません。

  6. リボンで、[ブックマーク] をクリックし、[Kimberly Crest House] をクリックします。
    リストの上部にある [Kimberly Crest] ブックマークをクリック

    マップが拡大し、オレンジの木々が生い茂った丘が表示されます。下の画像で丸で囲まれている建物が、地域のランドマークである Kimberly Crest House です。

    マップで赤色の丸で囲まれた Kimberly Crest House
    ヒントヒント:

    建物、道路、公園、湖などの対象地点は、一部のベースマップではラベルを付けることができますが、他のベースマップではできません。場所を特定する場合は、ベースマップを変更するのが最善です。現時点で、ArcGIS Online のベースマップにはどれも Kimberly Crest House のラベルは含まれていません。

編集可能レイヤの作成とフィーチャの追加

Kimberly Crest House を対象ポイントとしてマークします。

手順:
  1. リボンで、[追加] をクリックして [編集可能レイヤの作成] を選択します。
    [追加] ドロップダウン メニューの選択肢のリスト
  2. [編集可能レイヤの作成] ダイアログ ボックスで、名前を「対象ポイント」に変更します。テンプレートは [マップ メモ] にしたままで、[作成] をクリックします。
    [編集可能レイヤの作成] ダイアログ ボックス

    サイド パネルが [フィーチャの追加] パネルに変わり、マップにフィーチャを描画するシンボルが表示されます。リボンでは、[編集] ボタンが選択されています。これは、[編集] モードになっていることを示し、フィーチャを追加、削除、または移動できます。

    注意注意:

    このコンテキストでは、テンプレートとはマップ シンボルのパレットです。マップ メモ テンプレートには汎用的なシンボルがあります。他のテンプレートではさらに具体的な用途のシンボルがあります。

  3. [フィーチャの追加] パネルにある [ポイント] で、ピン シンボルをクリックして選択します。
    [フィーチャの追加] パネルにあるピン シンボル
  4. マウスのポインタを Kimberly Crest House に移動してクリックし、シンボルを追加します。
    Kimberly Crest House の上にあるピン シンボル

    マップにピンが追加され、ポップアップ ウィンドウが開きます。

  5. ポップアップ ウィンドウで、デフォルトのタイトル「Point」を「Kimberly Crest House」に変更します。
  6. [説明] ボックスをクリックして、「Kimberly Crest、フレンチ シャトー風の 3 階建ての建物で、結婚式やイベントの場所として人気。」と入力します。
    ポップアップ ウィンドウのタイトルと説明
  7. ポップアップ ウィンドウで [閉じる] をクリックします。

    ポップアップ ウィンドウでは、ほかにも多くのことを行えます。それは後ほど取り上げます。

  8. リボンで、[詳細] ボタンをクリックします。
    [対象ポイント] レイヤを示す [コンテンツ] パネル

    [コンテンツ] パネルでは、ベースマップ レイヤの上に自分が作成したレイヤが表示されます。

  9. リボンで、[保存] ボタンをクリックして [名前を付けて保存] を選択します。
  10. [マップの保存] ダイアログ ボックスで、必要に応じてタイトルを変更し、[マップの保存] をクリックします。
    新しいタイトルの入った [マップの保存] ダイアログ ボックス

    マップは [マイ コンテンツ] ページに追加されます。

ポップアップ ウィンドウを画像と Web サイトにリンクする

Kimberly Crest House のポップアップ ウィンドウを再度開いて、オンラインの画像と Web サイトにリンクを追加します。ソーシャル メディアや写真共有サイトなど、任意の公共の Web サイトでホストされている画像にリンクできます。

手順:
  1. マップで、Kimberly Crest House のピンをクリックします。

    フィーチャが選択され、ポップアップ ウィンドウが開きます。

  2. ポップアップ ウィンドウで、[編集] をクリックします。
    Kimberly Crest House のポップアップ ウィンドウ
  3. 新しいブラウザ タブまたはウィンドウで www.kimberlycrest.org を開きます。
  4. 別のブラウザ タブまたはウィンドウで www.panoramio.com/user/387885 を開きます。

    この Panoramio ページには、Esri の従業員である Piotr Andzel が撮影した写真が掲載されています。

  5. Panoramio ページで、レッドランズの Kimberly Crest Park の画像を探します。画像を右クリックして、画像のロケーションをコピーします。
    Firefox ブラウザの画像のコンテキスト メニュー
  6. ヒントヒント:

    画像のロケーション、つまり画像そのものではなく画像の URL をコピーする必要があります。Mozilla Firefox (v. 13) では、[画像の URL をコピー] というコマンドです。Google Chrome (v. 19) では、[画像 URL をコピー] です。Microsoft Internet Explorer (v. 8) では、コンテキスト メニューのプロパティをクリックし、[プロパティ] ダイアログ ボックスのアドレス (URL) をハイライトしてコピーします。

  7. Web マップに戻ります。ポップアップ ウィンドウの [画像 URL] ボックスで、http:// prefix をハイライトして削除します。
  8. 次に、CTRL+V を使って画像のロケーションを [画像 URL] ボックスに貼り付けます。
    ポップアップ ウィンドウの [画像 URL] ボックス
  9. ブラウザ タブまたはウィンドウで、Kimberly Crest の Web サイトにアクセスします。URL をハイライトして、CTRL+C でコピーします。
    Kimberly Crest の Web サイトの URL
  10. マップに戻ります。[画像リンク URL] ボックスで、http:// prefix をハイライトして削除します。CTRL+V を使って URL を貼り付けます。

    マップのユーザがピン シンボルをクリックすると、ポップアップ ウィンドウに画像のサムネイル版が表示されます。サムネイルをクリックすると、Web サイトが開きます。

  11. ポップアップ ウィンドウで [説明] ボックスをクリックして、先回入力したテキストの終わりにカーソルを置きます。ENTER キーを 2 回押します。
  12. 画像提供: Piotr Andzel。画像をクリックすると Web ページが開きます。」と入力します。
  13. ここで入力したテキストをハイライトします。ポップアップ ウィンドウのツールバーで、[イタリック] ボタンをクリックします。[イタリック] ボタン.
  14. ポップアップ ウィンドウを確認して、[閉じる] をクリックします。
    完了したポップアップ ウィンドウ
  15. リボンで、[編集] ボタンをクリックして、編集モードを終了します。

    サイド パネルが非表示になります。[詳細] ボタンまたは [編集] ボタンをクリックすると再び表示されます。

  16. 画像へのリンク

    場合によっては、画像リンクに関する著作権保護および公正使用の問題について考慮する必要があります (画像リンクは、ホスト コンピュータの画像を参照しながら、クライアント コンピュータに、通常は小型で低解像度の画像を表示します)。今回は、撮影者が画像へのリンクを許可しています。

ポップアップ ウィンドウのテスト

ポップアップ ウィンドウが希望どおりに動作することを確認してください。

手順:
  1. マップで、Kimberly Crest House のピンをクリックします。
    Kimberly Crest House のサムネイル画像を示すポップアップ ウィンドウ

    画像のサムネイル版が表示されます (屋内から外のガーデンを見渡す風景)。

  2. ヒントヒント:

    横方向の画像のほうが縦方向の画像よりも画像のスペースにうまく入ります。

  3. サムネイル画像をクリックします。

    新しいブラウザ タブまたはウィンドウで Kimberly Crest の Web サイトが開きます。

  4. Kimberly Crest の Web サイトを開いたブラウザ タブまたはウィンドウを閉じます。
  5. Panoramio の Web ページは開いたまま、他の Kimberly Crest の Web サイトのインスタンスを閉じます。マップに戻ります。

シンボルの変更

緑のピン以外のシンボルを使用することもできます。

手順:
  1. 必要に応じて、Kimberly Crest のピンをクリックして、ポップアップ ウィンドウを開きます。
  2. ポップアップ ウィンドウの下で、[編集] をクリックします。
    ポップアップ ウィンドウにある [編集] リンク

    ポップアップ ウィンドウが編集可能になります。

  3. ポップアップ ウィンドウの下で、[シンボルの変更] ボタンをクリックします。
  4. [シンボルの変更] ダイアログ ボックスで、基本的なシンボルのリストをスクロールして確認します。
    [シンボルの変更] ダイアログ ボックス

    基本的なシンボルには、ピン、プッシュピン、フラグ、その他のアイコンが含まれます。

  5. ドロップダウン矢印をクリックして (現在はベーシックに設定)、[人と場所] シンボル セットを選択します。これらのシンボルをスクロールして確認します。
  6. 他のシンボル セットも確認します。使用するシンボルを探し、クリックして選択します。
  7. オプションで、スライダ バーを使って、またはピクセル値を入力して、シンボルのサイズを変更します。
  8. [シンボルの変更] ダイアログ ボックスで [終了] をクリックします。
    [シンボルの変更] ダイアログ ボックスで [シェープ] シンボル セットの赤い星が選択されている
  9. ポップアップ ウィンドウで [閉じる] をクリックします。

    マップに新しいシンボルが表示されます。

    赤い星のシンボルで示された Kimberly Crest House
  10. マップを保存します。
    注意注意:

    [対象ポイント] レイヤには、建物、公園、道路など幅広いフィーチャが含まれることになります。これらすべてのフィーチャを 1 つのシンボルで表わすこともできますし、それぞれの種類のフィーチャに応じて異なるシンボルを使うこともできます (建物に 1 つのシンボル、公園に別のシンボルなど)。

他のフィーチャの追加

手順:
  1. マップが編集モードにあることを確認します (リボンで [編集] ボタンが選択されている)
    ヒントヒント:

    [編集] ボタンをクリックすると、マップの編集モードをオンまたはオフに切り替えることができます。

  2. リボンで、[ブックマーク] をクリックして、[Morey Mansion] を選択します。
    ブックマークのリストでハイライトされた Morey Mansion

    マップは、下の画像で丸で囲まれた場所に拡大します。Kimberly Crest と同様に、Morey Mansion もベースマップでラベルが付けられていません (現時点で)。

    画像で Morey Mansion の建物の敷地が丸で囲まれている
  3. [フィーチャの追加] パネルで、ピンをクリックして選択します。
    ピンのシンボル
  4. マウスのポインタを Morey Mansion に移動してクリックし、シンボルを追加します。
    Morey Mansion の上にあるピン シンボル
  5. ポップアップ ウィンドウで、デフォルトのタイトル「Point」を「Morey Mansion」に変更します。
  6. [説明] ボックスをクリックして、「Morey Mansion は、1890 年に建築された 3 階建てのビクトリア朝様式の建物で、個人所有です。」と入力します。
  7. 次に、ENTER キーを 2 回押して、「画像提供: Piotr Andzel。画像をクリックすると Web ページが開きます。」と入力します。
  8. 最後のテキストはイタリックにします。
    タイトルと説明文が入った Morey Mansion のポップアップ ウィンドウ
  9. Panoramio Web ページにアクセスして Piotr Andzel の写真を表示します。下にスクロールして Morey Mansion の画像を探します。
  10. 画像を右クリックして、画像のロケーションをコピーします (使用しているブラウザに合ったコマンドを使ってください)。
    Firefox ブラウザの画像のコンテキスト メニュー
  11. マップに戻ります。ポップアップ ウィンドウの [画像 URL] ボックスで、http:// prefix を削除し、CTRL+V を押してリンクを貼り付けます。
  12. 新しいブラウザ タブまたはウィンドウを開いて、wikipedia.org/wiki/Morey_Mansion にアクセスします。Web ページ URL をハイライトして CTRL+C でコピーします。
  13. マップに戻ります。ポップアップ ウィンドウの [画像リンク URL] ボックスで、http:// prefix を削除します。CTRL+V でリンクを貼り付けます。
    ポップアップ ウィンドウの [画像 URL] と [画像リンク URL] ボックス
  14. ポップアップ ウィンドウの下で、[シンボルの変更] をクリックします。
  15. [シンボルの変更] ダイアログ ボックスで、使用するシンボルを選択します。
    シェープ シンボル セットで赤い星が選択されている
  16. 必要に応じてシンボルのサイズを変更して、[終了] をクリックします。
  17. ポップアップ ウィンドウで、[閉じる] をクリックします。
  18. リボンで、[編集] ボタンをクリックして、編集モードを終了します。

フィーチャのポップアップ ウィンドウのテスト

手順:
  1. Morey Mansion シンボルをクリックして、ポップアップ ウィンドウを開きます。
    Morey Mansion のポップアップ ウィンドウ
  2. サムネイル画像をクリックして、Wikipedia にある Morey Mansion の項目を開きます。
  3. 必要に応じて、ポップアップ ウィンドウの説明またはリンクを編集します。
  4. Panoramio の Web ページは開いたままにし、Morey Mansion の Web ページを開いているタブまたはウィンドウはすべて閉じます。
  5. マップに戻り、ポップアップ ウィンドウを閉じます。
  6. 「Redlands Overview」ブックマークにズームします (リストの下部にあります)。
  7. マップを保存します。
    マップにある Kimberly Crest House と Morey Mansion のシンボル

独自のフィーチャの追加

他にも独自のフィーチャを追加できます。マップにあるブックマークされたすべての場所には、対応する写真が Panoramio サイトにあります (写真は 2 ページにまたがります)。

残りのサイトの大部分は Topographic ベースマップでラベルが付けられていますが、一部 (Olive Avenue Market、Asistencia Mission、および Santa Fe Depot) はラベルが付けられていません。他のベースマップ、特に OpenStreetMap を使ってこれらの場所を特定してみてください。あるいは、住所情報を Google で検索して、住所検索や場所ボックスに入力します。

Web サイトについては、下のサンプルまたは自分で探した Web リソースにリンクできます。

Olive Avenue Market

Web サイト

すべての公園

Web サイト

Redlands Bowl

Web サイト

Asistencia Mission

Web サイト

State Street

Web サイト

Smiley Library

Web サイト

Santa Fe Depot

Web サイト

レッドランズの既存のマップ サービスと編集可能レイヤをマッシュアップすることもできます。「Redlands」というキーワードを使って ArcGIS Online を検索して、マップを向上させるレイヤを探します。

編集可能レイヤで異なる形状を使う

編集可能レイヤでは、さまざまな種類の形状を使ってフィーチャを作成できます。建物をピンなどのポイント シンボルでマークする、線やフリーハンド線などのライン シンボルで道順を描画する、エリア、四角、円などのエリア シンボルを使ってベースマップで定義されていない地区や他の地域を表示できます。

これは、オンライン マッピングに関するチュートリアルのシリーズで 7 番目のチュートリアルです。