はじめての Web マッピングアプリケーション開発 : Web マップの作成・表示編

この記事は「はじめての Web マッピングアプリケーション開発」のシリーズ記事として、はじめて地図アプリ開発を行う方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れを連載しています。

第 5 回目となる今回は、Web マップの概要と Web マップの作成・表示の方法をご紹介します。

前回の記事と同様にソースコードは ESRIジャパンの GitHub で公開しています（※2021年12月追記：”ファイル名.html” が2018年時のサンプル、”ファイル名_2021.html” が2021年に書き換えしたサンプルです）ので、ぜひご覧ください。Web アプリ開発の実行環境をお持ちでない方は、JSBin を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。

Web マップとは？

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

仕組みとしては ArcGIS のクラウドまたはオンプレミス環境に JSON 形式で保存されます。作成した Web マップは、だれとでも共有することができます。

Web マップは、道路地図や地形図、衛星画像などといったベースマップ (背景地図) に、GIS データや画像データ、Web 上に存在するオンラインマップサービスなどをレイヤーとして重ね合わせた状態で地図として保存することができます。

Web マップを作成するには ArcGIS Online が提供する地図作成ツール「マップビューアー」を使用します。地図のスタイル情報、ポップアップの設定などはこのマップビューアーを用いて設定することができるため、コード不要でマップの作成ができます。作成した Web マップは API で読み込んで活用することができ、より簡単にアプリケーションの開発を始めることができます。

Web マップの作成

今回は、マップビューアーを使用して、前回までの記事でプログラミングで作成したマップと同じ Web マップを作成し、API で利用してみます。

※完成イメージ

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

レイヤーの追加

[レイヤーの表示編] で追加したレイヤーを Web マップに追加します。Web マップへレイヤーを追加する方法はいくつかあります。今回はレイヤーを検索して追加します。マップビューアーの [レイヤーの検索] から ArcGIS Online で共有されているレイヤーを検索できます。

[追加] → [レイヤーの検索] をクリックします。

レイヤーの検索を行います。検索先を ArcGIS Online とし、キーワードを入力して検索します。

今回は「全国市区町村界データ」と検索し、「全国市区町村界データ (簡易版)」を選択し [マップに追加] をクリックします。

同様にキーワードで検索し、「愛知県地価公示 (平成25年)」と「淡色地図 (地理院タイル)」をマップに追加します。

スタイルの変更

[レイヤーの可視化編] で行った数値分類にスタイルを変更します。

コンテンツウィンドウで「愛知県公示価格（平成 25 年）」の [スタイルの変更] アイコンをクリックします。
[表示する属性を選択] のドロップダウンリストから [H26 価格] を選択します。レイヤーのスタイルが変更されました。これはスマートマッピングと呼ばれる機能で、選択した属性の値から最適なスタイルが自動で設定されるため、目的のデータを手軽に可視化することができます。
自動で設定されたスタイルの変更も簡単に行えます。今回は、データをクラスごとに分類したスタイルを定義するので、[描画スタイルの選択] で [数と量] をクリックします。
[データの分類] にチェックを入れ、自然分類を使用、4 クラスを使用と設定します。[OK] をクリックし、[完了] をクリックします。

これで、スタイルを変更することができました。

ポップアップの設定

[ポップアップの設定編] と同じポップアップを追加します。

コンテンツウィンドウの [その他のオプション] アイコンをクリックし、[ポップアップの構成] をクリックします。ポップアップの構成ウィンドウでポップアップタイトルを「愛知県の地価公示」と入力します。ポップアップコンテンツの属性フィールドの構成をクリックし、「基準地番号」、「用途」、「H26 価格」、「H25 価格」のみにチェックを入れ、[OK] をクリックします。

これでポップアップの設定は完了です。

最後に Web マップの保存を行います。マップビューアーの表示範囲も保存されます。[保存] ボタンをクリックし、マップの情報を入力します。タイトルとタグは必須の入力項目です。入力後、マップを保存します。保存が完了すると、一意の ID が生成されます。URL 末尾の webmap= 以降が作成したWeb マップの ID です。API は、この ID をもとに Web マップを参照します。

Web マップの表示

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

前回までは、Map クラスを使用してマップを作成してきました。Web マップを利用するには、Map クラスの代わりに WebMap クラスを利用します。

Web Map モジュールを参照します。

require([
 "esri/WebMap",
 "esri/views/MapView",
 "dojo/domReady!"
], function(WebMap, MapView) {
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

作成した Web マップを参照します。

9 行目の Web マップの ID と記載されている箇所を作成した Web マップの ID に書き換えます。

require([
 "esri/WebMap",
 "esri/views/MapView",
 "dojo/domReady!"
], function(WebMap, MapView) {
 // Web マップの参照
 const webmap = new WebMap({
 portalItem: {
 id: "Web マップのID"
 }
 });
 // 地図ビュー
 const view = new MapView({
 container: "viewDiv",
 map: webmap
 });
 });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

これで Web マップの表示ができました。

JSBin を使用している場合は、[Run with JS] ボタンをクリックすると実行結果が右側に表示されます。

これまでのコードと比較すると、簡単にマップの作成やポップアップの設定ができたのではないでしょうか。

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

ステップアップ！

Web マップに含まれるレイヤーは、API を使用して作成したレイヤーと同じようにさまざまな操作を行えます。[レイヤーの表示編] で実装したレイヤーの表示 / 非表示を切り替えるチェックボックスを作成して、レイヤーの表示を制御してみましょう。

1．チェックボックスの親要素の作成

今回は Web マップに含まれるレイヤーをもとに動的にチェックボックスを作成します。まず、チェックボックスを表示する親要素とそのスタイルを追加しましょう。

<style>
 #layerToggle {
 top: 20px;
 right: 20px;
 position: absolute;
 z-index: 99;
 background-color: white;
 border-radius: 8px;
 padding: 10px;
 opacity: 0.75;
 }
</style>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<body>
 <div id="viewDiv"></div>
 <span id="layerToggle"></span>
</body>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

2．レイヤーの表示の制御

[レイヤーの表示編] と同じように layer.visible へのアクセスでレイヤーの表示を制御できます。そのためには、Web マップに含まれるレイヤーを取得しなければなりません。

Web マップに含まれるレイヤーは layers プロパティの参照で取得可能です。layers プロパティは、レイヤーのコレクションです。コレクションには、アイテムを操作する便利な機能が提供されています。今回は各アイテムに対して処理を実行する forEach メソッドを使用して、各レイヤーの表示を制御するチェックボックスを作成しました。

webmap.when(function() {
 // チェックボックスを表示する親要素
 const ele = document.getElementById("layerToggle");

 // Web マップに含まれるレイヤーを取得し、処理を実行
 webmap.layers.forEach(function(layer) {
 // レイヤーごとに表示/非表示を切り替えるチェックボックスを作成
 const checkbox = document.createElement("input");
 checkbox.type = "checkbox";
 checkbox.id = layer.id;
 checkbox.checked = layer.visible;
 checkbox. = function(evt) {
 layer.visible = evt.target.checked;
 };
 ele.appendChild(checkbox);

 const label = document.createElement("label");
 label.htmlFor = layer.id;
 label.innerHTML = layer.title;
 ele.appendChild(label);
 });
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

マップの右上にチェックボックスが表示され、レイヤーの表示 / 非表示を切り替えることができたら完成です。

おわりに

本記事では、Web マップの概要と作成、表示方法についてご紹介しました。ぜひ Web マップでいろいろな設定をし、アプリケーションの開発に活用してみてください。

今回作成したサンプルは以下で動作を確認できます。

・Web マップ：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/webmap/webmap.html

※2021年12月追記：2021年12月以降は、以下で動作を確認できます。

・Web マップ：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/webmap/webmap_2021.html

次回はグラフィックについてご紹介します。

はじめての Web マッピングアプリケーション開発 : Web マップの作成・表示編