azure-maps-control npm パッケージを使用する

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

azure-maps-control npm パッケージは、JavaScript または TypeScript を使用して node.js アプリケーションに Azure Maps のマップコントロールを埋め込むことができるクライアント側ライブラリです。このライブラリを使用すると、Azure Maps REST サービスを簡単に使用でき、コンテンツと画像を使用して対話型マップをカスタマイズできます。

必須コンポーネント

アプリケーションでこの npm パッケージを使用するには、次の前提条件が必要です。

Azure Maps アカウント
サブスクリプションキーまたは Microsoft Entra 資格情報。詳細については、認証オプションに関する記事を参照してください。

インストール

最新の azure-maps-control パッケージをインストールします。

npm install azure-maps-control

このパッケージには、Azure Maps マップコントロールのソースコード、CSS スタイルシート、TypeScript 定義の縮小バージョンが含まれています。

また、さまざまなコントロールを正しく表示するために CSS スタイルシートを埋め込む必要もあります。 JavaScript バンドラーを使用して依存関係をバンドルし、コードをパッケージ化する場合は、その方法についてバンドラーのドキュメントを参照してください。 Webpack の場合は、一般的に、style-loader と css-loader を組み合わせます。ドキュメントは style-loader で参照できます。

まず始めに、style-loader と css-loader をインストールします。

npm install --save-dev style-loader css-loader

ソースファイル内に atlas.min.css をインポートします。

import "azure-maps-control/dist/atlas.min.css";

次に、ローダーを Webpack 構成のモジュールルール部分に追加します。

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};

完全な例については、次のセクションを参照してください。

node.js アプリケーションでマップを作成する

マップコントロール npm パッケージを使用して、Web ページにマップを埋め込みます。

新しいプロジェクトを作成する
```
npm init
```
npm init は、node プロジェクトの package.json ファイルを作成するのに役立つコマンドです。いくつかの質問が表示され、回答に基づいてファイルが生成されます。 -y または –yes を使用して質問をスキップし、既定値を使用することもできます。 package.json ファイルには、プロジェクトに関する情報 (名前、バージョン、依存関係、スクリプトなど) が含まれています。
最新の azure-maps-control パッケージをインストールします。
```
npm install azure-maps-control
```
Webpack とその他の開発依存関係をインストールします。
```
npm install --save-dev webpack webpack-cli style-loader css-loader
```

"build": "webpack" の新しいスクリプトを追加して package.json を更新します。ファイルは次のようになります。

{
  "name": "azure-maps-npm-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "azure-maps-control": "^2.3.1"
  },
  "devDependencies": {
    "css-loader": "^6.8.1",
    "style-loader": "^3.3.3",
    "webpack": "^5.88.1",
    "webpack-cli": "^5.1.4"
  }
}

プロジェクトのルートフォルダーに webpack.config.js という名前の Webpack 構成ファイルを作成します。以下の設定を構成ファイルに含めます。

module.exports = {
  entry: "./src/js/main.js",
  mode: "development",
  output: {
    path: `${__dirname}/dist`,
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};

このコードを使用して、./src/js/main.js に新しい JavaScript ファイルを追加します。

import * as atlas from "azure-maps-control";
import "azure-maps-control/dist/atlas.min.css";

const onload = () => {
  // Initialize a map instance.
  const map = new atlas.Map("map", {
    view: "Auto",
    // Add authentication details for connecting to Azure Maps.
    authOptions: {
      authType: "subscriptionKey",
      subscriptionKey: "<Your Azure Maps Key>"
    }
  });
};

document.body.onload = onload;

プロジェクトのルートフォルダーに index.html という名前の新しい HTML ファイルを、次の内容で追加します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Azure Maps demo</title>
    <script src="./dist/bundle.js" async></script>
    <style>
      html,
      body,
      #map {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

これで、プロジェクトに次のファイルが作成されます。

├───node_modules
├───index.html
├───package-lock.json
├───package.json
├───webpack.config.js
└───src
    └───js
        └───main.js

次のコマンドを実行して、./dist/bundle.js に JavaScript ファイルを生成します。
```
npm run build
```
Web ブラウザーでファイル index.html を開き、レンダリングされたマップを表示します。それは次の図のようになるはずです。

その他の Azure Maps npm パッケージを使用する

Azure Maps には、アプリケーションに統合できる npm パッケージとして他のモジュールが用意されています。これらのモジュールは次のとおりです。

次のサンプルは、モジュールをインポートしてアプリケーションで使用する方法を示しています。このサンプルでは、azure-maps-spatial-io を使用して POINT(-122.34009 47.60995) 文字列を GeoJSON として読み取り、バブルレイヤーを使用してマップ上にレンダリングします。

npm パッケージをインストールします。
```
npm install azure-maps-spatial-io
```
次に、import 宣言を使用してモジュールをソースファイルに追加します。
```
import * as spatial from "azure-maps-spatial-io";
```

spatial.io.ogc.WKT.read() を使用してテキストを解析します。

import * as atlas from "azure-maps-control";
import * as spatial from "azure-maps-spatial-io";
import "azure-maps-control/dist/atlas.min.css";

const onload = () => {
  // Initialize a map instance.
  const map = new atlas.Map("map", {
    center: [-122.34009, 47.60995],
    zoom: 12,
    view: "Auto",
    // Add authentication details for connecting to Azure Maps.
    authOptions: {
      authType: "subscriptionKey",
      subscriptionKey: "<Your Azure Maps Key>"
    }
  });

  // Wait until the map resources are ready.
  map.events.add("ready", () => {
    // Create a data source and add it to the map.
    const datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    // Create a layer to render the data
    map.layers.add(new atlas.layer.BubbleLayer(datasource));

    // Parse the point string.
    var point = spatial.io.ogc.WKT.read("POINT(-122.34009 47.60995)");

    // Add the parsed data to the data source.
    datasource.add(point);
  });
};

document.body.onload = onload;

Webpack 5 では、一部の node.js コアモジュールを解決できないというエラーがスローされる場合があります。この問題を解決するには、以下の設定を Webpack 構成ファイルに追加します。
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```