Agrega un Mapa a tu página web usando Amazon Location Service

Un caso de uso común en el desarrollo web es agregar un mapa a una página con un marcador en una ubicación específica, como una oficina o un local comercial. Amazon Location es una gran solución porque proporciona una variedad de estilos de mapas listos para ser utilizados, de dos socios reconocidos a nivel mundial, Esri y HERE, a bajo costo en comparación con otras alternativas. El servicio también proporciona capacidades de geocodificación que puede utilizar para determinar la posición del marcador dada una dirección. A continuación, se describe como combinar estas capacidades para satisfacer este caso de uso.

Descripción de la Solución

Para esta solución, usaremos un recurso de mapa para proporcionar los datos de mapa al SDK de MapLibre GL (http://maplibre.org) que se ejecuta en un navegador. Utilizaremos recursos de tipo place index para realizar la conversión de dirección a ubicación y Amazon Cognito para administrar las credenciales que se utilizarán para obtener mapas y datos de ubicaciones.

Diagrama de arquitectura

Tutorial

Hay tres pasos principales para implementar esta solución:

Paso 1: Crear el mapa, el place index y los recursos del identity pool de Amazon Cognito
Paso 2: Agregar el mapa a una página HTML usando JavaScript
Paso 3 (opcional): Usar place index para geocodificar una dirección y mostrar un marcador en el mapa

Prerrequisitos

Para este tutorial, debe tener los siguientes requisitos previos:

Una cuenta de AWS
Un editor de texto

Paso 1: Crear el mapa, el place index y los recursos del identity pool de Cognito

En primer lugar, debe crear un mapa, un place index (si va a utilizar geocodificación para encontrar la latitud y la longitud de la posición para colocar el marcador), un identity pool de Cognito y un rol asociado de AWS Identity and Access Management (IAM) (para que pueda autenticar las solicitudes al mapa y colocar los recursos del índice). Para este ejemplo, usaremos el estilo vectorial de navegación de Esri (VectorEsriNavigation), pero puede cambiarlo por cualquiera de los otros estilos a los que se hace referencia aquí: MapConfiguration – Amazon Location Service. Puede crear estos recursos manualmente, pero CloudFormation lo hace más fácilmente. La plantilla anterior creará todos los recursos necesarios y restringirá el uso del ID del identity pool resultante a un dominio especificado mediante cláusulas de condición en la política del rol de IAM. Si está probando esto con un servidor web en su máquina local, use localhost:PORT para el dominio, de lo contrario obtendrá errores HTTP 403 Forbidden.

Pasos:

Inicie sesión en la consola de CloudFormation
Seleccione Create stack > With new resources (standard)
Agregar la ubicación de la plantilla de CloudFormation: https://amazon-location-blog-assets.s3.amazonaws.com/add-a-map-to-your-webpage/resource-template.yaml
Haga clic en Next
Introduzca un nombre al stack
Introduzca el nombre de dominio donde se alojará la página
Escriba un prefijo para usar en los nombres del mapa, place index e identity pool
Haga clic en Next > Next
Marque la casilla que dice I acknowledge that AWS CloudFormation might create IAM resources. El rol de IAM y la política asociada se usarán para restringir el acceso solo al mapa y al place index.
Clic en Create Stack

Ejemplo de output de AWS CloudFormation:

Paso 2: Agregar el mapa a una página HTML

A continuación, agregaremos el mapa a su página web. Usaremos el SDK de MapLibre (https://maplibre.org) junto con algunas librerías auxiliares de Amplify y Amazon Location. Recuerde reemplazar YOUR_IDENTITY_POOL_ID y YOUR_MAP_NAME con las salidas IdentityPoolID y MapName de la plantilla de CloudFormation.

Aquí está el código:

<!-- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. -->
<!-- SPDX-License-Identifier: MIT-0 -->
<html>
  <head>
    <link
      href="https://unpkg.com/maplibre-gl@1/dist/maplibre-gl.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div id="map" style="height: 400px; width: 650px;"/>
    <script src="https://unpkg.com/maplibre-gl@1"></script>
    <script src="https://unpkg.com/amazon-location-helpers@1"></script>
	<script src="https://sdk.amazonaws.com/js/aws-sdk-2.937.0.min.js"></script>
    <script>
      async function initializeMap() {
        const map = await AmazonLocation.createMap(
          {
            identityPoolId: "YOUR_IDENTITY_POOL_ID",
          },
          {
            container: "map",
            center: [-123.1187, 49.2819], // initial map center point
            zoom: 10, // initial map zoom
            style: "YOUR_MAP_NAME",
            hash: true,
          }
        );

        map.addControl(new maplibregl.NavigationControl(), "top-left");
		
      }

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

Paso 3: Agregar un marcador al mapa

Finalmente, agregaremos un marcador al mapa. Puede hacerlo fácilmente utilizando el siguiente código después de map.addControl(). Alternativamente, si ya conoce la posición del marcador, puede omitir la llamada de geocodificación y simplemente usar maplibregl.Marker().setLngLat([longitude,latitude]).addTo(map). Recuerde reemplazar YOUR_IDENTITY_POOL_ID y YOUR_PLACE_INDEX_NAME con las salidas IdentityPoolID y PlaceIndexName de la plantilla de CloudFormation.

// Find the location and put a marker on the map
const location = new AWS.Location({
  credentials: await AmazonLocation.getCredentialsForIdentityPool("YOUR_IDENTITY_POOL_ID"),
  region: "us-east-1"
});

const data = await location.searchPlaceIndexForText({
  IndexName: "YOUR_PLACE_INDEX_NAME",
  Text: "777 Pacific Blvd, Vancouver"
}).promise();

const position = data.Results[0].Place.Geometry.Point;
const marker = new maplibregl.Marker().setLngLat(position).addTo(map);

Limpieza

Para evitar incurrir en costes futuros, simplemente elimine el stack de CloudFormation. Vaya a CloudFormation > Stacks, seleccione el stack creado anteriormente y haga clic en Delete.

Conclusión

En este post, hemos aprendido cómo agregar rápida y fácilmente un mapa y un marcador asociado a una página web. Amazon Location Service le permite hacerlo a bajo costo y aprovechando la funcionalidad de Amazon Cognito y AWS Identity and Access Management (IAM) para controlar el acceso a los recursos asociados.

Este blogpost es una traducción por Andrés Hernández (AWS Startup Solutions Architect) del original en Inglés.

Blog de Amazon Web Services (AWS)