` を CSS でスタイル設定して、アプリケーションに必要なディメンションを設定できます。GitHub リポジトリから、CSS ファイル `style.css` をダウンロードする必要があります。これにより、ビジネスロジックに集中できます。
`style.css` および `index.html` ファイルを同じフォルダに保存します。
`style.css` ファイルを [GitHub](https://github.com/aws-geospatial/amazon-location-samples-js/blob/quick_start_sample_js/quick-start/style.css) からダウンロードします。
```
```
#### API キーと AWS リージョンの詳細を追加する
で作成した API キー[API キーを使用して認証する](using-apikeys.md)を、キーが作成された AWS リージョンとともにこのファイルに追加します。
```
.....
.....
```
### アプリケーションにマップを追加する
このセクションでは、アプリケーションにマップ機能を追加します。開始するためには、ファイルがこのフォルダ構造内にある必要があります。
まだダウンロードしていない場合は、[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]
```
#### マップを初期化する関数を作成します。
マップを設定するには、`initializeMap(...)` 行の後に次の関数 `//Add functions` を作成します。
最初の中心位置とズームレベルを選択します。この例では、マップの中心をカナダのバンクーバーに設定し、ズームレベルを 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
```
#### マップコードを確認する
お疲れ様でした。最初のアプリでマップを使用できるようになりました。ブラウザで `index.html` を開きます。`style.css` が `index.html` と同じフォルダにあることを確認してください。
最終的な HTML は以下のようになります。
```
Amazon Location Service - Getting Started with First Map App
```
### アプリケーションに場所を追加する
このセクションでは、アプリケーションに場所機能を設定します。GitHub、[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) から JavaScript ファイルをダウンロードします。
開始するためには、ファイルがこのフォルダ構造内にある必要があります。
```
|---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 `
`;
}
/**
* 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 アプリケーションを確認する
お疲れ様でした。最初のアプリケーションが 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 をさらに活用するには、以下のリソースをご覧ください。
+ **クエリ提案の詳細** - `Suggestion` API が返す結果の詳細を取得するには、`ReverseGeocode` クラスを拡張するか、`GeoPlaces` と同様の手法を使用することを検討してください。
+ **ビジネスニーズに適した 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)」ページを参照してください。