ArcGIS で始める Web マップ アプリ開発 コンポーネント編
はじめに
「ArcGIS で始める Web マップ アプリ開発」のシリーズ記事では、はじめてマップ アプリ開発を行う方に向けて、ArcGIS Maps SDK for JavaScript を使用した Web マップアプリ開発の流れをシリーズで連載しています。
第 7 回は、複雑な機能をWebアプリに簡単に実装できる Web コンポーネントを用いた開発について紹介します。
これまでの記事と同様にソースコードは ESRIジャパンの Github で公開しています。Web アプリ開発の実行環境をお持ちでない方は、CodePen を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。
Web コンポーネントとは
通常 Web マッピング アプリケーション開発においては、GIS の機能はもちろんですが、見やすさや使いやすさなど、ユーザビリティーを考慮した開発が必要になってきます。そのためには、UI（ユーザー インターフェイス ）の開発が重要ですが、イチ から UI を開発するのは時間がかかるため、多くの開発者が悩むところだと思います。
ArcGIS Maps SDK for JavaScript では、GIS でよく使用する機能をユーザビリティーにも配慮したコンポーネントとして、いくつか提供しています。これを活用することでリッチな UI を備えた GIS の機能を Web マッピング アプリケーションに簡単に組み込むことができます。
ArcGIS Maps SDK for JavaScript における Web コンポーネントは、最小限のコードで Web アプリを構築するための、あらかじめ構築された UI コンポーネントのコレクションです。これらは、JavaScript のコア API を再利用可能なカスタム HTML 要素（例：<arcgis-map></arcgis-map>）として拡張可能です。また、JavaScript フレームワークに依存しない設計となっているため、バニラ JavaScript やほとんどのフレームワーク、モジュール バンドラーを使用したアプリケーションでも利用可能です。詳しくはリファレンスやArcGIS 開発者ブログをご参照ください。
本記事では、操作性やデザイン性に優れた UI を持ち、簡単に導入できる Web コンポーネントについて、前半と後半の 2 つのセクションに分けて紹介します。マップ コンポーネントを利用して地図を表示するまでのステップは、第 5 回までの記事でご紹介していますので省略します。
前半：標準的な Web コンポーネント
前半では、マップ表示に使いやすい標準的な Web コンポーネントについてご紹介します。
1. Zoom コンポーネント
拡大・縮小をするためのコンポーネントです。
＜実装コード例＞
<arcgis-map> タグ内に <arcgis-zoom> タグを記述します。
<arcgis-map basemap="topo-vector" center="138, 35.5" zoom="5">
<!-- <arcgis-map> タグ内に <arcgis-zoom> タグを記述 -->
<arcgis-zoom slot="top-left"></arcgis-zoom>
</arcgis-map>
2. Search コンポーネント
マップ内の目標物や場所を検索するためのコンポーネントです。
このコンポーネントは Esri が提供している ArcGIS World Geocoding Service を参照しており、住所や場所、建物名などを検索する機能を備えています。さらに、検索キーワードなどを入力すると、候補を自動的に表示して、最適なものを選択するオプションなども提供しています。
また、ArcGIS World Geocoding Service は、 2 万リクエストまでは、無償で使用できます。
＜実装コード例＞
<arcgis-zoom> タグに続けて <arcgis-search> タグを記述します。
<arcgis-map basemap="topo-vector">
<arcgis-zoom slot="top-left"></arcgis-zoom >
<!-- <arcgis-search> タグを記述 -->
<arcgis-search slot="bottom-left"></arcgis-search>
</arcgis-map>
3. Basemap コンポーネント
背景地図の切り替えを行うためのコンポーネントで、ArcGIS Online や ArcGIS Enterprise にホストされている背景地図にアクセスして表示します。背景地図の一覧を表示し、コンポーネント内に表示されている地図をクリックすると背景地図が切り替わります。
また、背景地図へのリクエストは、１ヶ月 200 万タイルまでは、無償で使用できます。
＜実装コード例＞
<arcgis-search> タグに続けて <arcgis-basemap-gallery> タグを記述します。
<arcgis-map basemap="topo-vector">
<arcgis-zoom slot="top-left"></arcgis-zoom >
<arcgis-search slot="bottom-left"></arcgis-search>
<!-- <arcgis-basemap-gallery> タグを記述 -->
<arcgis-basemap-gallery slot="top-left"></arcgis-basemap-gallery>
</arcgis-map>
4. その他のコンポーネント
これらの他にもArcGIS Maps SDK for JavaScript では、多くの標準的なコンポーネントを提供しています。
例えば、地図機能としてよく使用されるケースとして以下の便利なコンポーネントを提供しています。
- 地図上で現在位置を特定するための Locate コンポーネント
- 地図上に凡例を表示するための Legend コンポーネント（第 3 回の記事で紹介）
- 目的の場所をブックマークとして追加し、ブックマークを選択してその場所へ移動できる Bookmarks コンポーネント
＜実装コード例＞
<arcgis-basemap-gallery> タグに続けて 3 つのタグを記述
<arcgis-map basemap="topo-vector">
<arcgis-zoom slot="top-left"></arcgis-zoom >
<arcgis-search slot="bottom-left"></arcgis-search>
<arcgis-basemap-gallery slot="top-left "></arcgis-basemap-gallery>
<!-- 3 つのタグを記述 -->
<arcgis-locate slot="top-left" scale="5000"></arcgis-locate>
<arcgis-legend slot="bottom-right"></arcgis-legend>
<arcgis-bookmarks
slot="top-right"
drag-enabled
show-add-bookmark-button
show-edit-bookmark-button></arcgis-bookmarks>
</arcgis-map>
トピック．Expand コンポーネント
ArcGIS Maps SDK for JavaScript では、コンポーネントを使用することで、非常に簡単に Web アプリに機能を追加することができますが、複数のコンポーネントを配置すると、メインの地図の大部分がコンポーネントと重なってしまい、ユーザビリティーが損なわれます。
ここまでのコードで作成される Web アプリも、下のように地図が見えにくくなっています。
Expand コンポーネントを使うことで、1 つないし複数のコンポーネントをまとめてボタンで展開・折り畳みすることができるようになり、必要な時だけコンポーネントを画面に展開することができます。
＜実装コード例＞
まとめたいコンポーネントのタグを、下のように <arcgis-expand> タグで囲みます。その際、対象のタグの slot プロパティは削除します。
<arcgis-map basemap="topo-vector" center="138, 35.5" zoom="5">
<arcgis-zoom slot="top-left"></arcgis-zoom>
<!-- ここから <arcgis-expand> タグで囲む -->
<arcgis-expand expanded close-on-esc slot="top-left" mode="floating">
<arcgis-search></arcgis-search>
<arcgis-basemap-gallery></arcgis-basemap-gallery>
</arcgis-expand>
<!-- ここまで囲む -->
<arcgis-locate slot="top-left" scale="5000"></arcgis-locate>
<!-- ここから <arcgis-expand> タグで囲む -->
<arcgis-expand expanded close-on-esc slot="bottom-right" mode="floating">
<arcgis-legend></arcgis-legend>
<arcgis-bookmarks drag-enabled show-add-bookmark-button
show-edit-bookmark-button></arcgis-bookmarks>
</arcgis-expand>
<!-- ここまで囲む -->
</arcgis-map>赤い線で囲った矢印のボタンによって、展開・折り畳みの制御が可能です。
ここでは全てを紹介できませんが、他のコンポーネントについては、リファレンスを参照することで確認できます。また、サンプルコードとしても提供していますので、ご参照ください。
後半：機能的な Web コンポーネント
後半では、マップ表示をするのみではなく、印刷・編集・スケッチといった、より機能的な Web コンポーネントについてご紹介します。
新たなコード ファイルを用意します。また、後の作業のため、<arcgis-map> タグにおける center と zoom プロパティを下記の通り変更します。
<!-- center と zoom を変更 -->
<arcgis-map basemap="topo-vector" center="139.74, 35.68" zoom="15">
1. Print コンポーネント
GIS アプリケーションではパンやズーム イン・アウトで柔軟に地図の見え方を変えられることが紙地図と異なる大きな特徴の一つですが、ユーザーが現在見ている状態の地図画面をそのまま出力して、別のユーザーに見せたいときもあります。そんなときに使うのが Print コンポーネントで、様々なファイル形式・レイアウトで地図を出力することができます。
＜実装コード例＞
<arcgis-map> タグ内に <arcgis-print> タグを記述します。
<arcgis-map basemap="topo-vector" center="139.74, 35.68" zoom="15">
<!-- <arcgis-map> タグ内に <arcgis-print> タグを記述 -->
<arcgis-print slot="bottom-left"></arcgis-print>
</arcgis-map>
2．Editor コンポーネント
- Editor コンポーネントの作成
マップは、背景となるベースマップ、現実世界にある建物や道路など表すフィーチャ レイヤーとそれに付随する属性情報（施設用途、道路幅等）などによって構成されています。マップを利用するユーザーは業務や目的に応じてマップに表示されているフィーチャに対して、属性を追加・変更したり、新規フィーチャを追加したりするなど、可視化されているデータを編集することがあると思います。そんな時に使うのが Editor コンポーネントです。
＜実装コード例＞
<arcgis-print> タグに続けて <arcgis-editor> タグを記述します。見えにくさ解消のため、それぞれのタグに Expand コンポーネントを使用します。
また、編集用のフィーチャ レイヤーを追加するコードも記述します。
<arcgis-map basemap="topo-vector" center="139.74, 35.68" zoom="15">
<!-- ：Expand コンポーネントを使用 -->
<arcgis-expand expanded close-on-esc position="top-left" mode="floating">
<arcgis-print></arcgis-print>
</arcgis-expand>
<arcgis-expand expanded slot="bottom-left" mode="floating">
<!-- <arcgis-editor> タグを記述 -->
<arcgis-editor></arcgis-editor>
</arcgis-expand>
</arcgis-map>
<!-- 編集用のレイヤーを追加するコードを記述 -->
<script type="module">
const FeatureLayer = await $arcgis.import("@arcgis/core/layers/FeatureLayer");
const mapElement = document.querySelector("arcgis-map");
await mapElement.viewOnReady();
const demoLyr = new FeatureLayer({
portalItem: { // 本記事のデモ用のレイヤー
id: "bcbc7432216446cd9a38f6e48324544c"
},
});
mapElement.map.add(demoLyr);
</script>
- Editor コンポーネントの使い方
Editor コンポーネントでフィーチャを追加する場合は、追加するフィーチャの種類をウィンドウから選択して、マップ上の任意の場所をクリックすると、新しいフィーチャが追加されます。
フィーチャを編集する場合は、選択モードにしたのち、対象のフィーチャをマップで選択するとフィーチャに付随する属性の情報がウィンドウに表示されるため、データの更新や削除が可能です。
3．Directions コンポーネント
ここから、再び新たなコード ファイルを用意します。
複数地点間のルート検索およびナビゲーションに使用できるコンポーネントであるDirections コンポーネントをご紹介します。
なお、Directions コンポーネントの利用には、API キーが必要となりますのでご注意ください。
＜実装コード例＞
ルートのグラフィックが地図に表示されるようにするため、<arcgis-map> タグの basemap プロパティを削除し、背景色が透明なマップを読み込みます。
<!-- 背景色が透明なマップを読み込む -->
<arcgis-map item-id="45b3b2fb35e94ab09381d0caa0da5946"
center="139.74, 35.68" zoom="15">次に、<arcgis-map> タグ内に <arcgis-directions> タグを追記します。
<!-- <arcgis-directions> タグを記述 -->
<arcgis-directions
slot="top-right"
use-default-route-layer
></arcgis-directions>
移動手段の選択や、「ルートの編集」メニューからは障壁の設定なども可能です。
なお、ルート検索は 2 万リクエストまでは無料で使用できます。
4. Sketch コンポーネント
マップに点、線、面などのグラフィック要素を描画することが可能な Sketch コンポーネントは、新規にグラフィック要素を作成できるほか、既存のグラフィック要素を更新することも可能です。
＜実装コード例＞
<arcgis-directions> タグに続けて <arcgis-sketch> タグを記述します。
<!-- <arcgis-sketch> タグを記述 -->
<arcgis-sketch
slot="bottom-right"
creation-mode="update"
layout="horizontal"></arcgis-sketch>
まとめ
本記事では、リッチな UI を備えた GIS の機能を Web アプリに簡単に組み込むことができる、Web コンポーネントについてご紹介しました。
今回紹介したもののほかにも、ESRIジャパンの ArcGIS Maps SDK for JavaScript の機能紹介ページや Esri Developer のサイトに公開されている サンプル コードでも多くのコンポーネントが紹介されているので、ぜひご覧ください。
今回作成したアプリケーションは以下で動作を確認できます。
- 標準的なコンポーネント：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_sdk/component/standard_component.h...
- 機能的なコンポーネント 前半：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_sdk/component/functional_component...
- 機能的なコンポーネント 後半：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_sdk/component/functional_component... ※ API キーが必要
関連リンク
・ArcGIS Maps SDK for JavaScript ESRIジャパン Web サイト
・ArcGIS Maps SDK for JavaScript 米国Esri社 Web サイト
・ArcGIS Maps SDK for JavaScript - Components
