Utilisation d' MapLibre outils et de bibliothèques avec Amazon Location

L'un des outils importants pour créer des applications interactives avec Amazon Location est MapLibre. MapLibreest principalement un moteur de rendu permettant d'afficher des cartes dans une application Web ou mobile. Cependant, il inclut également la prise en charge des plug-ins et fournit des fonctionnalités permettant de travailler avec d'autres aspects d'Amazon Location. Les outils suivants décrivent les outils que vous pouvez utiliser, en fonction de la zone géographique avec laquelle vous souhaitez travailler.

Note

Pour utiliser n'importe quel aspect d'Amazon Location, installez le AWS SDK correspondant à la langue que vous souhaitez utiliser.

• Cartes

  Pour afficher des cartes dans votre application, vous avez besoin d'un moteur de rendu cartographique qui utilise les données fournies par Amazon Location et dessine à l'écran. Les moteurs de rendu de carte fournissent également des fonctionnalités permettant de déplacer et de zoomer la carte, ou d'ajouter des marqueurs, des punaises et d'autres annotations à la carte.

  Amazon Location Service recommande de rendre les cartes à l'aide du moteur de MapLibrerendu. MapLibre GL JS est un moteur d'affichage de cartes JavaScript, tandis que MapLibre Native fournit des cartes pour iOS ou Android.

  MapLibre dispose également d'un écosystème de plug-ins pour étendre les fonctionnalités de base. Pour plus d'informations, rendez-vous sur https://maplibre.org/ maplibre-gl-js-docs /plugins/.

• Recherche de lieux

  Pour simplifier la création d'une interface utilisateur de recherche, vous pouvez utiliser le MapLibre géocodeur pour le Web (les applications Android peuvent utiliser le plug-in Android Places).

  Utilisez la bibliothèque de géocodeur Amazon Location for Maplibre pour simplifier le processus d'utilisation d'Amazon Location dans les amazon-location-for-maplibre-gl-geocoder applications. JavaScript

• Itinéraires

  Pour afficher les itinéraires sur la carte, utilisez MapLibreles directions.

• Geofences et traceurs

  MapLibre ne dispose pas d'outils de rendu ou d'outils spécifiques pour les géofences et le suivi, mais vous pouvez utiliser la fonctionnalité de rendu et les plug-ins pour afficher les géofences et les appareils suivis sur la carte.

  Les appareils suivis peuvent utiliser le MQTT ou envoyer manuellement des mises à jour à Amazon Location Service. Les événements Geofence peuvent être traités en utilisant. AWS Lambda

De nombreuses bibliothèques open source sont disponibles pour fournir des fonctionnalités supplémentaires à Amazon Location Service, par exemple Turf qui fournit des fonctionnalités d'analyse spatiale.

De nombreuses bibliothèques utilisent les données au format GeoJSON standard ouvert. Amazon Location Service fournit une bibliothèque permettant d'utiliser GeoJSON dans JavaScript les applications. Pour plus d'informations, consultez la section suivante, SDK et bibliothèques Amazon Location.

Plug-in Amazon Location MapLibre Geocoder

Le plugin de MapLibre géocodeur Amazon Location est conçu pour vous permettre d'intégrer plus facilement les fonctionnalités Amazon Location dans vos JavaScript applications lorsque vous travaillez sur le rendu de cartes et le géocodage à l'aide de la maplibre-gl-geocoderbibliothèque.

Installation

Vous pouvez installer le plugin de MapLibre géocodeur Amazon Location à partir de NPM pour une utilisation avec des modules, à l'aide de cette commande :

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

Vous pouvez l'importer dans un fichier HTML pour l'utiliser directement dans le navigateur, à l'aide d'un script :

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

Utilisation avec le module

Ce code permet de configurer une JavaScript carte Maplibre GL avec les fonctionnalités de géocodage d'Amazon Location. Il utilise l'authentification via le pool d'identités Amazon Cognito pour accéder aux ressources Amazon Location. La carte est rendue avec un style et des coordonnées centrales spécifiés, et permet de rechercher des lieux sur la carte.

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

Utilisation avec un navigateur

Cet exemple utilise le client de localisation Amazon pour effectuer une demande d'authentification à l'aide d'Amazon Cognito.

Note

Certains de ces exemples utilisent le client Amazon Location. Le client Amazon Location est basé sur le AWS SDK pour la JavaScript version 3 et permet de passer des appels à Amazon Location via un script référencé dans un fichier HTML.

Incluez les éléments suivants dans un fichier HTML :

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

Incluez les éléments suivants dans un JavaScript fichier :

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());

Les fonctions et commandes utilisées dans le plug-in de MapLibre géocodeur Amazon Location sont répertoriées ci-dessous :

• buildAmazonLocationMaplibreGeocoder

  Cette classe crée une instance AmazonLocationMaplibreGeocder qui est le point d'entrée de tous les autres appels :

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

• getPlacesGeocoder

  Renvoie un objet iControl prêt à l'emploi qui peut être ajouté directement à une carte.

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