地図アプリ開発講座で紹介したアプリケーション テンプレートの使い方

Document created by yusuke_nunokawaesrij-esridist Employee on Jul 7, 2015Last modified by yusuke_nunokawaesrij-esridist Employee on Jul 16, 2015
Version 9Show Document
  • View in full screen mode

「ここまでできる!地図アプリ開発講座」を開催しましたにて地図アプリ開発講座で紹介した ArcGIS API for JavaScript アプリケーション テンプレート(EsriJapan/webmap-startup-template-js · GitHub )のサンプルをご案内しました。

このアプリは URL の末尾に Web マップの ID を追加するだけで、ID に対応した Web マップを表示・利用することができます。

Web マップの詳細については『ここまでできる!地図アプリ開発講座』の資料をご参照ください。

 

top.png

 

以下の流れに従って、異なるマップをアプリに表示してみましょう。

 

  1. EsriJapan/webmap-startup-template-js · GitHubにアクセス
  2. デモ URL のリンクをクリックしてアプリを起動
  3. デフォルトでは杉並区周辺の物件マップが表示されます
  4. 異なる Web マップ(ポートランド サイクル マップ)を別タブで起動します
  5. URL の末尾にある「?webmap=***」をアプリの URL の末尾にコピー&ペーストしてリフレッシュしてください
  6. アプリが参照するマップがポートランド サイクル マップに変わります

 

上記の方法でのマップ参照は ArcGIS API for JavaScript の createMap メソッドを使って実現しています。

このメソッドの引数にマップ ID を与えるだけで、ID に対応した Web マップを参照することができます。

 

var mapDeferred = esriUtils.createMap(webmapid, "mapDiv"});

 

クラウド(ArcGIS Online)側の設定だけで地図データの表現や各種設定がアプリ側に反映されますので、レイヤー追加やシンボル定義、属性表示 UI などの実装は不要になります。

webmap-startup-template のソースコードでの実装部分はこちら(154~162 行目)です。

 

実際にマップを作成してアプリに組み込んでみたいという方は ArcGIS for Developers で開発者アカウントを作成すれば、すぐにマップ作成を始めることができます。開発目的であれば無償でさまざまな開発キット/リソースを利用することができますので、まずはアカウント作成から始めてみてください。

 

また、ArcGIS Online 上で公開されているマップであれば同じようにマップ ID から参照することができますので、ぜひ他のマップでもお試しください

Attachments

    Outcomes