Perancah Dependensi Konfigurasi Inisialisasi peta Jalankan aplikasi

Menggunakan library Amplify dengan Amazon Location Service

Tutorial berikut memandu Anda menggunakan AWS Amplify dengan Amazon Location. Amplify menggunakan MapLibre GL JS untuk merender peta di aplikasi berbasis Anda JavaScript.

Amplify adalah sekumpulan pustaka klien open-source yang menyediakan antarmuka ke berbagai kategori layanan, termasuk Amplify Geo, yang didukung oleh Amazon Location Service. Pelajari lebih lanjut tentang JavaScript perpustakaan AWS Amplify Geo.

catatan

Tutorial ini mengasumsikan bahwa Anda telah mengikuti langkah-langkah dalam Menggunakan peta - Untuk menambahkan peta ke aplikasi Anda.

Membangun aplikasi: Scaffolding

Tutorial ini membuat aplikasi web yang digunakan JavaScript untuk membangun peta pada HTML halaman.

Mulailah dengan membuat HTML page (index.html) yang menyertakan wadah peta:

Masukkan div elemen dengan id of map untuk menerapkan dimensi peta ke tampilan peta. Dimensi diwarisi dari viewport.


<html>
  <head>
    <style>
      body { margin: 0; }
      #map { height: 100vh; } /* 100% of viewport height */
    </style>
  </head>

  <body>
    <!-- map container -->
    <div id="map" />
  </body>
</html>

Membangun aplikasi: Menambahkan dependensi

Tambahkan dependensi berikut ke aplikasi Anda:

AWS Amplify peta dan perpustakaan geo.
AWS Amplify perpustakaan inti.
AWS Amplify perpustakaan autentikasi.
AWS Amplify stylesheet.


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

Ini membuat halaman kosong dengan wadah peta.

Membangun aplikasi: Konfigurasi

Untuk mengkonfigurasi aplikasi Anda menggunakan JavaScript:

Masukkan pengidentifikasi kumpulan identitas yang tidak diautentikasi yang Anda buat di Menggunakan peta - Langkah 2, Siapkan otentikasi.


// 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];

Konfigurasikan AWS Amplify untuk menggunakan sumber daya yang telah Anda buat, termasuk kumpulan identitas dan sumber daya Peta (ditampilkan di sini dengan nama defaultexplore.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,
    },
  }
});

Membangun aplikasi: Inisialisasi peta

Agar peta ditampilkan setelah halaman dimuat, Anda harus menginisialisasi peta. Anda dapat menyesuaikan lokasi peta awal, menambahkan kontrol tambahan, dan data hamparan.


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

catatan

Anda harus memberikan tanda kata atau atribusi teks untuk setiap penyedia data yang Anda gunakan, baik pada aplikasi atau dokumentasi Anda. String atribusi disertakan dalam respons deskriptor gaya di bawahsources.esri.attribution,sources.here.attribution, dan kunci. sources.grabmaptiles.attribution Amplify akan secara otomatis memberikan atribusi. Saat menggunakan sumber daya Lokasi Amazon dengan penyedia data, pastikan untuk membaca syarat dan ketentuan layanan.

Menjalankan aplikasi

Anda dapat menjalankan contoh aplikasi ini dengan menggunakannya di server web lokal, atau membukanya di browser.

Untuk menggunakan server web lokal, Anda dapat menggunakan npx, diinstal sebagai bagian dari Node.js, atau server web lain pilihan Anda. Untuk menggunakan npx, ketik npx serve dari dalam direktori yang sama dengan. index.html Ini melayani aplikasi padalocalhost:5000.

catatan

Jika kebijakan yang Anda buat untuk peran Amazon Cognito yang tidak diautentikasi menyertakan referer suatu kondisi, Anda mungkin diblokir dari pengujian. localhost: URLs Dalam hal ini. Anda dapat menguji dengan server web yang menyediakan URL yang ada dalam kebijakan Anda.

Setelah menyelesaikan tutorial, aplikasi akhir terlihat seperti contoh berikut.


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

Menjalankan aplikasi ini menampilkan peta layar penuh menggunakan gaya peta yang Anda pilih. Contoh ini juga dijelaskan pada tab Sematkan peta pada halaman sumber daya Peta apa pun di konsol Amazon Location Service.

Setelah Anda menyelesaikan tutorial ini, buka Tampilkan topik peta dalam AWS Amplify dokumentasi untuk mempelajari lebih lanjut, termasuk cara menampilkan penanda di peta.

Awas Javascript dinonaktifkan atau tidak tersedia di browser Anda.

Untuk menggunakan Dokumentasi AWS, Javascript harus diaktifkan. Lihat halaman Bantuan browser Anda untuk petunjuk.

Konvensi Dokumen

MapLibre Asli SDK untuk iOS

Tutorial: Tangram