Calcite Design System を使用した地図アプリの作成

【Esri Community】

Calcite Design System は2021年4月にベータ版として提供が開始された Web ページデザイン用のコンポーネント群のことです。（2022年10月時点もベータ版です。）Web アプリを作成する際に、ページデザインの構成や、複数のページで構成する Web アプリで、統一感を持たせるデザイン設計のための強力な手助けをする機能となります。詳しくは「Web デザインを強力に助けてくれる Calcite Design System のご紹介」をご覧ください。

今回は、Calcite Components と ArcGIS API for JavaScript を使用して、簡単な地図アプリケーションの UI を作成する方法について説明します。

Calcite Components は、統一された Web エクスペリエンスを構築するための米国 Esri 社から提供されている Web コンポーネントです。

本記事ではチュートリアルの Create a mapping app のサンプルの解説を翻訳して紹介します。

学歴と世帯数

Calcite Components を使用して、マッピングアプリケーションのユーザーエクスペリエンスを向上させ、インタラクションを促進することができます。このチュートリアルでは、ユーザーインターフェースに焦点を当て、ArcGIS API for JavaScript に関するある程度の知識があることを想定しています。ArcGIS JavaScript API を初めて使用する場合は、このアプリケーションで使用されるマッピングの概念について説明したチュートリアルがあります。

作成にあたって必要なもの

ArcGIS 開発者アカウント

このチュートリアルで使用するサービスにアクセスするには、無料の ArcGIS 開発者アカウントまたは ArcGIS Online 組織に関連付けられたアカウントが必要です。

ステップ

新しいペンの作成

CodePen にアクセスし、マッピングアプリケーション用の新しいペンを作成します。

HTML の追加

1. CodePen > HTML で、HTML と CSS を追加して、地図を表示する viewDiv 要素を持つページを作成します。この CSS は、地図がブラウザのウィンドウの幅と高さいっぱいに表示されることを保証します。

※CodePen では、<!DOCTYPE html> タグは必要ありません。別のエディターを使用している場合、またはローカルサーバーでページを実行している場合は、必ずこのタグを HTML ページの先頭に追加してください。

<html>

<head>

<title>Calcite Components: Create a mapping app</title>

</head>

<style>

html,

body,

#viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

</style>

<body>

</body>

</script>

</html>

2.<head> 要素に、Calcite Components と ArcGIS JavaScript API への参照を追加します。

<head>

<title>Calcite Components: Create a mapping app</title>

</head>

<style>

モジュールのインポート

3. <script> 要素で、このアプリケーションで使用する ArcGIS JavaScript API モジュールをインポートします。

require([

“esri/WebMap”,

“esri/views/MapView”,

“esri/widgets/Bookmarks”,

“esri/widgets/BasemapGallery”,

“esri/widgets/LayerList”,

“esri/widgets/Legend”,

“esri/widgets/Print”

], function(WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print) {

});

API キーの使用

開発者アカウントを使用している場合、ArcGIS サービスにアクセスするために API キーが必要です。ArcGIS Online の組織に関連付けられたアカウントを持っている場合は、この手順を省略できます。

開発者用ダッシュボードで、API キーを取得します。
CodePen > <script> に戻り、esriConfig クラスをインポートします。
apiKey プロパティを設定します。

“esri/widgets/Print”,

“esri/config”

], function (WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print, esriConfig ) {

esriConfig.apiKey = “YOUR_API_KEY”;

地図の表示

このアプリケーションでは、地図が中心となっています。上記の CSS を追加したことで、地図がウィンドウの幅と高さいっぱいに表示されるようになりました。また、マップと相互作用する ArcGIS JavaScript API ウィジェットを追加します。ウィジェットは Calcite Components によって整理され、ユーザーインターフェースをすっきりさせることができます。

webMap の URL 検索パラメータで指定された id を使用して WebMap を初期化します。Web マップの id が提供されない場合、コードで指定されたフォールバック id が使用されます。

const webmapId = new URLSearchParams(window.location.search).get(“webmap”)

?? “cc3bd744b9a44feaa493dd867a1d48dd”;

const map = new WebMap({

portalItem: {

id: webmapId

}

});

2. MapView を初期化し、ビューの左側に padding を追加して、後で追加する Calcite Components のためのスペースを確保します。

3. 次に、ArcGIS JavaScript API ウィジェットを初期化し、後続のステップで作成するコンテナに配置します。

const view = new MapView({

map,

container: “viewDiv”,

padding: {

left: 49

}

});

view.ui.move(“zoom”, “bottom-right”);

const basemaps = new BasemapGallery({

view,

container: “basemaps-container”

});

const bookmarks = new Bookmarks({

view,

container: “bookmarks-container”

});

const layerList = new LayerList({

view,

selectionEnabled: true,

container: “layers-container”

});

const legend = new Legend({

view,

container: “legend-container”

});

const print = new Print({

view,

container: “print-container”

});

このとき、アプリケーションには地図が表示されます。ただし、初期化したウィジェットは、まだ作成されていない HTML コンテナに配置されるため、表示されません。

レイアウトの作成

レイアウトの作成には、スロットを使って、ページ上の他のコンポーネントを整理するcalcite-shell を使用します。スロットはウェブコンポーネントの概念であり、FAQ に簡単な説明があります。コンポーネントのスロットの一覧は、そのコンポーネントのリファレンスページで見ることができます。例えば、シェルのスロットはこちらになります。

1. calcite-shell コンポーネントを追加します。

・ユーザーがシェルの裏でマップを操作できるように、content-behind 属性を設定します。

2.calcite-shell-panel コンポーネントを追加し、シェルの primary-panel スロットに配置します。

・detached 属性を設定し、シェルパネルのコンテンツが地図の上に重なって見えるようにします。

<calcite-shell content-behind>

<calcite-shell-panel slot=”primary-panel” detached>

</calcite-shell-panel>

</calcite-shell>

3. h2 要素を追加し、シェルの header スロットに配置します。ヘッダーには、Web マップのタイトルが動的に入力されます。

<calcite-shell content-behind>

<!– Dynamically populated –>

</h2>

<calcite-shell-panel slot=”primary-panel” detached>

</calcite-shell-panel>

アクションとパネルコンポーネントの追加

次に、ウィジェットにアクセスするためのコンポーネントを追加します。calcite-panel コンポーネントは、ウィジェットのコンテナを持つことになります。パネルは非表示でスタートし、ユーザーは対応する calcite-action コンポーネントを使用して表示することができます。

1.calcite-action-bar コンポーネントを追加し、シェルパネルの action-bar スロットに配置します。

2.クリックしてパネルを開き、calcite-action コンポーネントを追加します。

・icon 属性に、アクションが開くウィジェットの名前を設定します。その他のオプションは Calcite Icons をご覧ください。

・アクションバーの折りたたみを解除したときに表示される text 属性を設定します。

・data-action-id グローバル属性を設定します。この属性は、アクションをインタラクティブにするために後続のステップで使用されます。

<calcite-shell content-behind>

<!– Dynamically populated –>

</h2>

<calcite-shell-panel slot=”primary-panel” detached>

<calcite-action-bar slot=”action-bar”>

<calcite-action data-action-id=”layers” icon=”layers” text=”Layers”></calcite-action>

<calcite-action data-action-id=”basemaps” icon=”basemap” text=”Basemaps”></calcite-action>

<calcite-action data-action-id=”legend” icon=”legend” text=”Legend”></calcite-action>

<calcite-action data-action-id=”bookmarks” icon=”bookmark” text=”Bookmarks”></calcite-action>

<calcite-action data-action-id=”print” icon=”print” text=”Print”></calcite-action>

<calcite-action data-action-id=”information” icon=”information” text=”Information”></calcite-action>

</calcite-action-bar>

</calcite-shell-panel>

3.アクションバーの下に、JavaScript で初期化したウィジェットのコンテナを持つcalcite-panel コンポーネントを追加します。

・パネルのタイトルの heading 属性を設定します。

・height-scale 属性でパネルの高さを設定します。

・hidden グローバル属性を設定し、対応するアクションをクリックすると削除されるようにします。

・data-panel-id グローバル属性を設定します。この属性は、後続のステップでパネルをインタラクティブにするために使用されます。

<!– Map-specific panels (each one provides a div for ArcGIS JavaScript API widgets) –>

<calcite-panel heading=”Layers” height-scale=”l” data-panel-id=”layers” hidden>

</calcite-panel>

<calcite-panel heading=”Basemaps” height-scale=”l” data-panel-id=”basemaps” hidden>

</calcite-panel>

<calcite-panel heading=”Legend” height-scale=”l” data-panel-id=”legend” hidden>

</calcite-panel>

<calcite-panel heading=”Bookmarks” height-scale=”l” data-panel-id=”bookmarks” hidden>

</calcite-panel>

<calcite-panel heading=”Print” height-scale=”l” data-panel-id=”print” hidden>

</calcite-panel>

1.calcite-panel コンポーネントをもう一つ追加します。

2.div を作成し、id グローバル属性を持つ img と div の子要素を追加します。これらの要素には、Web マップのサムネイルと説明が入力されます。

3.layout 属性を “inline ” に設定した calcite-label コンポーネントを追加します。

4.子ラベルとして calcite-rating コンポーネントを追加し、read-only 属性を設定します。このコンポーネントには、Web マップの平均レーティングが入力されます。

<!– Info panel (populates with info from the web map) –>

<calcite-panel heading=”Details” data-panel-id=”information” hidden>

<!– Dynamically populated –>

</div>

<calcite-label layout=”inline”>

<b>Rating:</b>

<calcite-rating id=”item-rating” read-only>

<!– Dynamically populated –>

</calcite-rating>

</calcite-label>

</div>

</calcite-panel>

コンテンツの入力

アプリケーションへの Calcite Components の追加は完了です。次に、ヘッダーと情報パネルに Web マップからのコンテンツを入力します。

<script> 要素内の既存の JavaScript コードの下で、マップの読み込みが非同期で終了するのを待ちます。
マップが読み込まれたら、querySelector を使用して DOM にアクセスし、コンテンツを入力します。

map.when(() => {

const { title, description, thumbnailUrl, avgRating } = map.portalItem;

document.querySelector(“#header-title”).textContent = title;

document.querySelector(“#item-description”).innerHTML = description;

document.querySelector(“#item-thumbnail”).src=thumbnailUrl;

document.querySelector(“#item-rating”).value = avgRating;

});

コンポーネントをインタラクティブにする

次に、対応する calcite-action コンポーネントをクリックすると、ArcGIS JavaScript API ウィジェットが含まれる calcite-panel コンポーネントが表示されます。

map.when() 関数の内部で、現在開いているウィジェットの名前を格納する変数を初期化します。
アクションがクリックされたときに実行される関数を作成します。この関数は、アクティブなパネルを閉じ、クリックされた動作に対応するパネルを開きます。ユーザーがアクティブなアクションをクリックすると、対応するパネルが閉じられ、開いているパネルはなくなります。

このステップでは、属性セレクタを使って、上で追加したデータ属性を使って、action とpanel の要素にアクセスします。データ属性の値は、対応するウィジェットの名前です。

3.上記の関数をコールバックとして、calcite-action-bar にクリックイベントリスナーを作成します。

let activeWidget;

const handleActionBarClick = ({ target }) => {

if (target.tagName !== “CALCITE-ACTION”) {

return;

}

if (activeWidget) {

document.querySelector(`[data-action-id=${activeWidget}]`).active = false;

document.querySelector(`[data-panel-id=${activeWidget}]`).hidden = true;

}

const nextWidget = target.dataset.actionId;

if (nextWidget !== activeWidget) {

document.querySelector(`[data-action-id=${nextWidget}]`).active = true;

document.querySelector(`[data-panel-id=${nextWidget}]`).hidden = false;

activeWidget = nextWidget;

} else {

activeWidget = null;

}

};

document.querySelector(“calcite-action-bar”).addEventListener(“click”, handleActionBarClick);

ビューのサイズを動的に変更

コンポーネントがインタラクティブになったので、calcite-action-bar が拡大・縮小するときに view が調整されます。

view.when() 関数の内部で、calciteActionBarToggle にイベントリスナーを追加します。リスナーは、展開されたとき、または折りたたまれたときに、それぞれビューにパディングを追加、または削除します。

let actionBarExpanded = false;

document.addEventListener(“calciteActionBarToggle”, event => {

actionBarExpanded = !actionBarExpanded;

view.padding = {

left: actionBarExpanded ? 135 : 45

};

});

ローダーコンポーネントの追加

これで、あなたのアプリケーションですべてがインタラクティブになりました。Calcite Components を使って、ウィジェットを開いたり閉じたりすることができます。しかし、アプリケーションのロードに 1 秒かかるので、それをユーザーに伝える必要があります。

<body> 要素に、calcite-loader を追加し、コンポーネントを表示するように active 属性を設定します。
calcite-shell に hidden グローバル属性を追加します。

<body>

<calcite-loader active></calcite-loader>

<calcite-shell content-behind hidden>

<!–dynamically populated–>

</h2>

3.map.when() 関数の内部で、JavaScript の残りのコードの下に、calcite-loader コンポーネントの active 属性と calcite-shell コンポーネントの hidden 属性を削除します。

document.querySelector(“calcite-shell”).hidden = false;

document.querySelector(“calcite-loader”).active = false;

});

</script>

</html>

スタイリングの追加

1.<style> 要素に、ユーザーインターフェースをすっきりさせるための CSS を追加します。

body {

display: flex;

}

calcite-loader {

align-self: center;

justify-self: center;

}

#header-title {

margin-left: 1rem;

margin-right: 1rem;

}

#info-content {

padding: 0.75rem;

}

calcite-rating {

margin-top: 0.25rem;

}

</style>

アプリの実行

CodePen で、コードを実行すると、アプリケーションが表示されます。アプリケーションの読み込みが終了すると、Web マップのタイトルと calcite-action-bar とともに、地図が表示されます。calcite-action コンポーネントをクリックすると、ArcGIS API for JavaScript ウィジェットを含む calcite-panel コンポーネントを開いたり閉じたりすることができます。