すぐに使える! オープンソースのスターターアプリ: Maps App developed by ArcGIS API for JavaScript 編

はじめに

米国 Esri 社より、これから ArcGIS を用いたアプリの開発に携わる人の学習用にオープンソースのスターターアプリが提供されています。

スターターアプリは、以下の5種類があります。

Data Collection
Dynamic Situational Awareness
Maps App
Nearby Places
Offline Mapbook

Data Collection については、2019年8月に開催した「ArcGIS 開発者のための最新アプリ開発塾 2019」で紹介しています。

今回は、この中から Maps App (JavaScript 版)の概要、Web マップの設定方法、機能の拡張を行ったので、その方法について紹介します。

※Maps App には JavaScript 版の他にも、iOS/Android/.NET 版も公開されています。

Maps App の機能や使い方の詳細に関しては、こちらのリポジトリをご覧ください。

このリポジトリは、米国 Esri 社の Maps App の Readme.md を ESRI ジャパンにて翻訳したものです。

アプリの概要

Maps App は、場所検索やルート案内などの私たちが日常よく使用する機能の他に、Web マップを設定することもできます。Web マップを設定した場合、特にソースコードやアプリの設定を変更しなくても ArcGIS Online で地図の作成や構成を変更するだけで Maps App に反映することができます。

Web マップの設定方法

Maps Appでは、デフォルトで米国 Esri 社が作成した Web マップが設定されていますが、今回は新規に Web マップを作成して設定しました。作成した Web マップは、国土交通省が国土数値情報ダウンロードサイトで提供されている日本国内の駅と路線のデータを表示しています。東京駅が初期表示されるように設定しています。

作成した Web マップは、ArcGIS Online で公開しています。

Web マップの設定は、ArcGIS Online から対象 Web マップの専用ページを開き、Web マップのURL（「https://ej.maps.arcgis.com/home/webmap/viewer.html?webmap=aa36839c84af463dbc4ef11c1b0e7ce2」）の webmap= に続く ID をコピーしてください。

識別子をコピーしたら、src/app/config.ts ファイルで id を設定します。

/**
 * WebMap id to use for this application.
 * You can update this WebMap id with your own.
 */
export const webMapItem = {
  portalItem: {
    // shared WebMap with Vector Tile basemap
    id: "aa36839c84af463dbc4ef11c1b0e7ce2"
  }
};

この設定を行い、アプリを起動することで、上記で作成した Web マップがアプリにも反映されます。

機能拡張の方法

Maps App は ArcGIS 開発ツールである ArcGIS API for JavaScript を使用して開発されています。地図機能を拡張するには ArcGIS API for JavaScript を使います。ArcGIS API for JavaScript にはアプリに搭載されている機能の他に多くの機能が用意されています。今回はそのなかでも、印刷の機能の追加方法について紹介します。

印刷機能の詳細については、「続編はじめてのWeb マッピングアプリケーション開発 : 印刷ウィジェット編」をご参照ください。

機能追加は、src/Application.ts ファイルに実装してきます。

Application.ts は、アプリの起動時や更新時に呼び出されるファイルで、このファイルで定義した機能を利用できます。

① はじめに印刷機能をウィジェットで提供する Print クラスを import します。

src/Application.ts

… 略
import Home from "esri/widgets/Home";
import Locate from "esri/widgets/Locate";
import Print from "esri/widgets/Print";  ←追加 …➀
… 略

➁ インポートした機能を実行するインスタンスを定義します。

… 略
    const basemapExpand = new Expand({
      view,
      content: basemapGallery,
      expandIconClass: "esri-icon-basemap",
      group: "right"
    });
// ここから
    const print = new Print({
      view,
      // specify your own print service
      printServiceUrl:
        "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
    });
// ここまでを追加　…➁
    expandWidgets.addMany([directionsExpand, basemapExpand]);
… 略

ここで設定したパラメータとして、Print クラスの view プロパティに view インスタンスを設定します。printServiceUrl プロパティには ArcGIS Online が提供する印刷サービスを指定します。このプロパティに ArcGIS Enterprise がホストする印刷サービスを指定することで、ユーザーが独自にカスタマイズしたレイアウトを使用することもできます。

➂ 印刷ウィジェットを画面に配置するために、widgets の配列にウィジェットの要素を設定します。要素として、component には print インスタンス、position には “top-right” を設定します。”top-right” を設定することで、画面右上にウィジェットを配置することができます。同一の position が定義されている場合は、配列に追加された順番に表示されます。

… 略
    // Create array of widgets with positions to add to MapView
    const widgets = [
… 略
      {
        component: basemapExpand,
        position: "top-right"
      },
// ここから
      {
        component: print,
        position: "top-right"
      },
// ここまでを追加 …➂
…略

追加するウィジェットのレイアウトを整えるために src/styles/main.scss を修正します。

main.scss では、各ウィジェットの CSS を有効にするかの設定しており、デフォルトでは false と無効にする設定になっています。

④ 印刷ウィジェットの CSS を有効にするために、設定を false から true に変更します。

src/styles/main.scss

$include_Print: false!default;
↓下記に変更 …➃
$include_Print: true!default;

※左が CSS の設定が false 時、右が CSS の設定が true 時

・Expand クラスによる展開式ウィジェットの設定

他の機能同様に展開式のウィジェットにしたい場合は、Expand クラスの機能を用います。

Expandクラスを用いるとボタンをクリックすることでウィジェットを開閉することができるようになります。

展開式のウィジェットにするために先ほどの手順を以下に変更します。

➁で作成した印刷ウィジェットの print インスタンスを Expand クラスの content プロパティに定義します。

src/Application.ts

…略
// ここから
    const print = new Print({
      view,
      // specify your own print service
      printServiceUrl:
        "https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"
    });

// 展開式ウィジェットとするために追加
    const pirntExpand = new Expand({
      view,
      content: print,
      expandIconClass: "esri-icon-printer",
      group: "right"
    });
// 展開式ウィジェットとするために追加
// ここまでを追加　…➁

印刷ウィジェットで定義した Expand クラスのインスタンスをウィジェット用のコレクションに追加します。

…略
   expandWidgets.addMany([directionsExpand, basemapExpand]);
   ↓ 下記のように追加する。
   expandWidgets.addMany([directionsExpand, basemapExpand, pirntExpand]);
…略

➂で設定した印刷ウィジェットの代わりに印刷ウィジェットを定義した Expand クラスのインスタンスを設定します。

      {
        component: print,
　　　　　　↓ 印刷ウィジェットのインスタンスを Expand クラスのインスタンスに変更する。
        component: pirntExpand,
        position: "top-right"
      },

今回修正した実際のコードはこちらをご参照ください。

・src/Application.ts

・src/styles/main.scss

今回追加した印刷機能以外にもたくさんの機能が ArcGIS API for JavaScript では提供されております。機能に関してはサンプルをご参照ください。

躓いた点

今回、Maps App を使用する際に躓いた点があったためご紹介します。

このアプリは ArcGIS API for JavaScript のバージョンが4.11となっており、それ以降の更新がされていません。そのため、package.json 上の定義が、4.11がリリースされた2019年の情報となっています。その関係上、node-sass というライブラリがnode.js のバージョンによってはサポート対象外となっており、正常に node-sass がインストールできませんでした。

このアプリを利用する前に、ご利用の node.js のバージョンを確認して、node-sass のバージョンをサポートされる範囲内に設定してください。 node-sass のサポート範囲はこちらでご確認ください。私の場合は、node.js のバージョンは 14.15.4 を使用していたので、node-sass は、バージョン 4.14.0を使用しました。

node.js のバージョンは下記で確認できます。

最後に

今回は米国 Esri 社が提供しているオープンソースのスターターアプリの中から、ArcGIS API for JavaScript で構築された Maps App というアプリのご紹介をしました。これから ArcGIS を使ったアプリの開発を始める方や、新しくアプリを作る際の参考などにしていただけたらと思います。初めに紹介しましたが、Maps App の他にもスターターアプリが公開されていますので、ご興味がある方は「Open source starter apps」をご参照ください。