Usando o MapLibre GL JS com o Amazon Location Service - Amazon Location Service
EstruturaDependênciasConfiguraçãoInicialização do mapaExecute o aplicativo

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Usando o MapLibre GL JS com o Amazon Location Service

Use o MapLibre GL JS para incorporar mapas do lado do cliente em aplicativos da web.

MapLibre O GL JS é uma JavaScript biblioteca de código aberto compatível com os estilos e blocos fornecidos pelo Amazon Location Service Maps. API Você pode integrar o MapLibre GL JS em um JavaScript aplicativo HTML ou aplicativo básico para incorporar mapas personalizáveis e responsivos do lado do cliente.

Este tutorial descreve como integrar o MapLibre GL JS com o Amazon Location em um JavaScript aplicativo básicoHTML. As mesmas bibliotecas e técnicas apresentadas neste tutorial também se aplicam a estruturas, como React e Angular.

O aplicativo de amostra para este tutorial está disponível como parte do repositório de amostras do Amazon Location Service em GitHub.

Construir o aplicativo: estrutura

Este tutorial cria uma aplicação web que usa JavaScript para criar um mapa em uma HTML página.

Comece criando uma HTML página (index.html) que inclua o contêiner do mapa:

  • Insira um elemento div com um id de map para aplicar as dimensões do mapa à visualização do mapa. As dimensões são herdadas da janela de exibição.

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

Construir o aplicativo: adicionando dependências

Adicione as seguintes dependências ao aplicativo: 

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

Isso cria uma página vazia com o contêiner do mapa.

Construir o aplicativo: configuração

Para configurar seu aplicativo usando JavaScript:

  1. Insira os nomes e identificadores dos seus recursos.

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

  2. Instancie um provedor de credenciais usando o banco de identidade não autenticado que você criou em Utilizar mapas – Etapa 2, Configurar a autenticação. Vamos colocar isso em uma função chamada initializeMap, que também conterá outro código de inicialização do mapa, adicionado na próxima etapa

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

Construir o aplicativo: inicialização do mapa

Para que o mapa seja exibido após o carregamento da página, você deve inicializar o mapa. Você pode ajustar a localização inicial do mapa, adicionar controles adicionais e sobrepor dados.

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

Você deve fornecer uma marca nominativa ou atribuição de texto para cada provedor de dados que você usa, seja em seu aplicativo ou em sua documentação. As sequências de atribuição estão incluídas na resposta do descritor de estilo sob as teclassources.esri.attribution, e. sources.here.attribution sources.grabmaptiles.attribution MapLibre O GL JS fornecerá automaticamente a atribuição. Ao usar os recursos do Amazon Location com provedores de dados, lembre-se de ler os termos e condições do serviço.

Executando o aplicativo

Você pode executar esse aplicativo de amostra usando-o em um servidor da web local ou abrindo-o em um navegador.

Para usar um servidor da web local, você pode usar o npx, porque ele é instalado como parte do Node.js. Você pode usar o npx serve de dentro do mesmo diretório que index.html. Isso serve o aplicativo em localhost:5000.

nota

Se a política que você criou para sua função não autenticada do Amazon Cognito incluir referer uma condição, você poderá ser impedido de testar com. localhost: URLs Nesse caso, você pode testar com um servidor web que forneça um URL que esteja em sua política.

Depois de concluir o tutorial, o aplicativo final se parece com o exemplo a seguir.

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

A execução deste aplicativo exibe um mapa em tela cheia usando o estilo de mapa escolhido. Essa amostra está disponível no repositório de amostras do Amazon Location Service em GitHub.