Usa MapLibre herramientas y bibliotecas con Amazon Location

Una de las herramientas importantes para crear aplicaciones interactivas con Amazon Location es MapLibre. MapLibrees principalmente un motor de renderizado para mostrar mapas en una aplicación web o móvil. Sin embargo, también incluye soporte para complementos y proporciona funciones para trabajar con otros aspectos de Amazon Location. A continuación se describen las herramientas que puede utilizar en función del área de ubicación con la que desee trabajar.

nota

Para usar cualquier aspecto de Amazon Location, instala el AWS SDK para el idioma que quieras usar.

• Mapas

  Para mostrar mapas en su aplicación, necesita un motor de renderizado de mapas que utilice los datos proporcionados por Amazon Location y los dibuje en la pantalla. Los motores de renderización de mapas también ofrecen la funcionalidad de desplazar y ampliar el mapa, o de agregar marcadores o chinchetas y otras anotaciones al mapa.

  Amazon Location Service recomienda renderizar los mapas con el motor de MapLibrerenderizado. MapLibre GL JS es un motor para mostrar mapas JavaScript, mientras que MapLibre Native proporciona mapas para iOS o Android.

  MapLibre también tiene un ecosistema de complementos para ampliar la funcionalidad principal. Para obtener más información, visite https://maplibre. org/maplibre-gl-js-docs/plugins/.

• Búsqueda de lugares

  Para simplificar la creación de una interfaz de usuario de búsqueda, puede utilizar el MapLibre geocodificador para la web (las aplicaciones de Android pueden utilizar el complemento Android Places).

  Utilice la biblioteca de geocodificadores Amazon Location for Maplibre para simplificar el proceso de uso de Amazon Location with amazon-location-for-maplibre-gl-geocoder in Applications. JavaScript

• Rutas

  Para mostrar las rutas en el mapa, utilice las indicaciones. MapLibre

• Geocercas y rastreadores

  MapLibre no tiene ninguna representación ni herramientas específicas para las geovallas y el rastreo, pero puede usar la función de renderización y los complementos para mostrar las geocercas y los dispositivos rastreados en el mapa.

  Los dispositivos que se están rastreando pueden usar MQTTo enviar actualizaciones manualmente a Amazon Location Service. Se puede responder a los eventos de Geofence utilizando AWS Lambda.

Hay muchas librerías de código abierto disponibles para proporcionar funciones adicionales a Amazon Location Service, por ejemplo, Turf, que proporciona funciones de análisis espacial.

Muchas bibliotecas utilizan el estándar abierto de datos JSON con formato geográfico. Amazon Location Service proporciona una biblioteca para admitir el uso de Geo JSON en JavaScript las aplicaciones. Para obtener más información, consulte la siguiente sección, Cómo usar Amazon Location SDK y las bibliotecas.

Complemento Amazon Location MapLibre Geocoder

El complemento Amazon Location MapLibre geocoder está diseñado para facilitar la incorporación de la funcionalidad Amazon Location en sus JavaScript aplicaciones cuando trabaja con la representación de mapas y la geocodificación mediante la biblioteca. maplibre-gl-geocoder

Instalación

Puedes instalar el plugin Amazon Location MapLibre Geocoder desde NPM para usarlo con módulos, con este comando:

npm install @aws/amazon-location-for-maplibre-gl-geocoder

Puedes importarlo a un HTML archivo para usarlo directamente en el navegador, con un script:

<script src="https://www.unpkg.com/@aws/amazon-location-for-maplibre-gl-geocoder@1">/script<

Uso con el módulo

Este código configura un JavaScript mapa GL de Maplibre con capacidades de geocodificación de Amazon Location. Utiliza la autenticación mediante Amazon Cognito Identity Pool para acceder a los recursos de Amazon Location. El mapa se representa con un estilo y unas coordenadas centrales específicos, y permite buscar lugares en el mapa.

// Import MapLibre GL JS
import maplibregl from "maplibre-gl";
// Import from the AWS JavaScript SDK V3
import { LocationClient } from "@aws-sdk/client-location";
// Import the utility functions
import { withIdentityPoolId } from "@aws/amazon-location-utilities-auth-helper";
// Import the AmazonLocationWithMaplibreGeocoder
import { buildAmazonLocationMaplibreGeocoder, AmazonLocationMaplibreGeocoder } from "@aws/amazon-location-for-maplibre-gl-geocoder"

const identityPoolId = "Identity Pool ID";
const mapName = "Map Name";
const region = "Region"; // region containing the Amazon Location resource
const placeIndex = "PlaceIndexName" // Name of your places resource in your AWS Account. 

// Create an authentication helper instance using credentials from Amazon Cognito
const authHelper = await withIdentityPoolId("Identity Pool ID");

const client = new LocationClient({
  region: "Region", // Region containing Amazon Location resources
  ...authHelper.getLocationClientConfig(), // Configures the client to use credentials obtained via Amazon Cognito
});

// Render 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(),
});

// Gets an instance of the AmazonLocationMaplibreGeocoder Object. 
const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, placeIndex, {enableAll: true});
    
// Now we can add the Geocoder to the map.
map.addControl(amazonLocationMaplibreGeocoder.getPlacesGeocoder());

Uso con un navegador

En este ejemplo, se utiliza el Amazon Location Client para realizar una solicitud que se autentica mediante Amazon Cognito.

nota

Algunos de estos ejemplos utilizan Amazon Location Client. El Amazon Location Client está basado en la JavaScript versión AWS SDK 3 y permite realizar llamadas a Amazon Location a través de un script al que se hace referencia en un HTML archivo.

Incluye lo siguiente en un HTML archivo:

< Import the Amazon Location With Maplibre Geocoder>
<script src="https://www.unpkg.com/@aws/amazon-location-with-maplibre-geocoder@1"></script>
<Import the Amazon Location Client>
<script src="https://www.unpkg.com/@aws/amazon-location-client@1"></script>
<!Import the utility library>
<script src="https://www.unpkg.com/@aws/amazon-location-utilities-auth-helper@1"></script>

Incluya lo siguiente en un JavaScript archivo:

const identityPoolId = "Identity Pool ID";
const mapName = "Map Name";
const region = "Region"; // region containing Amazon Location resource

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

// Render 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(),
});

// Initialize the AmazonLocationMaplibreGeocoder object
const amazonLocationMaplibreGeocoderObject = amazonLocationMaplibreGeocoder.buildAmazonLocationMaplibreGeocoder(client, placesName, {enableAll: true});

// Use the AmazonLocationWithMaplibreGeocoder object to add a geocoder to the map. 
map.addControl(amazonLocationMaplibreGeocoderObject.getPlacesGeocoder());

A continuación se enumeran las funciones y los comandos que se utilizan en el complemento Amazon Location MapLibre Geocoder:

• buildAmazonLocationMaplibreGeocoder

  Esta clase crea una instancia de la AmazonLocationMaplibreGeocder que es el punto de entrada a las demás llamadas:

  const amazonLocationMaplibreGeocoder = buildAmazonLocationMaplibreGeocoder(client, placesIndex, {enableAll: true});

• getPlacesGeocoder

  Devuelve un IControl objeto listo para usar que se puede añadir directamente a un mapa.

  const geocoder = getPlacesGeocoder();
  
  // Initialize map
  let map = await initializeMap();
  
  // Add the geocoder to the map. 
  map.addControl(geocoder);