マップを表示する

このチュートリアルでは ArcGIS Maps SDK for JavaScript を使用して、ベースマップレイヤーを使用したマップの作成と表示方法を学びます。

マップには、地理データのレイヤーが含まれています。マップには、ベースマップレイヤーと、オプションで1つ以上のデータレイヤーを追加できます。マップビューを使用し、場所とズームレベルを設定することで、マップの特定の領域を表示できます。

このチュートリアルでは、地形ベースマップレイヤーを使用して、富士山付近を表示する地図を作成します。

このチュートリアルのマップとコードは、他の 2D チュートリアルの出発点として使用されます。

マップとレイヤーの詳細については、Mapping and location services ガイドの Maps, scenes, and layers を参照してください。

前提条件

このチュートリアルを実施するには、以下が必要です。

API キーにアクセスするための ArcGIS Online アカウントもしくは ArcGIS 開発者アカウント
- アカウントをお持ちでない場合は、ArcGIS 開発者アカウントにサインアップ（無料）してください。アカウントの作成方法は「開発者アカウントの作成」をご覧ください。

ステップ

新しい Pen の作成

CodePen にアクセスして、マッピングアプリケーション用の新しい Pen を作成します。

より詳細に

CodePen では、<!doctype html></html> タグは不要です。別のエディターを使用している場合やローカルサーバーでページを実行する場合は、開始タグと終了タグの両方を必ず追加してください。

基本的なHTMLの追加

基本的なHTMLページを定義します。

CodePen > HTML で、基本的なページを作成するための HTML を追加してください。

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>

</head>

<body>

</body>

</html>

CSS の追加

CodePen > HTML で、CSS を追加してマップをブラウザーの全幅と全高に設定します。

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>
  <!-- マップをブラウザー上に表示する領域を追加 -->
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>
  <!-- 追加終了 -->

</head>

<body>

</body>

</html>

アクセストークンの取得

このチュートリアルで使用される位置情報サービスにアクセスするには、適切な権限を持つアクセストークンが必要です。

API キーの取得のチュートリアルを参照し、以下の権限を持つ API キーを作成してください。
- 権限
  - Location services > Basemaps
CodePen では、esriConfig.apiKey にアクセストークンを設定してください。

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>
  
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>
  
  <!-- アクセス トークンを追加 -->
  <!-- esriConfig 変数は、他の esri ライブラリーを追加する前に定義する必要があります。 -->
  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>
  <!-- 追加終了 -->
</head>

<body>

</body>

</html>

アクセストークンを取得するその他の方法については、Types of authentication を参照してください。

リファレンスの追加

<head> タグ内に、Map コンポーネントと Calcite Design System の <script> タグを追加してください。

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>
  
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <!-- esriConfig 変数は、他の esri ライブラリーを追加する前に定義する必要があります。 -->
  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- リファレンスの追加 -->
  <!-- CDN から Caliete Design System をロード -->
  <script type="module" src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"></script>

  <!-- CDN から ArcGIS Maps SDK for JavaScript をロード -->
  <script src="https://js.arcgis.com/4.34/"></script>

  <!-- CDN から Map コンポーネントをロード -->
  <script type="module" src="https://js.arcgis.com/4.34/map-components/"></script>
  <!-- 追加終了 -->
</head>

<body>

</body>

</html>

マップの追加

マップコンポーネントを使用して、ベースマップレイヤー、位置、ズームレベルを設定します。

<body> タグ内に <arcgis-map> コンポーネントを追加し、ベースマップ、中心座標、ズームレベルを指定します。

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>
  
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <!-- esriConfig 変数は、他の esri ライブラリーを追加する前に定義する必要があります。 -->
  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- CDN から Caliete Design System をロード -->
  <script type="module" src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"></script>

  <!-- CDN から ArcGIS Maps SDK for JavaScript をロード -->
  <script src="https://js.arcgis.com/4.34/"></script>

  <!-- CDN から Map コンポーネントをロード -->
  <script type="module" src="https://js.arcgis.com/4.34/map-components/"></script>
</head>

<body>
  <!-- マップ コンポーネントをベースマップ、中心座標、ズームレベルを設定して追加 -->
  <arcgis-map basemap="arcgis/topographic" center="138.727363, 35.360626" zoom="13">

  </arcgis-map>
  <!-- 追加終了 -->
</body>

</html>

<arcgis-map> コンポーネント内に、<arcgis-zoom> コンポーネントを追加します。これにより、ユーザーはマウスホイールを使用せずにズームインおよびズームアウトが可能になります。

<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>
  
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
  </style>

  <!-- esriConfig 変数は、他の esri ライブラリーを追加する前に定義する必要があります。 -->
  <script>
    var esriConfig = {
      apiKey: "YOUR_ACCESS_TOKEN",
    };
  </script>

  <!-- CDN から Caliete Design System をロード -->
  <script type="module" src="https://js.arcgis.com/calcite-components/3.3.3/calcite.esm.js"></script>

  <!-- CDN から ArcGIS Maps SDK for JavaScript をロード -->
  <script src="https://js.arcgis.com/4.34/"></script>

  <!-- CDN から Map コンポーネントをロード -->
  <script type="module" src="https://js.arcgis.com/4.34/map-components/"></script>
</head>

<body>
  <arcgis-map basemap="arcgis/topographic" center="138.727363, 35.360626" zoom="13">
    <!-- ズーム コンポーネントの追加 -->
    <arcgis-zoom slot="top-left"></arcgis-zoom>
    <!-- 追加終了 -->
  </arcgis-map>
</body>

</html>

アプリを実行

CodePen でコードを実行してマップを表示してください。マップには、富士山を中心とした地形ベースマップレイヤーが表示されます。

次のチュートリアル

以下のチュートリアルで、追加の SDK 機能と ArcGIS サービスの使用方法を学びましょう（英語ページ）。

アプリの動作が確認できたら ArcGIS のセキュリティと認証について学びましょう！

Esri Leaflet

ArcGIS Maps SDK for JavaScript