はじめて地図アプリ開発を行う開発者の方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れをシリーズで紹介していきます。
ArcGIS API for JavaScript は、Web ブラウザーから GIS 機能を利用するための API です。
簡単な地図を既存の Web ページに組み込んだり、地図上にさまざまな表現方法を用いて位置情報を可視化したり、検索や解析などの豊富な GIS 機能を実装したりするなど、Web マッピングアプリケーション開発をサポートします。
このシリーズ記事では、ArcGIS API for JavaScript を使用して、Web マッピングアプリケーション開発の流れをご紹介していきます。
第 1 回目となる今回は、地図を表示するところまでをご紹介します。
まず、地図を表示する Web ページの HTML を作成して、以下を入力します。
Web アプリ開発の実行環境をお持ちでない方は、JSBin を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。
JSBin を開くと左側に HTML、右側に実行結果が表示されるので、あらかじめ入力されている 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> </head> </html>
<head> タグ内に以下のコードを追加し、API を参照します。
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css"> <script src="https://js.arcgis.com/4.6/"></script>
※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。
<link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.22/"></script>
<link> タグは、ウィジェットやコンポーネントといった UI を定義するスタイルが含まれるスタイルシートを参照します。
<script> タグは、CDN から API を読み込みます。
続いて、API からアプリで使用するモジュールを読み込みます。今回、読み込むのは以下のモジュールです。
<head> タグ内に <script> タグを追加し、読み込むモジュールを設定します。
<script> require([ "esri/Map", "esri/views/MapView", "dojo/domReady!" ], function(Map, MapView) { // 地図作成のコード }); </script>
※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。
<script>
require([
"esri/Map",
"esri/views/MapView"
],(Map, MapView) => {
// 地図作成のコード
});
</script>
※ API は Dojo をベースにしており(※2021年12月追記:ArcGIS API for JavaScript の近代化の取り組みの中で、バージョン 4.16 以降、Dojo に依存しなくなりました)、Dojo が取り入れているモジュール システムを活用したアプリ開発を実現しています。モジュール システムの詳細は以下の記事をご参照ください。
esri/Map モジュールから読み込まれた Map クラスを参照する Map を使用して、新しいマップを作成します。マップには、地図の背景に表示するベースマップを定義する basemap などのプロパティを設定できます。
require([ "esri/Map", "esri/views/MapView", "dojo/domReady!" ], function(Map, MapView) { var map = new Map({ basemap: "streets" }); });
※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。
require([
"esri/Map",
"esri/views/MapView"
], (Map, MapView) => {
const map = new Map({
basemap: "streets"
});
});
ベースマップには、streets(道路地図)のほかに、satellite(衛星画像)、hybrid(ラベル付き衛星画像)、topo(地形図)、gray(キャンバス(ライト グレー))、dark-gray(キャンバス(ダーク グレー))などのいくつかの種類があり、地図の用途に合わせて最適なベースマップを選択します。※2021年12月追記:ArcGISブログ 廃止されるベクター ベースマップとラスター ベースマップのお知らせ でお知らせしたように、ラスターベースマップのいくつかは2021年で更新が停止される予定ですが、それの代替となる、streets-vector(道路地図)、topo-vector(地形図)、gray-vector(キャンバス(ライトグレー))、dark-gray-vector(キャンバス(ダーク グレー))などの、ベクターベースマップが用意されています。その他にも、利用可能なベースマップの詳細は、Map のbasemap プロパティをご参照ください。
View は、HTML ページ内でマップを表示する DOM ノードを参照し、マップを描画します。
MapView を作成して、プロパティを設定してみましょう。
require([ "esri/Map", "esri/views/MapView", "dojo/domReady!" ], function(Map, MapView) { var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", // View を表示する DOM ノードを参照 map: map // ステップ 3 で作成した map オブジェクトを参照 }); });
※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。
require([
"esri/Map",
"esri/views/MapView"
], (Map, MapView) => {
const map = new Map({
basemap: "streets"
});
const view = new MapView({
container: "viewDiv", // View を表示する DOM ノードを参照
map: map // ステップ 3 で作成した map オブジェクトを参照
});
});
上記のコードでは、container プロパティにマップを表示する DOM ノードの名前を設定しています(DOM ノードはステップ 5 で定義します)。map プロパティは、ステップ 3 で作成した map オブジェクトを参照します。
MapView には、このほかにも、View の表示範囲を設定する center(描画するマップの中心地点)や zoom(描画するマップのズームレベル)などのプロパティも含まれます。
これで Map と View の作成は完了です。次のステップは、地図を表示する HTML 要素の追加です。
<body> タグを作り、View を表示する <div> 要素を入れます。
<body> <div id="viewDiv"></div> </body>
<div> は、ステップ 4 で作成した MapView の container プロパティへ渡した id とマッチする “viewDiv” という id を持っています。マップは、この DOM ノードに描画されます。
<head> タグ内に <style> タグを使い HTML 要素のスタイルを定義します。
ブラウザー ウィンドウいっぱいにマップを表示させるため、以下の CSS を <style> に追加します。
<style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style>
これで、地図の作成は完了です。作成した地図を表示させてみましょう。
JSBin を使用している場合は、[Run with JS] ボタンをクリックすると、実行結果が右側に表示されます。
今回作成したサンプルは Esriジャパンの GitHub に公開しています(※2021年12月追記:”ファイル名.html” が2018年時のサンプル、”ファイル名_2021.html” が2021年に書き換えしたサンプルです)。
マップを描画する View には、2D で描画する MapView のほかに 3D で描画する SceneView が用意されており、View を切り替えることで、2D 地図と 3D 地図を簡単に変更できます。
API からマップを 3D で描画する esri/views/SceneView モジュールを読み込み、3D 地図を作成してみましょう 。
ここまでのステップで作成したサンプルを使い、読み込むモジュールを esri/views/MapView から esri/views/SceneView に変更してみてください。
変更前
require([ // モジュールの読み込み "esri/views/MapView", ], function(/*...*/) { // 地図作成のコード });
変更後
require([ // モジュールの読み込み "esri/views/SceneView", ], function(/*...*/) { // 地図作成のコード });
※2021年12月追記:2021年12月以降に試す場合は以下のコードです。
require([
// モジュールの読み込み
"esri/views/SceneView",
], (/*...*/) => {
// 地図作成のコード
});
View を変更することで、簡単に 3D 地図を作成できます。
さらに、同じ Map を 2D(MapView)、3D(SceneView)で描画する、ということも可能です。
このように、API では、6つのステップで簡単に地図を作成できます。さらに描画方法を切り替えることで、Map を 2D で描画するか、3D で描画するか、変更可能です。
今回作成したサンプルは以下で動作を確認できます。
※ 2021年12月追記:2021年12月以降は、以下で動作を確認できます。
次回は、作成した地図に位置情報を表示する方法をご紹介します。