Uso de MapLibre GL JS con Amazon Location Service - Amazon Location Service
AndamiajeDependenciasConfiguraciónInicialización del mapaEjecute la aplicación

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Uso de MapLibre GL JS con Amazon Location Service

Utilice MapLibre GL JS para incrustar mapas del lado del cliente en las aplicaciones web.

MapLibre GL JS es una JavaScript biblioteca de código abierto que es compatible con los estilos y mosaicos proporcionados por Amazon Location Service MapsAPI. Puedes integrar MapLibre GL JS en una aplicación básica HTML o en una JavaScript aplicación para incorporar mapas personalizables y adaptables del lado del cliente.

Este tutorial describe cómo integrar MapLibre GL JS con Amazon Location dentro de una JavaScript aplicación básicaHTML. Las mismas bibliotecas y técnicas que se presentan en este tutorial también se aplican a los marcos de trabajo, como React y Angular.

La aplicación de muestra de este tutorial está disponible como parte del repositorio de muestras de Amazon Location Service en GitHub.

Creación de la aplicación: andamiaje

Este tutorial crea una aplicación web que se utiliza JavaScript para crear un mapa en una HTML página.

Comience por crear una HTML página (index.html) que incluya el contenedor del mapa:

  • Introduzca un elemento div con un id de map para aplicar las dimensiones del mapa a la vista del mapa. Las dimensiones se heredan de la ventana de visualización.

<html>
  <head>
    <style>
      body {
        margin: 0;
      }
 
      #map {
        height: 100vh; /* 100% of viewport height */
      }
    </style>
  </head>
  <body>
    <!-- map container -->
    <div id="map" />
  </body>
</html>

Creación de la aplicación: adición de dependencias

Agregue las siguientes dependencias a su aplicación: 

<!-- CSS dependencies -->
<link
  href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css"
  rel="stylesheet"
/>
<!-- JavaScript dependencies -->
<script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/@aws/amazon-location-authentication-helper.js"></script>
<script>
  // application-specific code
</script>

Esto crea una página vacía con el contenedor del mapa.

Creación de la aplicación: configuración

Para configurar la aplicación mediante: JavaScript

  1. Introduzca los nombres e identificadores de sus recursos.

    // Cognito Identity Pool ID
const identityPoolId = "us-east-1:54f2ba88-9390-498d-aaa5-0d97fb7ca3bd";
// Amazon Location Service Map name
const mapName = "ExampleMap";

  2. Cree una instancia de un proveedor de credenciales mediante el grupo de identidades no autenticadas que creó en Uso de mapas: paso 2, configurar la autenticación. Lo colocaremos en una función llamada initializeMap, que también contendrá otro código de inicialización del mapa, que se agregará en el siguiente paso

    // extract the Region from the Identity Pool ID; this will be used for both Amazon Cognito and Amazon Location
AWS.config.region = identityPoolId.split(":")[0];
 
async function initializeMap() {
  // Create an authentication helper instance using credentials from Cognito
  const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId);

  // ... more here, later
}

Creación de la aplicación: inicialización del mapa

Para que el mapa se muestre después de cargar la página, debe inicializarlo. Puede ajustar la ubicación inicial del mapa, agregar controles adicionales y superponer datos.

async function initializeMap() {
  // Create an authentication helper instance using credentials from Cognito
  const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId);
 
  // Initialize the map
  const map = new maplibregl.Map({
    container: "map",
    center: [-123.1187, 49.2819], // initial map centerpoint
    zoom: 10, // initial map zoom
    style: 'https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor',
    ...authHelper.getMapAuthenticationOptions(), // authentication, using cognito
  });
 
  map.addControl(new maplibregl.NavigationControl(), "top-left");
}
 
initializeMap();
nota

Debe proporcionar una marca denominativa o una atribución de texto para cada proveedor de datos que utilice, ya sea en su solicitud o en su documentación. Las cadenas de atribución se incluyen en la respuesta del descriptor de estilo, debajo de las sources.esri.attribution clavessources.here.attribution, ysources.grabmaptiles.attribution. MapLibre GL JS proporcionará la atribución automáticamente. Cuando utilice los recursos de Amazon Location con proveedores de datos, asegúrese de leer los términos y condiciones del servicio.

Ejecución de la aplicación

Puede ejecutar esta aplicación de ejemplo utilizándola en un servidor web local o abriéndola en un navegador.

Para usar un servidor web local, puede usar npx, ya que se instala como parte de Node.js. Puede usar npx serve desde el mismo directorio que index.html. Esto activa la aplicación en localhost:5000.

nota

Si la política que ha creado para su función no autenticada de Amazon Cognito incluye referer una condición, es posible que no pueda realizar pruebas con ella. localhost: URLs En este caso, puede realizar la prueba con un servidor web que proporcione una URL que figure en su política.

Después de completar el tutorial, la aplicación final será similar al siguiente ejemplo.

<!-- index.html -->
<html>
  <head>
    <link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
      body {
        margin: 0;
      }
      #map {
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <!-- map container -->
    <div id="map" />
    <!-- JavaScript dependencies -->
    <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/@aws/amazon-location-authentication-helper.js"></script>
    <script>
      // configuration
      const identityPoolId = "us-east-1:54f2ba88-9390-498d-aaa5-0d97fb7ca3bd"; // Cognito Identity Pool ID
      const mapName = "ExampleMap"; // Amazon Location Service Map Name

      // extract the region from the Identity Pool ID
      const region = identityPoolId.split(":")[0];

      async function initializeMap() {
        // Create an authentication helper instance using credentials from Cognito
        const authHelper = await amazonLocationAuthHelper.withIdentityPoolId(identityPoolId);

        // Initialize the map
        const map = new maplibregl.Map({
          container: "map",
          center: [-123.115898, 49.295868],
          zoom: 10,
          style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor`,
          ...authHelper.getMapAuthenticationOptions(),
        });
        map.addControl(new maplibregl.NavigationControl(), "top-left");
      }

      initializeMap();
    </script>
  </body>
</html>

Al ejecutar esta aplicación, se muestra un mapa a pantalla completa con el estilo de mapa que haya elegido. Este ejemplo está disponible en el repositorio de muestras de Amazon Location Service en GitHub.