Ajoutez une carte interactive Amazon Location à votre application - Amazon Location Service

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.

Ajoutez une carte interactive Amazon Location à votre application

Maintenant que vous disposez d'un framework et d'un espace réservé à div, vous pouvez ajouter le contrôle cartographique à votre application. Ce didacticiel utilise MapLibre GL JS comme contrôle cartographique, pour obtenir des données depuis Amazon Location Service. Vous l'utiliserez également JavaScript Aide à l'authentification pour faciliter la signature des appels vers l'agence Amazon à l'APIsaide de votre API clé.

Pour ajouter une carte interactive à votre application

  1. Ouvrez le quickstart.html fichier que vous avez créé dans la section précédente.

  2. Ajoutez des références aux bibliothèques nécessaires et au fichier de script que vous allez créer. Les modifications que vous devez apporter sont indiquées dansgreen.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Quick start tutorial</title>

    <!-- Styles -->
    <link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" />
    <link href="main.css" rel="stylesheet" />
  </head>
  
  <body>
    ...
    <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer>
    
    <!-- JavaScript dependencies -->
    <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/@aws/amazon-location-client@1.x/dist/amazonLocationClient.js"></script>
    <script src="https://unpkg.com/@aws/amazon-location-utilities-auth-helper@1.x/dist/amazonLocationAuthHelper.js"></script>
    
    <!-- JavaScript for the app -->
    <script src="main.js"></script>
  </body>
</html>

    Cela ajoute les dépendances suivantes à votre application :

    • MapLibre ALL-NOUS. Cette bibliothèque et cette feuille de style incluent un contrôle cartographique qui affiche des tuiles cartographiques et inclut des fonctionnalités interactives, telles que le panoramique et le zoom. Le contrôle permet également des extensions, telles que le dessin de vos propres entités sur la carte.

    • Client Amazon Location. Cela fournit des interfaces pour la fonctionnalité Amazon Location nécessaire pour obtenir des données cartographiques et rechercher des lieux sur la carte. Le client Amazon Location est basé sur le AWS SDK for JavaScript v3.

    • Aide à l'authentification de localisation Amazon. Cela fournit des fonctions utiles pour authentifier Amazon Location Service à l'aide de API clés ou d'Amazon Cognito.

    Cette étape ajoute également une référence àmain.js, que vous allez créer ensuite.

  3. Enregistrez le fichier quickstart.html.

  4. Créez un nouveau fichier appelé main.js dans le même dossier que vos CSS fichiers HTML et ouvrez-le pour le modifier.

  5. Ajoutez le script suivant à votre fichier. Le texte dans red doit être remplacé par la valeur API clé, le nom de la ressource cartographique et le nom de la ressource géographique que vous avez créés précédemment, ainsi que par l'identifiant de région de votre région (tel queus-east-1).

    // Amazon Location Service resource names:
const mapName = "explore.map";
const placesName = "explore.place";
const region = "your_region";
const apiKey = "v1.public.a1b2c3d4...

// Initialize a map
async function initializeMap() {
  const mlglMap = new maplibregl.Map({
    container: "map", // HTML element ID of map element
    center: [-77.03674, 38.891602], // Initial map centerpoint
    zoom: 16, // Initial map zoom
    style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`, // Defines the appearance of the map and authenticates using an API key
  });

  // Add navigation control to the top left of the map
  mlglMap.addControl(new maplibregl.NavigationControl(), "top-left");
  
  return mlglMap;
}

async function main() {
  // Initialize map and Amazon Location SDK client:
  const map = await initializeMap();
}

main();

    Ce code définit les ressources Amazon Location, puis configure et initialise un contrôle MapLibre cartographique GL JS et le place dans votre <div> élément avec l'identifiant. map

    Il est important de comprendre la initializeMap() fonction. Il crée un nouveau contrôle MapLibre cartographique (appelé mlglMap localement, mais appelé map dans le reste du code) qui est utilisé pour afficher la carte dans votre application.

      // Initialize the map
  const mlglMap = new maplibregl.Map({
    container: "map", // HTML element ID of map element
    center: [-77.03674, 38.891602], // Initial map centerpoint
    zoom: 16, // Initial map zoom
    style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`, // Defines the appearance of the map and authenticates using an API key
  });

    Lorsque vous créez un nouveau contrôle MapLibre cartographique, les paramètres que vous transmettez indiquent l'état initial du contrôle cartographique. Ici, nous définissons les paramètres suivants.

    • HTMLcontainer, qui utilise l'élément map div dans notreHTML.

    • Le centre initial de la carte jusqu'à un point situé à Washington, DC.

    • Le niveau de zoom jusqu'à 16 (zoom sur le niveau d'un quartier ou d'un bloc).

    • Le style à utiliser pour la carte, qui permet MapLibre d'URLobtenir les tuiles de la carte et d'autres informations pour afficher la carte. Notez que cela URL inclut votre API clé d'authentification.

  6. Enregistrez votre JavaScript fichier, puis ouvrez-le dans un navigateur. Vous avez maintenant une carte sur votre page, sur laquelle vous pouvez utiliser les actions de panoramique et de zoom.

    Note

    Vous pouvez utiliser cette application pour voir comment se comporte le contrôle MapLibre cartographique. Vous pouvez essayer d'utiliser les touches Ctrl ou Shift lorsque vous faites glisser le pointeur pour découvrir d'autres manières d'interagir avec la carte. Toutes ces fonctionnalités sont personnalisables.

    Map of Washington D.C. showing Constitution Gardens and Independence Ave SW in an Amazon Location Service app.

Votre application est presque terminée. Dans la section suivante, vous allez choisir un emplacement sur la carte et afficher l'adresse du lieu choisi. Vous allez également afficher le résultat JSON sur la page, pour voir les résultats complets.