ArcGIS で始める Web マップアプリ開発　地図表示編

はじめに

本稿から始まる一連のシリーズ記事では、はじめて Web マップアプリ開発を行う方に向けて、ArcGIS Maps SDK for JavaScript を使用した Web マップアプリ開発の流れを紹介していきます。

ArcGIS Maps SDK for JavaScript とは？

ArcGIS Maps SDK for JavaScript は、Web ブラウザーから GIS 機能を利用するための豊富な API を含んだ SDK です。

簡単な地図を既存の Web ページに組み込んだり、地図上にさまざまな表現方法を用いて位置情報を可視化したり、検索や解析などの豊富な GIS 機能を実装したりするなど、Web 地図アプリの開発をサポートします。

シリーズ記事の第 1 回となる今回は、すべての基礎となる地図の表示方法をご紹介します。

Web ブラウザーに地図を表示してみよう！

１．必要なライブラリーの追加

まず、地図を表示するための Web ページの HTML を作成します。

Web アプリ開発の実行環境をお持ちでない方は、CodePen を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。

CodePen を開くと左上に HTML、下側に実行結果が表示されるので、以下を入力してください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"> 
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 
  <title>Web ブラウザーに地図を表示してみよう！</title> 
  <style> 
    html, 
    body { 
      padding: 0; 
      margin: 0; 
      height: 100%; 
      width: 100%; 
    } 
  </style> 
</head> 
<body> 
</body> 
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<head> タグ内に以下のコードを追加し、アプリケーションに必要なライブラリーを参照します。

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

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

<!-- マップ コンポーネントをロード --> 
<script type="module" src="https://js.arcgis.com/4.34/map-components/"></script>

２．API キーの追加

API キーは、ArcGIS のセキュアなサービス、コンテンツ、および機能へのアクセスをアプリケーションに許可するアクセストークンです。API キーの詳しい取得方法は ArcGIS Developers 開発リソース集の API キーの取得を参照ください。

<head> タグ内に以下のコードを追加し、API キーを用いた認証を実装します。

<script>
  var esriConfig = { apiKey: "YOUR_ACCESS_TOKEN" };
</script>

他の認証方法に関しては、本シリーズ記事でも扱っておりますので OAuth 2.0 認証編をご覧ください。

３．マップコンポーネントの追加

ArcGIS Maps SDK for JavaScript のマップコンポーネントを使用して画面上に地図を表示するため、<body> タグ内に <arcgis-map> タグを追加します。地図の背景に表示するベースマップを定義する basemap などのプロパティを設定できます。

<body>
  //追加開始
  <!-- マップ コンポーネント： topographic ベースマップで日本を中心に表示 -->
  <arcgis-map basemap="arcgis/topographic" center="138, 35.5" zoom="5">
  </arcgis-map>
  //追加終了
</body>

ベースマップには、arcgis/streets（道路地図）のほかに、arcgis/imagery（衛星画像）、arcgis/topographic（地形図）、arcgis/light-gray（キャンバス（ライトグレー））など、いくつかの種類があり、地図の用途に合わせて最適なベースマップを選択します。なお、上記のベースマップを利用する場合は認証が必要です。その他に利用可能なベースマップの詳細は、Map の basemap プロパティをご参照ください。

また、今回は center プロパティと zoom プロパティを用いて、日本を中心とした適切な縮尺で表示となるように設定を行っています。

正しく実行することができれば下図のように表示されます。CodePen を使用している場合は、CodePen の仕様により地名などのラベルが英語表記になります。

このように、マップコンポーネントを用いることで、非常に簡単なコードで地図を表示させることができました。

今回作成したサンプルは ESRIジャパンの GitHub に公開しています。

チャレンジ：３D 地図を表示してみよう！

先ほど利用したマップコンポーネントの <arcgis-map> タグと同じように、<arcgis-scene> タグを利用することで、簡単に 3D 地図を表示することも可能です。

先ほどの <body> タグ内を以下の通りに変更してみましょう。

<body>
  <!-- マップ コンポーネント：imagery ベースマップで日本を中心に3D地図で表示 -->
  <arcgis-scene basemap="arcgis/imagery" center="138, 35.5" zoom="5">
  </arcgis-scene>
</body>

簡単に 3D 地図を表示させることができたかと思います。

Web マップを表示してみよう！

１．Web マップとは？

Web マップとは、背景地図に主題となる地図データを追加し、表示方法などを設定して作成できる Web 上の地図です。

Web マップを作成するには ArcGIS Online が提供する地図作成ツール「マップビューアー」を使用します。地図のスタイル情報、ポップアップの設定などはこのマップビューアーを用いて設定することができるため、コード不要でマップの作成ができます。

作成した Web マップは API で読み込んで活用することができ、より簡単にアプリケーションの開発を始めることができます。

２．Web マップの作成

ArcGIS Online にサインインし、マップビューアーを開き作成を開始します。

ただし今回は、Web マップが事前に作成されている前提で、アプリで利用したい地図を簡単に表示できることをご紹介します。Web マップの作成方法は ArcGIS リソース集のマップ作成と利用に詳しく掲載しておりますので、そちらをご覧ください。

３．Web マップの表示

作成した Web マップを API で読み込んで表示してみましょう。

Web マップには一意の ID が付与されています。アイテムの詳細ページに [アイテム ID] として記載されているものが Web マップの ID です。API は、この ID をもとに Web マップを参照します。

先ほど利用したマップコンポーネントの <arcgis-map> タグから、basemap プロパティ、center プロパティと zoom プロパティを削除してから、itemId プロパティを追加し ID を指定します。

今回は ESRIジャパンが公開している、全国市区町村界マップを（ID は ab8dbdfe81f94fa4ac4e13fc46330211 ）使用し、表示させてみましょう。

<body>
  <!-- マップ コンポーネント： Web マップを表示 -->
  <arcgis-map item-id="ab8dbdfe81f94fa4ac4e13fc46330211">
  </arcgis-map>
</body>

CodePen を使用している場合は、自動的に実行結果が下側に表示されます。

このように Web マップを用いて、スタイルやポップアップなどのマップの基本的な情報をマップビューアーで事前に設定しておけば、API を用いてイチからマップを作成するよりも容易にアプリケーションの開発をはじめることができます。

おわりに

本記事では、マップコンポーネントを用いた基本的な地図の表示と、Web マップの表示方法についてご紹介しました。

今回作成したサンプルは以下で動作を確認できます。なお、本シリーズ記事に掲載をしているサンプルについては、認証を必要としない無料公開のベースマップ（”topo-vector”）に変えて記述しています。

ArcGIS で始める Web マップアプリ開発　地図表示編