本記事では、Monaca クラウドと ArcGIS API for JavaScript を使用してモバイル地図アプリ開発を始めるための簡単なステップを紹介します。
はじめに
Monaca はアシアル社が提供する Cordova を内包したハイブリッド アプリ統合開発環境で、HTML/CSS/JavaScript ファイルにコードを書いて、Android や iOS のネイティブ アプリを開発していきます。特に Monaca クラウドは Web ブラウザー上での開発やアプリの動作確認が可能なため、すぐに開発をスタートできて便利です。
ArcGIS API for JavaScript は Web ブラウザー ベースの地図アプリを開発するための API で、地図の表示に加え、検索、編集、分析といった地図機能を容易にアプリに組み込むことができます。
1. Monaca アカウントの作成
Monaca アカウント(無償)を作成します。アカウントには無償と有償のプランがありますが、本記事のステップは無償プランで試すことができます。
Monaca アカウントの作成:https://monaca.mobi/ja/register/start
2. Monaca クラウドにサインイン
プロジェクトの管理やコーディングは、Monaca クラウドの Web サイトで提供される IDE で行えます。作成したアカウントで Monaca クラウドにログインします。
Monaca クラウド:https://monaca.mobi/ja/dashboard
3. Monaca プロジェクトの作成

- サイト上で「新規プロジェクトの作成」をクリックします。
- 新規プロジェクトの作成画面で、プロジェクトで使用するテンプレートを選択します。今回行うステップでは Onsen UI のコンポーネントを使用するため [Onsen UI] → [Onsen UI V2 JS Minimun] を選択し、「作成」をクリックします(地図を表示するだけであれば他のテンプレートでも構いません)。Onsen UI はモバイル アプリの開発に特化した UI コンポーネント群を提供する OSS です。
- プロジェクト名を入力し「プロジェクトを作成する」をクリックすると、プロジェクト テンプレートが作成されます。
- 左側のパネルに作成されたプロジェクト名が表示されます。「開く」をクリックすると、プロジェクトが開きます。
- 左側のプロジェクト ツリーの「新規ファイル」アイコン(赤枠)をクリックし、地図表示の処理を実装する app.js ファイルを追加します。
4. ArcGIS API for JavaScript を使用した地図機能の実装
プロジェクトのコードを更新して、ArcGIS API for JavaScript で地図画面を実装していきます。
ArcGIS API for JavaScript の参照
index.html の <head> タグ内部で、<script> タグと <link> タグを追加して、ArcGIS API for JavaScript を参照します。
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.4%2Fesri%2Fcss%2Fmain.css" target="_blank">https://js.arcgis.com/4.4/esri/css/main.css</A><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.4%2F" target="_blank">https://js.arcgis.com/4.4/</A><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN></SPAN>
<script> タグは、ArcGIS API for JavaScript を CDN からロードします。数字の部分は API のバージョン番号です。
<link> タグは、ArcGIS API for JavaScript で提供されるコンポーネントのスタイルを含むスタイル シートを参照します。
前のステップで作成した app.js ファイルも併せて参照します。
<SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/javascript<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>app.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN></SPAN>
モジュールのロード
app.js ファイルで ArcGIS API for JavaScript から固有のモジュールをロードします。
次のコードを使用して、モジュールをロードします。
<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
<SPAN class="string token">"esri/WebMap"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/domReady!"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>WebMap<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">// この後のステップで、マップとビューを作成するコードをここに追加していきます</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
モジュールの説明
マップの作成
WebMap インスタンスを作成し、Web マップのアイテム ID を portalItem プロパティに設定します。Web マップとは、背景地図や主題となる地図データを追加し、表示方法などを設定してクラウド上に JSON 形式で保存される Web 上の地図です。Web マップは専用のツールを使用して作成できます。クラウド上に保存された Web マップを使えば、地図上に何をどのように表示するかを一つ一つコーディングする必要がなく、非常にローコストで地図アプリを作成することができます。このステップでは、事前に作成済のむろらんオープンデータライブラリで公開されている室蘭市の避難場所のデータを追加したサンプルの Web マップを使用します。
Web マップでは避難場所の収容人数をシンボルのサイズ(サイズが大きいほど収容人数が多い)で、避難場所の施設の種類をシンボルの色(屋内施設は赤、屋外施設は青)で表現しています。
<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
<SPAN class="string token">"esri/WebMap"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/domReady!"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>WebMap<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"33b1033fe2d5415482f8d72d939978ec"</SPAN> <SPAN class="comment token">// Web マップのアイテム ID を指定</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
ビューの作成
ビューは HTML 内のコンテナとして提供されるノードを参照し、HTML ページ内にマップを表示します。MapView コンストラクタにオブジェクトを渡してプロパティを設定し、MapView を作成します。
<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
<SPAN class="string token">"esri/WebMap"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/domReady!"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>WebMap<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">WebMap</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
portalItem<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"33b1033fe2d5415482f8d72d939978ec"</SPAN> <SPAN class="comment token">// Web マップのアイテム ID を指定</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// ビューを表示する DOM ノードへの参照</SPAN>
map<SPAN class="punctuation token">:</SPAN> map <SPAN class="comment token">// 「マップの作成」のステップで作成した WebMap オブジェクト</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
container プロパティはマップを表示する DOM ノードの名前を設定します。map プロパティは、「マップの作成」のステップで作成した WebMap オブジェクトを参照します。
ページ コンテンツの定義
次にマップを表示するための HTML を追加します。index.html の <body> タグに「ビューの作成」ステップで作成したビューを表示する <div> 要素を追加します。
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewDiv<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>body</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
<div> の ID は MapView の container プロパティに設定した ID と同じにします。
ページ スタイルの設定
ページのコンテンツのスタイルを設定します。マップを Web ブラウザーに表示させるために、css/style.css に以下の CSS を追加します。
<SPAN class="selector token">#viewDiv</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
<SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
ArcGIS API for JavaScript を使用した地図機能の実装は以上で終了です。Monaca クラウドのサイトの上部タブで「保存」をクリックし、作業内容を保存します。

モバイル端末でアプリを確認
作成したアプリは Monaca クラウドのプレビュー画面でも確認できますが、Monaca デバッガーと呼ばれる Android/iOS アプリを使って、実機のモバイル端末でも確認することができます。Android/iOS 端末に Monaca デバッガーをインストールします。
Monaca デバッガー(Android):https://play.google.com/store/apps/details?id=mobi.monaca.debugger
Monaca デバッガー(iOS):https://itunes.apple.com/jp/app/monaca/id550941371?mt=8
インストールしたアプリを起動し、Monaca アカウントでログインすると作成したプロジェクト名が表示されます。プロジェクトをタップすると、Monaca デバッガー上で作成したアプリが開きます。地図上で避難場所のシンボルをタップすると、避難場所に関連する情報を確認することもできます。

おまけですが、Onsen UI の segment コンポーネントを使って、背景地図を切り替える機能を追加してみます。index.html の <body> タグを以下のように更新します。
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>ons-page</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>ons-toolbar</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">class</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>center<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>ons-segment</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>segment<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 220px</SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>button</SPAN><SPAN class="punctuation token">></SPAN></SPAN>道路地図<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>button</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>button</SPAN><SPAN class="punctuation token">></SPAN></SPAN>衛星画像<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>button</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>button</SPAN><SPAN class="punctuation token">></SPAN></SPAN>OSM<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>button</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>ons-segment</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>ons-toolbar</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">id</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>viewDiv<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>ons-page</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
app.js に以下のコードを追加します。WebMap のベースマップに設定できるオプションは、その他にも topo(地形図)、oceans(海洋図)等が用意されています。詳細は WebMap クラスのリファレンスをご覧ください。
ons<SPAN class="punctuation token">.</SPAN><SPAN class="token function">ready</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addEventListener</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'postchange'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>index <SPAN class="operator token">===</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
map<SPAN class="punctuation token">.</SPAN>basemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">"streets"</SPAN> <SPAN class="comment token">// 背景地図を道路地図に変更</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>index <SPAN class="operator token">===</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
map<SPAN class="punctuation token">.</SPAN>basemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">"satellite"</SPAN> <SPAN class="comment token">// 背景地図を衛星画像に変更</SPAN>
<SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
map<SPAN class="punctuation token">.</SPAN>basemap <SPAN class="operator token">=</SPAN> <SPAN class="string token">"osm"</SPAN> <SPAN class="comment token">// 背景地図をオープンストリートマップに変更</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Monaca クラウドでプロジェクトを修正すると、Monaca デバッガーにも即座に更新内容が反映されます。Monaca デバッガーでアプリを開き、背景地図を切り替えてみてください。

完成版のコードはこちらで確認できます。
Monaca クラウドと ArcGIS API for JavaScript を使用したモバイル地図アプリ開発のステップの紹介は以上です。
本記事では事前に作成済みのマップ(Web マップ)を表示しましたが、ArcGIS for Developers の無償の開発者アカウントを作成すると専用のツールを使用してオリジナルのマップを作成することができます。また、ArcGIS API for JavaScript には単純な地図表示だけでなく様々な機能が用意されています。ArcGIS を使用した地図アプリの開発にご興味がある方は、ArcGIS for Developers 開発リソース集をご覧ください。
※ ArcGIS API for JavaScript を Monaca 及び Cordova 上で使用した際に発生する固有の問題に関しては ESRIジャパンの技術サポート サービスの対象外となります。ArcGIS API for JavaScript のコンポーネントを使用する場合は、事前に検証頂くことをお勧めしております。予めご了承ください。
関連リンク