Utilice el paquete npm de azure-maps-control

Artículo
07/17/2023

El paquete npm azure-maps-control es una biblioteca del lado cliente que permite insertar el control de mapa de Azure Maps en las aplicaciones de node.js mediante JavaScript o TypeScript. Esta biblioteca facilita el uso de los servicios REST de Azure Maps y le permite personalizar mapas interactivos con el contenido y las imágenes.

Requisitos previos

Para usar el paquete npm en una aplicación, debe cumplir los siguientes requisitos previos:

Una cuenta de Azure Maps
Una clave de suscripción o credenciales de Microsoft Entra. Para obtener más información, consulte opciones de autenticación.

Instalación

Descargue el paquete azure-maps-indoor más reciente.

npm install azure-maps-control

Este paquete incluye una versión mínima del código fuente, las hoja de estilos CSS y las definiciones de TypeScript para el control de mapa de Azure Maps.

También tendría que insertar la hoja de estilos de CSS para que varios controles se muestren correctamente. Si usa un empaquetador de JavaScript para empaquetar las dependencias y el código, consulte la documentación del empaquetador sobre cómo hacerlo. Para Webpack, normalmente se usa una combinación de style-loader y css-loader. La documentación está disponible en style-loader.

Para empezar, instale style-loader y css-loader:

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

En el archivo de código fuente, importe atlas-indoor.min.css:

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

A continuación, agregue cargadores a la parte de reglas del módulo de la configuración de Webpack:

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

Consulte la sección siguiente para obtener un ejemplo completo.

Crear un mapa en una aplicación de node.js

Inserte un mapa en una página web mediante el paquete npm del control de mapa.

Creación de un nuevo proyecto
```
npm init
```
npm init es un comando que le ayuda a crear un archivo package.json para el proyecto de nodo. Le formula algunas preguntas y genera el archivo en función de sus respuestas. También puede usar -y o –yes para omitir las preguntas y usar los valores predeterminados. El archivo package.json contiene información sobre el proyecto, como su nombre, versión, dependencias, scripts, etc.
Descargue el paquete azure-maps-indoor más reciente.
```
npm install azure-maps-control
```

Instale Webpack y otras dependencias de desarrollo.

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

Actualice package.json agregando un nuevo script para "build": "webpack". El archivo debería tener ahora un aspecto similar al siguiente ejemplo:

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

Cree un archivo de configuración de Webpack denominado webpack.config.js en la carpeta raíz del proyecto. Incluya estas opciones en el archivo de configuración.

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

Agregue un nuevo archivo JavaScript en ./src/js/main.js con este código.

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;

Agregue un nuevo archivo HTML denominado index.html en la carpeta raíz del proyecto con este contenido:

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

El proyecto debe tener los siguientes archivos:

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

Ejecute el siguiente comando para generar un archivo JavaScript en ./dist/bundle.js
```
npm run build
```
Abra el archivo index.html en el explorador web y vea el mapa representado. Debería tener un aspecto similar al de la imagen siguiente:

Usar otros paquetes de npm de Azure Maps

Azure Maps ofrece otros módulos como paquetes npm que se pueden integrar en la aplicación. Entre estos módulos se incluyen:

En el ejemplo siguiente se muestra cómo importar un módulo y usarlo en la aplicación. En este ejemplo se usa azure-maps-spatial-io para leer una cadena POINT(-122.34009 47.60995) como GeoJSON y representarla en el mapa mediante una capa de burbujas.

Instala el paquete npm.
```
npm install azure-maps-spatial-io
```
Después, use una declaración de importación para agregar el módulo a un archivo de código fuente:
```
import * as spatial from "azure-maps-spatial-io";
```

Use spatial.io.ogc.WKT.read() para analizar el texto.

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 puede producir errores al no poder resolver algunos módulos principales de node.js. Agregue esta configuración al archivo de configuración de Webpack para corregir el problema.
```
module.exports = {
  // ...
  resolve: {
    fallback: { "crypto": false, "worker_threads": false }
  }
};
```