ArcGIS Developers 開発リソース集 > スタートアップガイド > アプリ開発 > ArcGIS Maps SDK for JavaScript

ArcGIS Maps SDK for JavaScript

マップを表示する

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

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

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

前提条件

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

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

ステップ

新しい Pen の作成

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

HTML の作成

HTML ページを定義して、Web ブラウザのウィンドウの幅と高さをフル利用してマップを作成します。

CodePen ＞ HTML で、HTML と CSS を追加し、viewDiv 要素を持つページを作成します。viewDiv は地図を表示する要素で、その CSS はブラウザの設定をリセットして、ブラウザの幅と高さをフルに利用できるようにしています。

CodePenでは、<!DOCTYPE html> タグは必要ありません。他のエディタを使用している場合や、ローカルサーバでページを実行している場合は、必ずこのタグを HTML ページの先頭に追加してください。
```
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>
```

API の参照

<head> タグ内に、CSS ファイルと JS ライブラリへの参照を追加します。

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <!-- CSS ファイルと JS ライブラリへの参照を追加 -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.29/"></script>
    <!-- 追加終了 -->

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

モジュールの追加

ArcGIS JS API には AMD モジュールが含まれています。require ステートメントで Map モジュールと MapView モジュールを参照します。

<head> タグ内に、<script> タグと AMD の require ステートメントを追加して、Map モジュールと MapView モジュールを読み込みます。

JavaScript のコードを HTML パネルではなく、CodePen ＞ JS パネルに追加することもできます。その場合は、<script> タグを削除してください。

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <!-- CSS ファイルと JS ライブラリへの参照を追加 -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.29/"></script>
    <!-- 追加終了 -->
       
    <!-- モジュールの追加 -->
    <script>
      require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {

      });
    </script>
    <!-- 追加終了 -->

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

API キーの取得

ロケーションサービスにアクセスするには、API キーが必要です。 API キーの作成手順については「API キーの取得」を参照してください。

ダッシュボードにアクセスして、Developer credentials から API キーを取得します。
次のステップで使用しますので、API キーをコピーしてください。

マップの作成

Map を使ってベースマップレイヤーを設定し、API キーを適用します。

CodePen に戻ります。

require 文の中で、新しい Map を作成し、basemap プロパティに arcgis/topographic を参照するベースマップスタイルの情報を設定します。ベースマップスタイルサービスへのアクセスを可能にするために、Map の apiKey() プロパティを設定します。

マップには、データレイヤとベースマップレイヤがあります。ベースマップスタイルサービスからベースマップレイヤーにアクセスするためには、API キーが必要です。キーは、Map の作成時に前のステップから設定できます。
マップおよびマップビューが Map（2D）でどのように機能するかについては、マッピングとロケーションサービスを参照してください。

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <!-- CSS ファイルと JS ライブラリへの参照を追加 -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.29/"></script>
    <!-- 追加終了 -->
    　
    <!-- モジュールの追加 -->
    <script>
      require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {
           
        // API キーの追加
        esriConfig.apiKey = "YOUR-API-KEY";

        // マップの作成
        const map = new Map({
          basemap:{
            style:{
              id:"arcgis/topographic", // 地形図ベースマップ レイヤー
              language:"ja"
            }
          }
        });

      });
    </script>
    <!-- 追加終了 -->

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

マップビューの作成

MapView クラスを使って、表示する地図の位置を設定します。

MapView を作成し、map プロパティを設定します。マップビューを中央に表示するために、center プロパティを 138.727363, 35.360626 に、zoom プロパティを 13 に設定します。マップの内容を表示するために、container のプロパティを viewDiv に設定します。

MapView は、地図の内容を表示します。center と zoom のプロパティは、ロード時にマップの位置と表示されるズームレベルを決定する。
zoom プロパティは、マップのズームレベルを設定します。値の範囲は通常 0〜20 で、0 が地表から最も遠く、20 が最も近くなります。ベースマップレイヤーの中には、さらに 23 までのズーム・レベルをサポートするものもあります。
MapView は、クリックやダブルクリックなどのいくつかのタッチイベントもサポートしています。これらのイベントを利用して、マップの位置を変更したり、レイヤー内のフィーチャーを探したりすることができます。
Maps（2D）でのマップとマップビューの仕組みについては、マッピングとロケーションサービスのガイドを参照してください。

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <!-- CSS ファイルと JS ライブラリへの参照を追加 -->
    <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.29/"></script>
    <!-- 追加終了 -->
    　
    <!-- モジュールの追加 -->
    <script>
      require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig, Map, MapView) {

        // API キーの追加
        esriConfig.apiKey = "YOUR-API-KEY";

        // マップの作成
        const map = new Map({
          basemap:{
            style:{
              id:"arcgis/topographic", // 地形図ベースマップ レイヤー
              language:"ja"
            }
          }
        });

        // マップ ビューの作成
        const view = new MapView({
          map: map,
          center: [138.727363, 35.360626], // 経度、緯度
          zoom: 13, // ズーム レベル
          container: "viewDiv" // MapView を表示する HTML 上の Div 要素の ID
        });

      });
    </script>
    <!-- 追加終了 -->

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

アプリを実行する

CodePen で、作成したコードを実行して地図を表示します。

マップには、富士山を中心とした地形ベースマップレイヤーが表示されます。

Web マップを表示する

「Web マップの作成」のガイドで Web マップを作成している場合は、作成した Web マップも基本的に同じステップで表示できます。

require ステートメントにて、WebMap モジュールを追加で読み込みます。

<!-- モジュールの追加 -->
<script>
  require(["esri/config","esri/Map", "esri/WebMap", "esri/views/MapView"], function (esriConfig, Map, WebMap, MapView) {

    // .....

  });
</script>
<!-- 追加終了 -->

Map オブジェクトを下記のように書き換えます。

 // Web マップの参照
 const map = new WebMap({
   portalItem: {
     id: "<Web マップ ID>"
     //id: "d3ffea931f4a455f9c3b6c2102e66eda"
   }
 });

Web マップに置き換えた全体のコードは下記の通りです。

 <html>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
     <title>ArcGIS Maps SDK for JavaScript Tutorials: Display a map</title>

     <style>
       html,
       body,
       #viewDiv {
         padding: 0;
         margin: 0;
         height: 100%;
         width: 100%;
       }
     </style>
        
     <!-- CSS ファイルと JS ライブラリへの参照を追加 -->
     <link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css">
     <script src="https://js.arcgis.com/4.29/"></script>
     <!--追加終了  -->
        
     <!-- モジュールの追加 -->
     <script>
       require(["esri/config", "esri/Map", "esri/WebMap", "esri/views/MapView"], function (esriConfig, Map, WebMap, MapView) {

         // API キーの追加
         esriConfig.apiKey = "YOUR-API-KEY";

         // マップの作成
         /*
         const map = new Map({
           basemap:{
             style:{
               id:"arcgis/topographic", // 地形図ベースマップ レイヤー
               language:"ja"
             }
           }
         });
         */

         // Web マップの参照
         const map = new WebMap({
             portalItem: {
               id: "<Web マップ ID>"
               //id: "d3ffea931f4a455f9c3b6c2102e66eda"
             }
         });
    
         // マップ ビューの作成
         const view = new MapView({
           map: map,
           center: [138.727363, 35.360626], // 経度、緯度
           zoom: 13, // ズーム レベル
           container: "viewDiv" // MapView を表示する HTML 上の Div 要素の ID
         });

       });
     </script>
     <!-- 追加終了 -->

   </head>
   <body>
     <div id="viewDiv"></div>
   </body>
 </html>

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