Azure Maps の Indoor Maps モジュールでカスタムスタイルを使用する (プレビュー)

[アーティクル]
07/12/2023

Azure Maps Web SDK に含まれる Indoor Maps モジュールを使うと、Azure Maps Creator サービスで作成されたフロアガイドをレンダリングできます。

Azure Maps Creator を使ってフロアガイドを作ると、既定のスタイルが適用されます。 Azure Maps Creator では、Style Rest API またはビジュアルスタイルエディターを使って、フロアガイドのさまざまな要素のスタイルをカスタマイズすることもできるようになりました。

前提条件

Azure Maps アカウント
Azure Maps Creator リソース
サブスクリプションキー
マップ構成の別名または ID。詳細については、「マップ構成 API」を参照してください。

ヒント

Azure Maps Creator を使ってフロアガイドを作ったことがない場合は、「チュートリアル: Creator を使用して屋内マップを作成する」が役に立つかもしれません。

Azure Maps の Indoor Maps モジュールを使ってカスタムスタイルでフロアガイドをレンダリングするには、マップ構成の alias (または mapConfigurationId) が必要です。

Indoor Maps モジュールを埋め込む

Azure Maps Indoor モジュールは、2 つの方法のどちらかでインストールして埋め込むことができます。

グローバルにホストされている Azure Content Delivery Network バージョンの Azure Maps Indoor モジュールを使用する場合は、次の HTML ファイルの <head> 要素に含まれている script と stylesheet のリファレンスを参照を参照してください。

<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.2/atlas-indoor.min.css" type="text/css"/>
<script src="https://atlas.microsoft.com/sdk/javascript/indoor/0.2/atlas-indoor.min.js"></script>

または、Azure Maps Indoor モジュールをダウンロードすることもできます。 Azure Maps Indoor モジュールには、Azure Maps サービスにアクセスするためのクライアントライブラリが含まれています。次の手順では、Indoor モジュールをインストールし、Web アプリケーションに読み込む方法について紹介します。

最新の azure-maps-indoor パッケージをインストールします。
```
>npm install azure-maps-indoor
```
Azure Maps Indoor モジュールの JavaScript をソースファイルにインポートします。
```
import * as indoor from "azure-maps-indoor";
```
また、さまざまなコントロールを正しく表示するために CSS スタイルシートを埋め込む必要もあります。 JavaScript バンドラーを使用して依存関係をバンドルし、コードをパッケージ化する場合は、その方法についてバンドラーのドキュメントを参照してください。 Webpack の場合は、一般的に、style-loader と css-loader を組み合わせます。ドキュメントは style-loader で参照できます。

まず、style-loader と css-loader をインストールします。
```
npm install --save-dev style-loader css-loader
```
ソースファイル内に atlas-indoor.min.css をインポートします。
```
import "azure-maps-indoor/dist/atlas-indoor.min.css";
```
次に、ローダーを Webpack 構成のモジュールルール部分に追加します。
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};
```
詳細については、「Azure Maps のマップコントロール npm パッケージを使用する方法」を参照してください。

ドメインを設定して Map オブジェクトをインスタンス化する

お使いの Creator リソースの場所に一致するプレフィックス (US や EU など) を使って、マップドメインを設定します。

atlas.setDomain('us.atlas.microsoft.com');

詳しくは、「Azure Maps サービスの地域スコープ」をご覧ください。

次に、マップ構成オブジェクトをマップ構成の alias または mapConfigurationId プロパティに設定して "Map オブジェクト" をインスタンス化した後、styleAPIVersion を 2023-03-01-preview に設定します。

"Map オブジェクト" は、次の手順で Indoor Manager オブジェクトをインスタンス化するために使用します。次のコードでは、mapConfiguration、styleAPIVersion、マップドメインを設定して "Map オブジェクト" をインスタンス化する方法を示します。

const subscriptionKey = "<Your Azure Maps Subscription Key>";
const region = "<Your Creator resource region: us or eu>"  
const mapConfiguration = "<map configuration alias or ID>"  
atlas.setDomain(`${region}.atlas.microsoft.com`);

const map = new atlas.Map("map-id", {
  //use your facility's location
  center: [-122.13315, 47.63637],
  //or, you can use bounds: [# west, # south, # east, # north] and replace # with your Map bounds
  authOptions: { 
      authType: 'subscriptionKey',
      subscriptionKey: subscriptionKey
  },
  zoom: 19,

  mapConfiguration: mapConfiguration,
  styleAPIVersion: '2023-03-01-preview'
});

Indoor Manager をインスタンス化する

タイルのフロアガイドスタイルを読み込むには、Indoor Manager をインスタンス化する必要があります。 "Map オブジェクト" を指定して、Indoor Manager をインスタンス化します。マップの動的スタイル設定をサポートする場合は、statesetId を渡す必要があります。 statesetId 変数名では大文字と小文字が区別されます。コードは次の JavaScript コードスニペットのようになります。

const statesetId = "<statesetId>";

const indoorManager = new atlas.indoor.IndoorManager(map, {
  statesetId: statesetId // Optional
});

指定した状態データのポーリングを有効にするには、statesetId を指定して indoorManager.setDynamicStyling(true) を呼び出す必要があります。状態データのポーリングにより、動的プロパティの状態または "複数の状態" を動的に更新できます。たとえば、部屋などの機能には occupancy という名前の動的プロパティ ("状態") を設定できます。アプリケーションで "状態" の変更をポーリングして、ビジュアルマップ内の変更を反映することができます。次のコードは、状態のポーリングを有効にする方法を示しています。

const statesetId = "<statesetId>";

const indoorManager = new atlas.indoor.IndoorManager(map, {
  statesetId: statesetId // Optional
});

if (statesetId.length > 0) {
    indoorManager.setDynamicStyling(true);
}

屋内レベルピッカーコントロール

"屋内レベルピッカー" コントロールを使用すると、レンダリングされたマップのレベルを変更できます。必要に応じて、Indoor Manager を使用して "屋内レベルピッカー" コントロールを初期化することができます。レベルコントロールピッカーを初期化するためのコードを次に示します。

const levelControl = new atlas.control.LevelControl({ position: "top-right" });
indoorManager.setOptions({ levelControl });

屋内イベント

Azure Maps Indoor モジュールでは、"Map オブジェクト" のイベントがサポートされています。 "Map オブジェクト" のイベントリスナーは、レベルまたは施設が変更されたときに呼び出されます。レベルまたは施設が変更されたときにコードを実行する場合は、イベントリスナー内にコードを配置します。次のコードは、イベントリスナーを "Map オブジェクト" に追加する方法を示しています。

map.events.add("levelchanged", indoorManager, (eventData) => {

  //code that you want to run after a level has been changed
  console.log("The level has changed: ", eventData);
});

map.events.add("facilitychanged", indoorManager, (eventData) => {

  //code that you want to run after a facility has been changed
  console.log("The facility has changed: ", eventData);
});

eventData 変数には、levelchanged または facilitychanged イベントをそれぞれ呼び出したレベルまたは施設に関する情報が保持されます。レベルが変更されると、eventData オブジェクトには facilityId、新しい levelNumber、およびその他のメタデータが追加されます。施設が変更されると、eventData オブジェクトには新しい facilityId、新しい levelNumber、およびその他のメタデータが追加されます。

例: カスタムスタイル: WebSDK でマップ構成を使用する (プレビュー)

Azure Maps Creator を使ってフロアガイドを作ると、既定のスタイルが適用されます。 Azure Maps Creator では、屋内スタイルのカスタマイズもサポートされるようになりました。詳しくは、「屋内マップのカスタムスタイルを作成する」をご覧ください。 Creator には、ビジュアルスタイルエディターも用意されています。

「屋内マップのカスタムスタイルを作成する」ハウツー記事に従って、カスタムスタイルを作成します。変更を保存した後、マップ構成のエイリアスを記録しておきます。
Azure Content Delivery Network オプションを使用して、Azure Maps Indoor モジュールをインストールします。
新しい HTML ファイルを作成します
HTML のヘッダーで、Azure Maps Indoor モジュールの JavaScript とスタイルシートを参照します。
Creator リソースの場所と一致するプレフィックスで、マップドメインを設定します。Creator リソースを米国リージョンに作成した場合は atlas.setDomain('us.atlas.microsoft.com');、EU リージョンに作成した場合は atlas.setDomain('eu.atlas.microsoft.com'); です。
"Map オブジェクト" を初期化します。 "Map オブジェクト" では、次のオプションがサポートされています。
- Subscription key は、Azure Maps サブスクリプションキーです。
- center を使用して屋内マップの中心位置の緯度と経度を定義します。 bounds に値を指定しない場合は、center に値を指定してください。形式は center: [-122.13315, 47.63637] のようになります。
- bounds は、タイルセットマップデータを囲む最小の四角形です。 center に値を設定しない場合は、bounds に値を設定してください。マップの境界を知るには、タイルセットの一覧 API を呼び出します。タイルセットの一覧 API から bbox が返されます。これを解析して bounds に割り当てることができます。形式は bounds: [# west, # south, # east, # north] のように表示されるはずです。
- mapConfiguration は、マップに表示するカスタムスタイルが定義されているマップ構成の ID またはエイリアスです。手順 1 のマップ構成 ID またはエイリアスを使います。
- style を使用すると、表示されるマップ構成から初期スタイルを設定できます。設定しない場合は、マップ構成の既定の構成に一致するスタイルが使用されます。
- zoom を使用すると、マップのズームレベルの最小値と最大値を指定できます。
- styleAPIVersion: "2023-03-01-preview" を渡します (カスタムスタイルがパブリックプレビューの間に必要です)
次に、Indoor Manager オプションの一部としてインスタンス化された "屋内レベルピッカー" コントロールを使って Indoor Manager モジュールを作成し、必要に応じて statesetId オプションを設定します。
"Map オブジェクト" のイベントリスナーを追加します。

ヒント

マップ構成は、mapConfigurationId または alias を使って参照されます。マップ構成を編集または変更するたびに、その ID は変わりますが、エイリアスは変わりません。アプリケーションではエイリアスでマップ構成を参照することをお勧めします。詳しくは、概念に関する記事の「マップ構成」をご覧ください。

これで、ファイルは次の HTML のようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <title>Indoor Maps App</title>
    
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" type="text/css" />
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/indoor/0.2/atlas-indoor.min.css" type="text/css"/>

    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
    <script src="https://atlas.microsoft.com/sdk/javascript/indoor/0.2/atlas-indoor.min.js"></script>
      
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }

      #map-id {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="map-id"></div>
    <script>
      const subscriptionKey = "<Your Azure Maps Subscription Key>";
      const mapConfig = "<Your map configuration id or alias>";
      const statesetId = "<Your statesetId>";
      const region = "<Your Creator resource region: us or eu>"    
      atlas.setDomain(`${region}.atlas.microsoft.com`);

      const map = new atlas.Map("map-id", {
        //use your facility's location
        center: [-122.13315, 47.63637],
        //or, you can use bounds: [# west, # south, # east, # north] and replace # with your Map bounds
        authOptions: { 
            authType: 'subscriptionKey',
            subscriptionKey: subscriptionKey
        },
        zoom: 19,

        mapConfiguration: mapConfig,
        styleAPIVersion: '2023-03-01-preview'
      });

      const levelControl = new atlas.control.LevelControl({
        position: "top-right",
      });

      const indoorManager = new atlas.indoor.IndoorManager(map, {
        levelControl: levelControl, //level picker
        statesetId: statesetId // Optional
      });

      if (statesetId.length > 0) {
        indoorManager.setDynamicStyling(true);
      }

      map.events.add("levelchanged", indoorManager, (eventData) => {
        //put code that runs after a level has been changed
        console.log("The level has changed:", eventData);
      });

      map.events.add("facilitychanged", indoorManager, (eventData) => {
        //put code that runs after a facility has been changed
        console.log("The facility has changed:", eventData);
      });
    </script>
  </body>
</html>

ご自分の屋内マップを確認する場合は、Web ブラウザーに読み込みます。次の画像のように表示されます。階段を選択すると、右上隅に "レベルピッカー" が表示されます。

indoor map image