Amazon Location Service로 Amplify 라이브러리 사용 - Amazon Location Service
스캐폴딩의존성구성맵 초기화앱을 실행합니다.

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

Amazon Location Service로 Amplify 라이브러리 사용

다음 자습서에서는 Amazon Location AWS Amplify 에서 를 사용하는 방법을 안내합니다. Amplify는 MapLibre GL JS를 사용하여 JavaScript기반 애플리케이션에서 맵을 렌더링합니다.

Amplify는 Amazon Location Service로 구동되는 Amplify Geo를 비롯한 다양한 서비스 카테고리에 대한 인터페이스를 제공하는 오픈 소스 클라이언트 라이브러리 세트입니다. AWS Amplify Geo JavaScript 라이브러리 에 대해 자세히 알아보세요.

참고

이 튜토리얼에서는 맵 사용 - 애플리케이션에 맵 추가의 단계를 이미 수행했다고 가정합니다.

애플리케이션 빌드: 스캐폴딩

이 자습서에서는 를 JavaScript 사용하여 HTML 페이지에 맵을 빌드하는 웹 애플리케이션을 생성합니다.

먼저 맵의 컨테이너가 포함된 HTML 페이지(index.html)를 생성합니다.

  • map의 id가 포함된 div 요소를 입력하여 맵의 크기를 맵 보기에 적용합니다. 크기는 뷰포트에서 상속됩니다.

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

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

애플리케이션 빌드: 종속성 추가

애플리케이션에 다음 종속 항목을 추가합니다.

  • AWS Amplify 맵 및 지리 라이브러리.

  • AWS Amplify 코어 라이브러리.

  • AWS Amplify 인증 라이브러리.

  • AWS Amplify 스타일시트.

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

이는 맵 컨테이너가 포함된 빈 페이지를 만듭니다.

애플리케이션 빌드: 구성

를 사용하여 애플리케이션을 구성하려면 JavaScript:

  1. 맵 사용 - 2단계, 인증 설정에 생성한 인증되지 않은 자격 증명 풀의 식별자를 입력합니다.

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

  2. 자격 증명 풀 및 맵 리소스(기본 이름 로 표시됨)를 포함하여 생성한 리소스를 AWS Amplify 사용하도록 를 구성합니다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,
    },
  }
});

애플리케이션 빌드: 맵 초기화

페이지가 로드된 후 맵을 표시하려면 맵을 초기화해야 합니다. 초기 맵 위치를 조정하고, 컨트롤을 추가하고, 데이터를 오버레이할 수 있습니다.

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

애플리케이션 또는 문서에서 사용하는 각 데이터 공급자에 대한 워드마크 또는 텍스트 속성을 제공해야 합니다. 속성 문자열은 sources.esri.attribution, sources.here.attribution, sources.grabmaptiles.attribution 키의 스타일 설명자 응답에 포함됩니다. Amplify는 자동으로 속성을 제공합니다. 데이터 공급자와 함께 Amazon Location 리소스를 사용할 때는 서비스 이용 약관을 반드시 읽어보세요.

애플리케이션 실행

이 샘플 애플리케이션을 로컬 웹 서버에서 사용하거나 브라우저에서 열어 실행할 수 있습니다.

로컬 웹 서버를 사용하려면 Node.js 일부로 설치된 npx 또는 원하는 다른 웹 서버를 사용할 수 있습니다. npx를 사용하려면 index.html과 동일한 디렉터리 내에서 npx serve를 입력합니다. 이는 localhost:5000에서 애플리케이션을 제공합니다.

참고

인증되지 않은 Amazon Cognito 역할에 대해 생성한 정책에 referer 조건이 포함된 경우 localhost: 를 사용한 테스트가 차단될 수 있습니다URLs. 이 경우 정책에 있는 를 제공하는 웹 서버로 테스트할 수 URL 있습니다.

튜토리얼을 완료한 후 최종 애플리케이션은 다음 예시와 같습니다.

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

이 애플리케이션을 실행하면 선택한 맵 스타일을 사용하여 전체 화면 맵이 표시됩니다. 이 샘플은 Amazon Location Service 콘솔의 맵 리소스 페이지에 있는 맵 임베드 탭에도 설명되어 있습니다.

이 자습서를 완료한 후 AWS Amplify 설명서의 맵 표시 주제로 이동하여 맵에 마커를 표시하는 방법을 포함하여 자세한 내용을 알아봅니다.