Utiliser le package npm azure-maps-control

Article
07/19/2023

Le package npm azure-maps-control est une bibliothèque côté client qui vous permet d’incorporer le contrôle de carte Azure Maps dans vos applications node.js à l’aide de JavaScript ou TypeScript. Cette bibliothèque facilite l’utilisation des services REST Azure Maps et vous permet de personnaliser des cartes interactives avec votre contenu et vos images.

Prérequis

Pour utiliser le package npm dans une application, vous devez disposer des prérequis suivants :

Compte Azure Maps
Clé d’abonnement ou informations d’identification Microsoft Entra. Pour plus d’informations, consultez Options d’authentification.

Installation

Installez le package azure-maps-control le plus récent.

npm install azure-maps-control

Ce package inclut une version réduite du code source, de la feuille de style CSS et des définitions TypeScript pour le contrôle de carte Azure Maps.

Vous devez également incorporer la feuille de style CSS pour que différents contrôles s’affichent correctement. Si vous utilisez un bundler JavaScript pour regrouper les dépendances et empaqueter votre code, reportez-vous à la documentation de votre bundler pour savoir comment procéder. Pour Webpack, il s’agit généralement d’une combinaison de style-loader et css-loader avec la documentation disponible sur style-loader.

Pour commencer, installez style-loader et css-loader :

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

Dans votre fichier source, importez atlas.min.css :

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

Ajoutez ensuite des chargeurs à la partie des règles de module de la configuration Webpack :

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

Reportez-vous à la section suivante pour obtenir un exemple complet.

Créer une carte dans une application node.js

Incorporez une carte dans une page web à l’aide du package npm de contrôle de carte.

Création d'un projet
```
npm init
```
npm init est une commande qui vous aide à créer un fichier package.json pour votre projet de nœud. Elle vous pose des questions et génère le fichier en fonction de vos réponses. Vous pouvez également utiliser -y ou –yes pour ignorer les questions et utiliser les valeurs par défaut. Le fichier package.json contient des informations sur votre projet, telles que son nom, sa version, ses dépendances, ses scripts, etc.
Installez le package azure-maps-control le plus récent.
```
npm install azure-maps-control
```

Installez Webpack et d’autres dépendances de développement.

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

Mettez à jour package.json en ajoutant un nouveau script pour "build": "webpack". Le fichier doit maintenant ressembler à cela :

{
  "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"
  }
}

Créez un fichier de configuration Webpack nommé webpack.config.js dans le dossier racine du projet. Incluez ces paramètres dans le fichier de configuration.

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"]
      }
    ]
  }
};

Ajoutez un nouveau fichier JavaScript à l’emplacement ./src/js/main.js avec ce code.

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;

Ajoutez un nouveau fichier HTML nommé index.html dans le dossier racine du projet avec ce contenu :

<!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>

Votre projet doit maintenant avoir les fichiers suivants :

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

Exécutez la commande suivante pour générer un fichier JavaScript sur ./dist/bundle.js
```
npm run build
```
Ouvrez le fichier index.html dans votre navigateur web et consultez la carte ayant fait l’objet du rendu. Elle devrait ressembler à l’image suivante :

Utiliser d’autres packages npm Azure Maps

Azure Maps propose d’autres modules sous forme de packages npm qui peuvent être intégrés à votre application. Ces modules incluent :

L’exemple suivant montre comment importer un module et l’utiliser dans votre application. Cet exemple utilise azure-maps-spatial-io pour lire une chaîne POINT(-122.34009 47.60995) en tant que GeoJSON et la restitue sur la carte à l’aide d’une couche de bulles.

Installez le package npm.
```
npm install azure-maps-spatial-io
```
Ensuite, utilisez une déclaration d’importation pour ajouter le module à un fichier source :
```
import * as spatial from "azure-maps-spatial-io";
```

Utilisez spatial.io.ogc.WKT.read() pour analyser le texte.

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 peut générer des erreurs concernant l’impossibilité de résoudre certains modules de base node.js. Ajoutez ces paramètres à votre fichier de configuration Webpack pour résoudre le problème.
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```