Seleccione sus preferencias de cookies

Usamos cookies esenciales y herramientas similares que son necesarias para proporcionar nuestro sitio y nuestros servicios. Usamos cookies de rendimiento para recopilar estadísticas anónimas para que podamos entender cómo los clientes usan nuestro sitio y hacer mejoras. Las cookies esenciales no se pueden desactivar, pero puede hacer clic en “Personalizar” o “Rechazar” para rechazar las cookies de rendimiento.

Si está de acuerdo, AWS y los terceros aprobados también utilizarán cookies para proporcionar características útiles del sitio, recordar sus preferencias y mostrar contenido relevante, incluida publicidad relevante. Para aceptar o rechazar todas las cookies no esenciales, haga clic en “Aceptar” o “Rechazar”. Para elegir opciones más detalladas, haga clic en “Personalizar”.

Preferencias
Contacte con nosotros
Comentarios
AWS Documentation
Cree una cuenta AWS

Uso de la biblioteca Amplify con Amazon Location Service

PDF
RSS
Modo de enfoque
Uso de la biblioteca Amplify con Amazon Location Service - Amazon Location Service
AndamiajeDependenciasConfiguraciónInicialización del mapaEjecute la aplicación

En los siguientes tutoriales, se explica cómo utilizar AWS Amplify con Amazon Location. Amplify usa MapLibre GL JS para renderizar mapas en su aplicación basada en JavaScript.

Amplify es un conjunto de bibliotecas de clientes de código abierto que proporcionan interfaces para diferentes categorías de servicios, incluida Amplify Geo, que funciona con Amazon Location Service. Más información sobre la biblioteca AWS Amplify Geo JavaScript.

nota

En este tutorial se supone que ya ha seguido los pasos de Uso de mapas: para agregar un mapa a la aplicación.

Creación de la aplicación: andamiaje

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

Comience por crear una página HTML (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:

  • Mapotecas y geotecas de AWS Amplify.

  • Biblioteca principal de AWS Amplify.

  • Biblioteca de autenticación AWS Amplify.

  • Hoja de estilos de AWS Amplify.

<!-- CSS dependencies -->
    <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer"></link>

<!-- JavaScript dependencies -->
    <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></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 identificadores del grupo de identidades no autenticadas que creó en Uso de mapas: paso 2, Configurar la autenticación.

    // Cognito Identity Pool ID
const identityPoolId = "region:identityPoolID"; // for example: us-east-1:123example-1234-5678
// extract the Region from the Identity Pool ID
const region = identityPoolId.split(":")[0];

  2. Configure AWS Amplify para usar los recursos que ha creado, incluidos el grupo de identidades y el recurso de mapa (que se muestran aquí con el nombre predeterminado explore.map).

    // Configure Amplify
const { Amplify } = aws_amplify_core;
const { createMap } = AmplifyMapLibre;

Amplify.configure({
  Auth: {
    identityPoolId,
    region,
  },
  geo: {
    AmazonLocationService: {
      maps: {
        items: {
          "explore.map": {
            style: "Default style"
          },
        },
        default: "explore.map",
      },
      region,
    },
  }
});

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() {
  const map = await createMap(
    {
      container: "map",
      center: [-123.1187, 49.2819],
      zoom: 10,
      hash: true,
    }
  );

  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. Los string de atribución se incluyen en la respuesta del descriptor de estilo, debajo de las claves sources.esri.attribution, sources.here.attribution, y sources.grabmaptiles.attribution. Amplify proporcionará automáticamente la atribución. 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, instalado como parte de Node.js, o cualquier otro servidor web de su elección. Para usar npx, escriba 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 rol no autenticado de Amazon Cognito incluye una condición referer, es posible que no pueda realizar pruebas con direcciones URL localhost:. En este caso, puede realizar la prueba con un servidor web que proporcione una URL incluida en su política.

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

<html>
  <head>
    <!-- CSS dependencies -->
    <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer"></link>

    <!-- JavaScript dependencies -->
    <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <style>
      body { margin: 0; }
      #map { height: 100vh; }
    </style>
  </head>

  <body>
    <div id="map" />
    <script type="module">
      // Cognito Identity Pool ID
      const identityPoolId = "region:identityPoolId"; // for example: us-east-1:123example-1234-5678
      // extract the Region from the Identity Pool ID
      const region = identityPoolId.split(":")[0];

      // Configure Amplify
      const { Amplify } = aws_amplify_core;
      const { createMap } = AmplifyMapLibre;

      Amplify.configure({
        Auth: {
          identityPoolId,
          region,
        },
        geo: {
          AmazonLocationService: {
            maps: {
              items: {
                "explore.map": {
                  style: "Default style"
                },
              },
              default: "explore.map",
            },
            region,
          },
        }
      });

      async function initializeMap() {
        const map = await createMap(
          {
            container: "map",
            center: [-123.1187, 49.2819],
            zoom: 10,
            hash: true,
          }
        );

        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 también se describe en la pestaña Insertar mapa de cualquier página de recursos de mapas de la consola de Amazon Location Service.

Tras completar este tutorial, consulte el tema Mostrar un mapa de la documentación de AWS Amplify para obtener más información, incluida la forma de mostrar los marcadores en el mapa.

En esta página

PrivacidadTérminos del sitioPreferencias de cookies
© 2025, Amazon Web Services, Inc o sus afiliados. Todos los derechos reservados.