Ponteggi Dipendenze Configurazione Inizializzazione della mappa Esegui l'app

Utilizzo della libreria Amplify con Amazon Location Service

Il seguente tutorial illustra l'utilizzo AWS Amplify con Amazon Location. Amplify MapLibre utilizza GL JS per renderizzare le mappe nella tua applicazione basata. JavaScript

Amplify è un insieme di librerie client open source che forniscono interfacce a diverse categorie di servizi, tra cui Amplify Geo, che è alimentato da Amazon Location Service. Scopri di più sulla JavaScript libreria AWS Amplify Geo.

Nota

Questo tutorial presuppone che tu abbia già seguito i passaggi descritti in Uso delle mappe - Per aggiungere una mappa all'applicazione.

Creazione dell'applicazione: impalcature

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:

AWS Amplify librerie di mappe e geografiche.
AWS Amplify libreria principale.
AWS Amplify libreria di autenticazione.
AWS Amplify foglio di stile.


<!-- CSS dependencies -->
    <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link>

<!-- JavaScript dependencies -->
    <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></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:

Inserisci gli identificatori del pool di identità non autenticato che hai creato in Utilizzo delle mappe - Passaggio 2, Configurazione dell'autenticazione.


// Cognito Identity Pool ID
const identityPoolId = "region:identityPoolID"; // for example: us-east-1:123example-1234-5678
// extract the Region from the Identity Pool ID
const region = identityPoolId.split(":")[0];

Configura AWS Amplify per utilizzare le risorse che hai creato, incluso il pool di identità e la risorsa Map (mostrata qui con il nome predefinito di). explore.map


// Configure Amplify
const { Amplify } = aws_amplify_core;
const { createMap } = AmplifyMapLibre;

Amplify.configure({
  Auth: {
    identityPoolId,
    region,
  },
  geo: {
    AmazonLocationService: {
      maps: {
        items: {
          "explore.map": {
            style: "Default style"
          },
        },
        default: "explore.map",
      },
      region,
    },
  }
});

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() {
  const map = await createMap(
    {
      container: "map",
      center: [-123.1187, 49.2819],
      zoom: 10,
      hash: true,
    }
  );

  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 Amplify 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, installato come parte di Node.js, o qualsiasi altro server web a tua scelta. Per usare npx, digita npx serve dalla stessa directory di. index.html Questo serve all'applicazione su. localhost: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.


<html>
  <head>
    <!-- CSS dependencies -->
    <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link>

    <!-- JavaScript dependencies -->
    <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <style>
      body { margin: 0; }
      #map { height: 100vh; }
    </style>
  </head>

  <body>
    <div id="map" />
    <script type="module">
      // Cognito Identity Pool ID
      const identityPoolId = "region:identityPoolId"; // for example: us-east-1:123example-1234-5678
      // extract the Region from the Identity Pool ID
      const region = identityPoolId.split(":")[0];

      // Configure Amplify
      const { Amplify } = aws_amplify_core;
      const { createMap } = AmplifyMapLibre;

      Amplify.configure({
        Auth: {
          identityPoolId,
          region,
        },
        geo: {
          AmazonLocationService: {
            maps: {
              items: {
                "explore.map": {
                  style: "Default style"
                },
              },
              default: "explore.map",
            },
            region,
          },
        }
      });

      async function initializeMap() {
        const map = await createMap(
          {
            container: "map",
            center: [-123.1187, 49.2819],
            zoom: 10,
            hash: true,
          }
        );

        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 è descritto anche nella scheda Incorpora mappa di qualsiasi pagina di risorse della mappa nella console Amazon Location Service.

Dopo aver completato questo tutorial, vai all'argomento Visualizza una mappa nella AWS Amplify documentazione per saperne di più, incluso come visualizzare gli indicatori sulla mappa.

Avvertimento JavaScript è disabilitato o non è disponibile nel tuo browser.

Per usare la documentazione AWS, JavaScript deve essere abilitato. Consulta le pagine della guida del browser per le istruzioni.

Convenzioni dei documenti

MapLibre Nativo SDK per iOS

Tutorial: Tangram