ArcGIS Maps SDK for JavaScript

マップを表示する

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

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

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

前提条件

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

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

ステップ

新しい Pen の作成

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

HTML の作成

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

  1. 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 の参照

  1. <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.26/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.26/"></script>
        <!-- 追加終了 -->
    
      </head>
      <body>
        <div id="viewDiv"></div>
      </body>
    </html>
    

モジュールの追加

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

  1. <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.26/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.26/"></script>
        <!-- 追加終了 -->
           
        <!-- モジュールの追加 -->
        <script>
          require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {
    
          });
        </script>
        <!-- 追加終了 -->
    
      </head>
      <body>
        <div id="viewDiv"></div>
      </body>
    </html>
    

API キーの取得

ArcGIS サービスにアクセスするには、API キーが必要です。

  1. developer dashboardにアクセスして、API キーを取得します。
  2. 次のステップで使用しますので、キーをコピーしてください。

マップの作成

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

  1. CodePen に戻ります。

  2. require 文の中で、新しい Map を作成し、basemap プロパティに arcgis-topographic を設定します。ベースマップ レイヤーサービスへのアクセスを可能にするために、Map の apiKey() プロパティを設定します。

    <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.26/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.26/"></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: "arcgis-topographic" // Basemap layer service
            });
    
          });
        </script>
        <!-- 追加終了 -->
    
      </head>
      <body>
        <div id="viewDiv"></div>
      </body>
    </html>
    

マップ ビューの作成

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

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

    • MapView は、地図の内容を表示します。centerzoom のプロパティは、ロード時にマップの位置と表示されるズームレベルを決定する。

    • zoom プロパティは、マップのズームレベルを設定します。値の範囲は通常 0〜20 で、0 が地表から最も遠く、20 が最も近くなります。ベースマップ レイヤーの中には、さらに 23 までのズーム・レベルをサポートするものもあります。

    • MapView は、クリックやダブルクリックなどのいくつかのタッチイベントもサポートしています。これらのイベントを利用して、マップの位置を変更したり、レイヤー内のフィーチャーを探したりすることができます。

    • Maps(2D)でのマップとマップビューの仕組みについては、マッピング API とロケーションサービス のガイドを参照してください。

    <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.26/esri/themes/light/main.css">
        <script src="https://js.arcgis.com/4.26/"></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: "arcgis-topographic" // Basemap layer service
            });
    
            // マップ ビューの作成
            const view = new MapView({
              map: map,
              center: [138.727363, 35.360626], // Longitude, latitude
              zoom: 13, // Zoom level
              container: "viewDiv" // Div element
            });
    
          });
        </script>
        <!-- 追加終了 -->
    
      </head>
      <body>
        <div id="viewDiv"></div>
      </body>
    </html>
    

アプリを実行する

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

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

Web マップを表示する

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

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

    <!-- モジュールの追加 -->
    <script>
      require(["esri/config","esri/Map", "esri/WebMap", "esri/views/MapView"], function (esriConfig, Map, WebMap, MapView) {
    
        // .....
    
      });
    </script>
    <!-- 追加終了 -->
    
  2. Map オブジェクトを下記のように書き換えます。

     // Web マップの参照
     const map = new WebMap({
       portalItem: {
         id: "<Web マップ ID>"
         //id: "d3ffea931f4a455f9c3b6c2102e66eda"
       }
     });
    
  3. 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.26/esri/themes/light/main.css">
         <script src="https://js.arcgis.com/4.26/"></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: "arcgis-topographic" // Basemap layer service
             });
             */
    
             // Web マップの参照
             const map = new WebMap({
                 portalItem: {
                   id: "<Web マップ ID>"
                   //id: "d3ffea931f4a455f9c3b6c2102e66eda"
                 }
             });
        
             // マップ ビューの作成
             const view = new MapView({
               map: map,
               center: [138.727363, 35.360626], // Longitude, latitude
               zoom: 13, // Zoom level
               container: "viewDiv" // Div element
             });
    
           });
         </script>
         <!-- 追加終了 -->
    
       </head>
       <body>
         <div id="viewDiv"></div>
       </body>
     </html>
    

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