Google Maps JavaScript API から ArcGIS API for JavaScript への移行

1 Kudo

※ この記事は、米国 Esri 社のブログ記事「Migrating from Google Maps JavaScript API to ArcGIS API for JavaScript」を翻訳したものです。

先日 Google が発表した価格と請求に関する変更により、Web アプリに表示している地図のコストが増加していませんか？この価格の更新は、Google Maps API を使用している多くの開発者がほかの Web マッピングサービスへの移行を検討し、ArcGIS を選択するきっかけになっています。それにはいくつかの理由があります。

ひとつめに、ArcGIS API for JavaScript は、2D および 3D でのデータ探索や可視化のための強力な開発ツール、魅力的な UX を作成するためのウィジェット、そして最新の Web 技術を活用したインタラクティブなアプリ開発のためのクライアントサイド処理により、洗練された Web マッピング API として位置付けられています。

ふたつめに、Esri の ArcGIS 開発者向けプログラムでは、開発者は以下に挙げるような多くのことを無償で行えます。

Esri が提供する Web、ネイティブ、そしてモバイルプラットフォーム向けのすべての API および SDK の利用
1 ヶ月あたり 100 万トランザクションまでのベースマップおよびジオサーチの利用
ルート検索などのプレミアムサービスのためのサービスクレジット（1 ヶ月あたり 50 クレジットまで）利用
非商用のアプリを、アプリ数もユーザー数も無制限で公開
ArcGIS Online にホストされている幅広いリッチなコンテンツおよびサービスへのアクセス
ベースマップのスタイリングおよびマップコンテンツの管理
ジオグラフィックコンテンツのホスティング、クエリおよび解析の実行

Google Maps JavaScript API から ArcGIS API for JavaScript への移行の準備はできましたか？ここでは、いくつかの基本的なコンセプトの概要を見てみましょう。

ArcGIS API for JavaScript による開発

ArcGIS の開発者向けプログラムへサインアップして、コストをかけずに始めてみましょう。開発者向けプログラムでは、前項でリストアップした以上のことが可能です（詳細は開発者向けプログラムの Web サイトを参照ください）。

Google Maps JavaScript API を読み込むには、以下のように Google API キーを含めた API を参照します。

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

一方、ArcGIS API for JavaScript に API キーは必要ありません。API とスタイルシートの参照だけで利用できます。

<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

マップの表示

以下は Google を使用した場合のマップの作成方法です。

const map = new google.maps.Map(document.getElementById('mapDiv'), {
 mapTypeId: 'roadmap',
 center: { lat: 35.6779, lng: 139.7719},
 zoom: 12
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ArcGIS ではどうなのか見てみましょう。ArcGIS では、マップは Map と View を使用して作成します。View は 2D または 3D（またはその両方）でのデータの可視化からマップデータの分離を可能にします。

require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {
 const map = new Map({
 basemap: "streets-navigation-vector"
 });

 const view = new MapView({
 container: "viewDiv",
 map: map,
 zoom: 12,
 center: {
 latitude: 32.7353,
 longitude: -117.1490
 }
 });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

上記のコードは、Esri のナビゲーションベースマップを背景にしたマップを作成します。衛星画像や地形図、キャンバス（ダークグレイ）などの ArcGIS Online が提供するベースマップから用途に合ったベースマップを選択することもできます。

マーカーの追加

Google でマーカーは以下のように追加します。

const marker = new google.maps.Marker({
 position: { lat: 32.7353, lng: -117.1490 },
 title: "San Diego Zoo",
 map: map
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ArcGIS では、マーカーを追加するためには、View のグラフィックコレクションへ新しいグラフィックを追加します。

view.graphics.add({
 symbol: {
 type: "simple-marker",
 color: "cyan"
 },
 geometry: {
 type: "point",
 longitude: -117.1490,
 latitude: 32.7353
 }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

上記のコードは、シアン色の円形のシンプルなマーカーシンボルを作成しますが、マーカーをシンボルで表現する方法はほかにもあります。例えば、Esri Icon Font からシンボルを選択することもできます。以下はマップピンアイコンを使用した例です。

view.graphics.add({
 symbol: {
 type: "text",
 color: "#7A003C",
 text: "\ue61d", // esri-icon-map-pin
 font: {
 size: 30,
 family: "CalciteWebCoreIcons"
 }
 },
 geometry: {
 type: "point",
 longitude: -117.1490,
 latitude: 32.7353
 }
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ArcGIS では、シンボルを選択するためのより動的なオプションは、データの属性情報を使用して、シンボルの色や大きさ、不透明度を定義することです。地震データの GeoJSON からグラフィックを作成し、マグニチュードに比例した大きさのシンボルを動的に各グラフィックのシンボルへ設定しているサンプルを見てみてください。

ポップアップの使用

Google の情報ウィンドウ（InfoWindow）はポップアップウィンドウにコンテンツを表示するために使用され、以下の方法でマーカーに追加されます。

const map = new google.maps.Map(document.getElementById("mapDiv"), {
 mapTypeId: "roadmap",
 center: {
 lat: 32.7353,
 lng: -117.1490
 },
 zoom: 14
});

const marker = new google.maps.Marker({
 position: {
 lat: 32.7353,
 lng: -117.1490
 },
 title: "San Diego Zoo",
 map: map
});

const contentString = "<h1>San Diego Zoo</h1>" +
 "The <a href='http://zoo.sandiegozoo.org/'>San Diego Zoo</a> " +
 " in Balboa Park houses over 3,700 animals.<p><p>" +
 "<img src='https://visitoceanside.org/wp-content/uploads/2013/01/SanDiegoZoo.jpg' alt='San Diego Zoo' height='150'>";

const infowindow = new google.maps.InfoWindow({
 content: contentString
});

marker.addListener('click', function() {
 infowindow.open(map, marker);
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ArcGIS では、ポップアップテンプレートを作成することでポップアップを作成できます。テンプレートはポップアップのコンテンツを定義します。以下は Map と View を作成し、ピンアイコンのマーカーを表示して、ポップアップを追加したすべてのコードです。

require([ "esri/Map", "esri/views/MapView" ], function(
 Map, MapView
) {
 const map = new Map({
 basemap: "streets-navigation-vector"
 });

 const view = new MapView({
 container: "viewDiv",
 map: map,
 zoom: 12,
 center: {
 latitude: 32.7353,
 longitude: -117.1490
 }
 });

 const contentString = "The <a href='http://zoo.sandiegozoo.org/'>San Diego Zoo</a> " +
 " in Balboa Park houses over 3,700 animals." +
 "<p><p><img src='https://visitoceanside.org/wp-content/uploads/2013/01/SanDiegoZoo.jpg' alt='San Diego Zoo' height='150'>";

 view.graphics.add({
 symbol: {
 type: "text",
 color: "#7A003C",
 text: "\ue61d", // esri-icon-map-pin
 font: {
 size: 30,
 family: "CalciteWebCoreIcons"
 }
 },
 geometry: {
 type: "point",
 longitude: -117.1490,
 latitude: 32.7353
 },
 popupTemplate: {
 title: "San Diego Zoo",
 content: contentString
 }
 });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

完成したアプリは codepen で確認できます。

最後に、同じアプリを 3D で作成してみましょう。"MapView" を "SceneView" へ変更するだけで簡単に 3D アプリを作成できます。コードはここから確認できます。

次のステップと関連リソース

今後は、以下のワークフローに沿ったチュートリアルを紹介する予定です。ご期待ください。

検索とジオコーディング
ルートの検索と表示
シェイプの追加

ArcGIS API for JavaScript の学習と効率的なアプリ開発のためのさまざまなリソースが提供されています。

コードを試せるサンドボックスでさまざまなサンプルを探索可能
API を使用した開発についての主要なトピックにフォーカスした有用なガイド
検索可能な API リファレンス
API を使用した開発を学べるチュートリアルを提供する dev lab

※ 今後のステップについては、米国 Esri 社のブログで紹介され次第、順次翻訳してお届けする予定です。

Google Maps JavaScript API から ArcGIS API for JavaScript への移行