기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.
# 첫 번째 Amazon Location Maps and Places 애플리케이션 생성
이 섹션에서는 Maps and Places를 사용하여 첫 번째 애플리케이션을 생성합니다.
**사전 조건:**
[Amazon Location Service 콘솔을 사용하여 인증](set-up-auth.md) 단계에서 이미 API 키를 생성했다면 시작해 보겠습니다.
API 키를 아직 생성하지 않은 경우 애플리케이션을 계속 빌드하기 전에 [Amazon Location Service 콘솔을 사용하여 인증](set-up-auth.md) 섹션을 따르세요. 질문이 있는 경우 [API 키를 사용하여 인증](using-apikeys.md) 및 [Amazon Location 지원 리전](location-regions.md)에서 자세한 내용을 참조하세요.
## 웹
다음은 MapLibre GL JS를 사용하여 Amazon Location Service 맵 애플리케이션을 생성하기 위한 단계별 자습서입니다. 이 가이드에서는 맵 설정, 스타일 옵션 추가, 장소 검색 기능 활성화에 대해 안내합니다.
### 초기 페이지 설정
이 섹션에서는 초기 페이지와 폴더 구조를 설정합니다.
#### 필요한 라이브러리 및 스타일시트 추가
`index.html` 파일을 생성합니다. 맵을 렌더링하려면 MapLibre GL JS 및 MapLibre GL 지오코더가 필요합니다. MapLibre 및 지오코더 스타일시트와 JavaScript 스크립트를 추가합니다.
다음 코드를 복사하여 `index.html` 파일에 붙여 넣습니다.
```
Amazon Location Service - Getting Started with First Map App
```
#### 맵 컨테이너 생성
HTML 파일의 `` 요소에서 맵을 보관할 `
` 요소를 HTML에 생성합니다. CSS에서 이 `
`를 스타일링하여 애플리케이션에 필요한 차원을 설정할 수 있습니다. GitHub 리포지토리에서 CSS 파일 `style.css`를 다운로드해야 합니다. 이렇게 하면 비즈니스 로직에 집중할 수 있습니다.
`style.css` 및 `index.html` 파일을 동일한 폴더에 저장합니다.
[GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css)에서 `style.css` 파일을 다운로드합니다.
```
```
#### API 키 및 AWS 리전 세부 정보 추가
키가 생성된 AWS 리전과 함께에서 생성한 API 키를 [API 키를 사용하여 인증](using-apikeys.md)이 파일에 추가합니다.
```
.....
.....
```
### 애플리케이션에 맵 추가
이 섹션에서는 애플리케이션에 맵 기능을 추가합니다. 시작하기 전에 파일이 이 폴더 구조에 있어야 합니다.
아직 다운로드하지 않은 경우 [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css)에서 `style.css` 파일을 다운로드합니다.
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
```
#### 맵을 초기화하는 함수 생성
맵을 설정하려면 `//Add functions` 라인 뒤에 `initializeMap(...)` 함수를 생성합니다.
초기 중앙 위치와 확대/축소 수준을 선택합니다. 이 예제에서는 맵 중심을 캐나다 밴쿠버로 설정하며 확대/축소 수준은 10입니다. 쉽게 확대/축소할 수 있도록 탐색 컨트롤을 추가합니다.
```
/**
* Initializes the map with the specified style and color scheme.
*/
function initializeMap(mapStyle = "Standard", colorScheme = "Dark") {
const styleUrl = `https://maps.geo.${AWS_REGION}.amazonaws.com/v2/styles/${mapStyle}/descriptor?key=${API_KEY}&color-scheme=${colorScheme}`;
const map = new maplibregl.Map({
container: 'map', // The ID of the map container
style: styleUrl, // The style URL for the map
center: [-123.116226, 49.246292], // Starting center coordinates
zoom: 10, // Initial zoom level
validateStyle: false // Disable style validation
});
return map; // Return the initialized map
}
```
#### 맵 초기화
맵을 초기화하려면 `initializeMap(...)`을 호출합니다. 선택적으로 `initializeMap` 함수 뒤에 원하는 스타일 및 색상 체계를 사용하여 초기화할 수 있습니다. 더 많은 스타일 옵션은 [AWS 맵 스타일 및 기능](map-styles.md) 섹션을 참조하세요.
```
// Step 1: Setup API Key and AWS Region
const API_KEY = "Your_API_Key";
const AWS_REGION = "Region_where_you_created_API_Key";
// Step 2.1 Add maps to application
// Step 2.2 initialize the map
const map = initializeMap("Standard","Light");
// Step 3: Add places features to application
```
브라우저에서 `index.html`을 열어 실행 중인 맵을 확인합니다.
#### 탐색 컨트롤 추가
선택적으로 맵에 탐색 컨트롤(확대/축소 및 회전)을 추가할 수 있습니다. 이 작업은 `initializeMap(...)`을 호출한 후 수행해야 합니다.
```
// Step 2.1 initialize the map
const map = initializeMap("Standard","Light");
// Step 2.2 Add navigation controls to the map
map.addControl(new maplibregl.NavigationControl());
// Step 3: Add places features to application
```
#### 맵 코드 검토
축하합니다\$1 첫 번째 앱에서 맵을 사용할 준비가 되었습니다. 브라우저에서 `index.html`을 엽니다. `style.css`가 `index.html`과 동일한 폴더에 있는지 확인합니다.
최종 HTML은 다음과 같아야 합니다.
```
Amazon Location Service - Getting Started with First Map App
```
### 애플리케이션에 장소 추가
이 섹션에서는 애플리케이션에 장소 추가 기능을 설정합니다. GitHub에서 JavaScript 파일([https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/utils.js](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/utils.js))을 다운로드합니다.
시작하기 전에 파일이 이 폴더 구조에 있어야 합니다.
```
|---FirstApp [Folder]
|-------------- index.html [File]
|-------------- style.css [File]
|-------------- utils.js [File]
```
#### GeoPlaces를 생성하는 함수 생성
검색 기능을 추가하려면 `AuthHelper` 및 `AmazonLocationClient`를 사용하여 `GeoPlaces` 클래스를 초기화합니다. `index.html`의 `` 태그 앞에 다음 `getGeoPlaces(map)` 함수를 추가합니다.
```
/**
* Gets a GeoPlaces instance for Places operations.
*/
function getGeoPlaces(map) {
const authHelper = amazonLocationClient.withAPIKey(API_KEY, AWS_REGION); // Authenticate using the API key and AWS region
const locationClient = new amazonLocationClient.GeoPlacesClient(authHelper.getClientConfig()); // Create a GeoPlaces client
const geoPlaces = new GeoPlaces(locationClient, map); // Create GeoPlaces instance
return geoPlaces; // Return the GeoPlaces instance
}
```
#### 함수를 생성하여 애플리케이션에 검색 상자 추가
`index.html`의 `` 태그 앞에 다음 `addSearchBox(map, geoPlaces)`, `renderPopup(feature)` 및 `createPopup(feature)` 함수를 추가하여 검색 기능 설정을 완료합니다.
```
/**
* Adds search box to the map.
*/
function addSearchBox(map, geoPlaces) {
const searchBox = new MaplibreGeocoder(geoPlaces, {
maplibregl,
showResultsWhileTyping: true, // Show results while typing
debounceSearch: 300, // Debounce search requests
limit: 30, // Limit number of results
popuprender: renderPopup, // Function to render popup
reverseGeocode: true, // Enable reverse geocoding
zoom: 14, // Zoom level on result selection
placeholder: "Search text or nearby (lat,long)" // Placeholder text for search box.
});
// Add the search box to the map
map.addControl(searchBox, 'top-left');
// Event listener for when a search result is selected
searchBox.on('result', async (event) => {
const { id, result_type } = event.result; // Get result ID and type
if (result_type === "Place") { // Check if the result is a place
const placeResults = await geoPlaces.searchByPlaceId(id); // Fetch details for the selected place
if (placeResults.features.length) {
createPopup(placeResults.features[0]).addTo(map); // Create and add popup for the place
}
}
});
}
/**
* Renders the popup content for a given feature.
*/
function renderPopup(feature) {
return `
${feature.place_type}
${feature.place_name}
`;
}
/**
* Creates a popup for a given feature and sets its position.
*/
function createPopup(feature) {
return new maplibregl.Popup({ offset: 30 }) // Create a new popup
.setLngLat(feature.geometry.coordinates) // Set the popup position
.setHTML(renderPopup(feature)); // Set the popup content
}
```
#### 애플리케이션에 검색 상자 추가
섹션 3.1에 정의된 대로를 `getGeoPlaces(map)`를 호출하여 `GeoPlaces` 객체를 생성한 다음, `addSearchBox(map, geoPlaces)`를 호출하여 애플리케이션에 검색 상자를 추가합니다.
```
// Step 2: Add maps to application
// Step 2.1 initialize the map
const map = initializeMap("Standard","Light");
// Step 2.2 Add navigation controls to the map
map.addControl(new maplibregl.NavigationControl());
// Step 3: Add places feature to application
// Step 3.1: Get GeoPlaces instance. It will be used for adding search box and map click functionality
const geoPlaces = getGeoPlaces(map);
// Step 3.2: Add search box to the map
addSearchBox(map, geoPlaces);
```
장소 검색을 사용할 준비가 되었습니다. 브라우저에서 `index.html`을 열어 실행 중인지 확인합니다.
#### 사용자가 맵 클릭 시 팝업을 표시하는 함수 추가
사용자가 맵을 클릭할 때 팝업을 표시하는 `addMapClick(map, geoPlaces)` 함수를 생성합니다. `` 태그 바로 앞에 이 함수를 추가합니다.
```
/**
* Sets up reverse geocoding on map click events.
*/
function addMapClick(map, geoPlaces) {
map.on('click', async ({ lngLat }) => { // Listen for click events on the map
const response = await geoPlaces.reverseGeocode({ query: [lngLat.lng, lngLat.lat], limit: 1, click: true }); // Perform reverse geocoding
if (response.features.length) { // If there are results
const clickMarker = new maplibregl.Marker({ color: "orange" }); // Create a marker
const feature = response.features[0]; // Get the clicked feature
const clickedPopup = createPopup(feature); // Create popup for the clicked feature
clickMarker.setLngLat(feature.geometry.coordinates) // Set marker position
.setPopup(clickedPopup) // Attach popup to marker
.addTo(map); // Add marker to the map
clickedPopup.on('close', () => clickMarker.remove()).addTo(map); // Remove marker when popup is closed
}
});
}
```
#### 함수를 호출하여 맵 클릭 기능 추가
맵 클릭 작업을 활성화하려면 `addSearchBox(map, geoPlaces)`가 포함된 라인 뒤에서 `addMapClick(map, geoPlaces)`을 호출합니다.
```
// Step 3: Add places feature to application
// Step 3.1: Get GeoPlaces instance. It will be used for adding search box and map click functionality
const geoPlaces = getGeoPlaces(map);
// Step 3.2: Add search box to the map
addSearchBox(map, geoPlaces);
// Step 3.3: Setup map click functionality
addMapClick(map, geoPlaces);
```
#### Maps and Places 애플리케이션 검토
축하합니다\$1 첫 번째 애플리케이션에서 Maps and Places를 사용할 준비가 되었습니다. 브라우저에서 `index.html`을 엽니다. `style.css` 및 `utils.js`가 `index.html`과 동일한 폴더에 있는지 확인합니다.
최종 HTML은 다음과 같아야 합니다.
```
Amazon Location Service - Getting Started with First Map App
```
### 자세히 살펴보기
이제 빠른 시작 자습서를 완료했으니 Amazon Location Service를 사용하여 애플리케이션을 구축하는 방법을 알 수 있습니다. Amazon Location을 최대한 활용하려면 다음 리소스를 확인하세요.
+ **쿼리 제안 세부 정보** - `GeoPlaces` 클래스를 확장하거나 `ReverseGeocode`에 대한 유사한 접근 방식을 사용하여 `Suggestion` API에서 반환되는 결과에 대한 세부 정보를 가져오는 것이 좋습니다.
+ **비즈니스 요구 사항에 적합한 API 선택** - 요구 사항에 가장 적합한 Amazon Location API를 결정하려면 [올바른 API 선택](choose-an-api.md) 리소스를 확인하세요.
+ **Amazon Location "사용 방법" 가이드 확인** - [Amazon Location Service 개발자 안내서](https://docs.aws.amazon.com/location/)에서 자습서 및 추가 리소스를 참조하세요.
+ **설명서 및 제품 정보** - 전체 설명서는 [Amazon Location Service 개발자 안내서](https://docs.aws.amazon.com/location/)를 참조하세요. 제품에 대한 자세한 내용은 [Amazon Location Service 제품](https://aws.amazon.com/location) 페이지를 참조하세요.