Utilizzo di MapLibre GL JS con Amazon Location Service - Servizio di posizione Amazon
PonteggiDipendenzeConfigurazioneInizializzazione della mappaEsegui l'app

Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

Utilizzo di MapLibre GL JS con Amazon Location Service

Usa MapLibre GL JS per incorporare mappe lato client nelle applicazioni web.

MapLibre GL JS è una JavaScript libreria open source compatibile con gli stili e i riquadri forniti da Amazon Location Service Maps. API Puoi integrare MapLibre GL JS in un' JavaScript applicazione HTML o in un'applicazione di base per incorporare mappe lato client personalizzabili e reattive.

Questo tutorial descrive come integrare MapLibre GL JS con Amazon Location all'interno di un' JavaScript applicazione HTML di base. Le stesse librerie e tecniche presentate in questo tutorial si applicano anche ai framework, come React e Angular.

L'applicazione di esempio per questo tutorial è disponibile come parte dell'archivio di esempi di Amazon Location Service su GitHub.

Creazione dell'applicazione: Scaffolding

Questo tutorial crea un'applicazione web che utilizza JavaScript per creare una mappa su una HTML pagina.

Inizia creando una HTML pagina (index.html) che includa il contenitore della mappa:

  • Inserisci un div elemento con un id of map per applicare le dimensioni della mappa alla visualizzazione della mappa. Le dimensioni vengono ereditate dalla finestra.

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

Creazione dell'applicazione: aggiunta di dipendenze

Aggiungi le dipendenze seguenti all'applicazione: 

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

Questo crea una pagina vuota con il contenitore della mappa.

Creazione dell'applicazione: configurazione

Per configurare l'applicazione utilizzando JavaScript:

  1. Inserisci i nomi e gli identificatori delle tue risorse.

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

  2. Crea un'istanza di un provider di credenziali utilizzando il pool di identità non autenticato che hai creato in Uso delle mappe - Passaggio 2, Configurazione dell'autenticazione. Lo inseriremo in una funzione chiamatainitializeMap, che conterrà anche altro codice di inizializzazione della mappa, aggiunto nel passaggio successivo

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

Creazione dell'applicazione: inizializzazione della mappa

Affinché la mappa venga visualizzata dopo il caricamento della pagina, è necessario inizializzare la mappa. È possibile modificare la posizione iniziale della mappa, aggiungere controlli aggiuntivi e sovrapporre i dati.

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

È necessario fornire un marchio denominativo o un'attribuzione di testo per ogni fornitore di dati che si utilizza, nell'applicazione o nella documentazione. Le stringhe di attribuzione sono incluse nella risposta del descrittore di stile sotto i tastisources.esri.attribution, sources.here.attribution e. sources.grabmaptiles.attribution MapLibre GL JS fornirà automaticamente l'attribuzione. Quando utilizzi le risorse di Amazon Location con fornitori di dati, assicurati di leggere i termini e le condizioni del servizio.

Esecuzione dell'applicazione

È possibile eseguire questa applicazione di esempio utilizzandola in un server Web locale o aprendola in un browser.

Per utilizzare un server web locale, puoi usare npx, perché è installato come parte di Node.js. È possibile utilizzare npx serve dall'interno della stessa directory diindex.html. Questo serve all'applicazione sulocalhost:5000.

Nota

Se la policy che hai creato per il tuo ruolo non autenticato in Amazon Cognito include referer una condizione, potresti essere bloccato dal test. localhost: URLs In questo caso, puoi eseguire il test con un server Web che fornisce una funzionalità inclusa nella tua URL politica.

Dopo aver completato il tutorial, l'applicazione finale è simile all'esempio seguente.

<!-- 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'esecuzione di questa applicazione consente di visualizzare una mappa a schermo intero utilizzando lo stile di mappa scelto. Questo esempio è disponibile nell'archivio degli esempi di Amazon Location Service su GitHub.