概要

ArcGIS Maps SDK for JavaScript では、ArcGIS Online の MapViewer で作成した Web マップをそのまま利用できます。ArcGIS Online の MapViewer を使用すると、迅速かつ簡単に Web アプリケーションを作成して共有できます。Web マップには、ArcGIS Server のマップサービス、イメージサービス、フィーチャサービス、KML、OGC Webサービスなどを含めることができます。また、カンマ区切りで値が格納されているテーブル（.csvまたは.txt）や GPS データの交換フォーマット（.gpx）で格納されたデータを追加することもできます。さらに、Web マップでは、属性表示に使用するポップアップの構成や、ベースマップ、初期表示範囲の指定なども MapViewer で行うことが可能で、ArcGIS Maps SDK for JavaScript で Web マップを利用した際に、それらの設定を引き継いだ状態で使用することができます。
また、ArcGIS Maps SDK for JavaScript はデフォルトで ArcGIS Online を参照しています。Portal for ArcGIS に接続したい場合は、別途設定が必要になりますが、ArcGIS Online のアイテムを使用して ArcGIS Maps SDK for JavaScript を利用する場合、前提の設定は必要ありません。

Web アプリケーションでの利用

ArcGIS Online の Web マップからマップを作成

ArcGIS Online の Web マップを使用してマップを作成する場合、ArcGIS Maps SDK for JavaScript では、PortalItem クラスを使用します。最初に必要なモジュールをインポートし、Web マップ ID を使って新しい PortalItem インスタンスを作成します。次に、WebMap クラスのインスタンスを作成し、portalItem プロパティに 作成した PortalItem インスタンスを設定します。

Web マップ ID から作成

ArcGIS Online の Web マップ ID を使用してマップを作成するため、まず Web マップの詳細ページに移動します。Web マップ ID は、詳細ページ URL の最後の値です。例えば、Topographic マップの詳細ページ URL が「https://www.arcgis.com/home/item.html?id=67372ff42cd145319639a99152b15bc3」の場合、Web マップ ID は「67372ff42cd145319639a99152b15bc3」になります。
サンプルコード:

require([
  "esri/portal/PortalItem",
  "esri/WebMap",
  "esri/views/MapView"
], function(PortalItem, WebMap, MapView) {
  // Web マップの ID を変数に格納
  const webMapId = "67372ff42cd145319639a99152b15bc3"
  
  // WebマップIDを使って新しいPortalItemを作成する
  const portalitem = new PortalItem({
    id: webMapId
  });

  // PortalItemから新しいWebMapインスタンスを作成する
  const webMap = new WebMap({
    portalItem: portalitem
  });

  // WebMapを使ってMapViewを作成する
  const view = new MapView({
    container: "mapDiv",
    map: webMap
  });
});
     

ArcGIS Online のアイテムを使う際の認証

ArcGIS Online のアイテム（Web マップなど）を Web アプリケーションで使用する際の認証は、以下のポイントに注意して行います。

• パブリックなアイテムの場合: パブリックなアイテムは認証を必要としません。アイテムの詳細情報はログインなしでアクセス可能です。
• 非パブリックなアイテムの場合: ユーザーがログインしている場合、SDK は ArcGIS Online に対して自動的に認証します。

アクセス権がない場合は、適切な認証情報を提供する必要があります。 ArcGIS Online へのサイン インは、通常、アプリケーション上でセキュアなアイテムへのアクセスが必要になった際に行われます。Portal クラスの authMode プロパティを使用することで、任意のタイミングでサイン インを求めることもできます。アプリケーションとして求められている挙動に応じて、authMode プロパティを設定します。

Portal.authModeプロパティでサインインのタイミングを指定

• anonymous : サインインしない。アクセス制限されたコンテンツを使用する際に、エラーが返される。
• auto : アクセス制限されたコンテンツを使用する際に、サインインダイアログが表示される（デフォルト）
• immediate : Portal クラスのロード時にサインインする。

サンプルコード：

// Portal のインスタンスを作成
const portalSite = new Portal();
// 認証処理
portalSite.authMode = “immediate”; // ロード時にサインイン
portalSite.load().then(function() { //ロード（サインイン）
    user = portalSite.user; // サインインしたユーザー
    user.fetchItems(params); // 指定したフォルダーのアイテムを取得
});