Utilisation de MapLibre GL JS avec Amazon Location Service - Amazon Location Service
ÉchafaudageDépendancesConfigurationInitialisation de la carteExécutez l'application

Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

Utilisation de MapLibre GL JS avec Amazon Location Service

Utilisez MapLibre GL JS pour intégrer des cartes côté client dans des applications Web.

MapLibre GL JS est une JavaScript bibliothèque open source compatible avec les styles et les vignettes fournis par les cartes API Amazon Location Service. Vous pouvez intégrer MapLibre GL JS dans un outil de base HTML ou une JavaScript application pour intégrer des cartes côté client personnalisables et réactives.

Ce didacticiel explique comment intégrer MapLibre GL JS à Amazon Location dans une JavaScript application HTML de base. Les mêmes bibliothèques et techniques présentées dans ce didacticiel s'appliquent également aux frameworks, tels que React et Angular.

L'exemple d'application de ce didacticiel est disponible dans le référentiel d'exemples Amazon Location Service sur GitHub.

Création de l'application : échafaudage

Ce didacticiel crée une application Web qui permet JavaScript de créer une carte sur une HTML page.

Commencez par créer une HTML page (index.html) qui inclut le conteneur de la carte :

  • Entrez un div élément avec un ou id map pour appliquer les dimensions de la carte à la vue cartographique. Les dimensions sont héritées de la fenêtre d'affichage.

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

Création de l'application : ajout de dépendances

Ajoutez les dépendances suivantes à votre application : 

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

Cela crée une page vide contenant le conteneur de la carte.

Création de l'application : Configuration

Pour configurer votre application à l'aide de JavaScript :

  1. Entrez les noms et les identifiants de vos ressources.

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

  2. Instanciez un fournisseur d'informations d'identification à l'aide du pool d'identités non authentifié que vous avez créé dans Utilisation de cartes - Étape 2, Configuration de l'authentification. Nous allons le mettre dans une fonction appeléeinitializeMap, qui contiendra également un autre code d'initialisation de la carte, ajouté à l'étape suivante

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

Création de l'application : initialisation de la carte

Pour que la carte s'affiche une fois la page chargée, vous devez l'initialiser. Vous pouvez ajuster l'emplacement initial de la carte, ajouter des commandes supplémentaires et superposer des données.

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

Vous devez indiquer l'attribution d'un mot ou d'un texte pour chaque fournisseur de données que vous utilisez, que ce soit sur votre application ou dans votre documentation. Les chaînes d'attribution sont incluses dans la réponse du descripteur de style sous les sources.grabmaptiles.attribution touches sources.esri.attributionsources.here.attribution, et. MapLibre GL JS fournira automatiquement une attribution. Lorsque vous utilisez les ressources Amazon Location avec des fournisseurs de données, assurez-vous de lire les conditions générales du service.

Exécution de l'application

Vous pouvez exécuter cet exemple d'application en l'utilisant sur un serveur Web local ou en l'ouvrant dans un navigateur.

Pour utiliser un serveur Web local, vous pouvez utiliser npx, car il est installé dans le cadre de Node.js. Vous pouvez utiliser npx serve depuis le même répertoire queindex.html. Cela permet de diffuser l'application surlocalhost:5000.

Note

Si la politique que vous avez créée pour votre rôle Amazon Cognito non authentifié inclut referer une condition, il se peut que vous ne puissiez pas effectuer de test. localhost: URLs Dans ce cas, vous pouvez effectuer un test avec un serveur Web qui fournit une URL réponse conforme à votre politique.

Une fois le didacticiel terminé, l'application finale ressemble à l'exemple suivant.

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

L'exécution de cette application affiche une carte en plein écran utilisant le style de carte que vous avez choisi. Cet exemple est disponible dans le référentiel d'échantillons Amazon Location Service sur GitHub.