Amazon Location Service으로 MapLibre GL JS 사용하기 - Amazon Location Service
스캐폴딩의존성구성맵 초기화앱을 실행합니다.

Amazon Location Service으로 MapLibre GL JS 사용하기

MapLibre GL JS를 사용하여 클라이언트측 맵을 웹 애플리케이션에 포함할 수 있습니다.

MapLibre GL JS는 Amazon Location Service Maps API에서 제공하는 스타일 및 타일과 호환되는 오픈 소스 JavaScript 라이브러리입니다. MapLibre GL JS를 기본 HTML 또는 JavaScript 애플리케이션 내에 통합하여 사용자 지정 가능하고 반응이 빠른 클라이언트측 맵을 포함시킬 수 있습니다.

이 튜토리얼에서는 기본 HTML 및 JavaScript 애플리케이션 내에서 MapLibre GL JS를 Amazon Location과 통합하는 방법을 설명합니다. 이 튜토리얼에서 제공하는 것과 동일한 라이브러리 및 기법이 React와 Angular와 같은 프레임워크에도 적용됩니다.

이 튜토리얼의 샘플 애플리케이션은 GitHub의 Amazon Location Service 샘플 리포지토리의 일부로 제공됩니다.

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

이 튜토리얼에서는 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>

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

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

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

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

애플리케이션 빌드: 구성

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

  1. 리소스의 이름과 식별자를 입력합니다.

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

  2. 맵 사용 - 2단계, 인증 설정에서 생성한 인증되지 않은 자격 증명 풀을 사용하여 보안 인증 정보 공급자를 인스턴스화합니다. 이를 initializeMap라는 함수에 넣습니다. 여기에는 다음 단계에서 추가된 다른 맵 초기화 코드도 포함됩니다.

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

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

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

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

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

애플리케이션 실행

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

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

참고

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

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

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

이 애플리케이션을 실행하면 선택한 맵 스타일을 사용하여 전체 화면 맵이 표시됩니다. 이 샘플은 GitHub의 Amazon Location Service 샘플 리포지토리에서 사용할 수 있습니다.