翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
ウェブアプリケーションの作成
このセクションでは、地図と特定の場所での検索機能を備えた静的ページを作成します。まず、Amazon Location リソースを作成し、アプリケーションの APIキーを作成します。
トピック
アプリ用の Amazon Location リソースを作成する
まだ持っていない場合は、アプリケーションが利用される Amazon Location リソースを作成する必要があります。ここでは、アプリケーションで地図を表示するためのマップリソースと、地図上の場所を検索するためのプレースインデックスを作成します。
位置情報リソースをアプリケーションに追加
-
使用するマップスタイルを選択します。
-
Amazon Location コンソールの マップ
ページで、[マップを作成] を選択してマップスタイルをプレビューします。 -
新しいマップリソースの [名前] と [説明] を追加します。マップリソースに使用する名前をメモしておきます。チュートリアルの後半でスクリプトファイルを作成するときに必要になります。
-
マップを選択します。
注記
マップスタイルを選択すると、利用するマップデータプロバイダーも選択されます。アプリケーションが配送車両や従業員など、ビジネスで使用するアセットを追跡またはルーティングする場合は、位置情報プロバイダーHEREとしてのみ を使用できます。詳細については、「AWS サービス規約
」のセクション 82 を参照してください。 -
Amazon Location の利用規約に同意し、[マップを作成] を選択します。選択したマップを、拡大、縮小、または任意の方向への画面移動をすることができます。
-
新しいマップリソースに表示される Amazon リソースネーム (ARN) を書き留めます。チュートリアルの後半で、これを使って正しい認証を作成します。
-
-
使用するプレースインデックスを選択します。
-
Amazon Location コンソールの[プレースインデックス
」ページで、「プレイスーンデックスを作成」を選択します。 -
新しいプレースインデックスリソースの 名前と 説明を追加します。プレースインデックスリソースに入力した名前をメモしておきます。チュートリアルの後半でスクリプトファイルを作成するときに必要になります。
-
データプロバイダーを選択します。
注記
ほぼすべてのケースでは、すでに選択したマッププロバイダーと一致するデータプロバイダーを選択します。これにより、検索が地図と一致するようになります。
アプリケーションが配送車両や従業員など、ビジネスで使用するアセットを追跡またはルーティングする場合は、位置情報プロバイダーHEREとしてのみ を使用できます。詳細については、「AWS サービス規約
」のセクション 82 を参照してください。 -
[データストレージオプション] を選択します。このチュートリアルでは結果は保存されないため、いいえ、1 回のみを選択することができます。
-
Amazon Location の利用規約に同意し、[プレースインデックスを作成] を選択します。
-
新しい場所インデックスリソースARNに表示される を書き留めます。このチュートリアルの次のセクションで、これを使って正しい認証を作成します。
-
アプリケーションの認証の設定
このチュートリアルで作成したアプリケーションは匿名で使用できます。つまり、ユーザーはアプリケーション AWS を使用するためにサインインする必要はありません。ただし、デフォルトでは、Amazon Location Service を使用するには認証APIsが必要です。Amazon Cognito または APIキーのいずれかを使用して、匿名ユーザーに認証と承認を提供できます。このチュートリアルでは、サンプルアプリケーションで使用するAPIキーを作成します。
注記
Amazon Location Service でAPIキーまたは Amazon Cognito を使用する方法の詳細については、「」を参照してくださいAmazon Location Service へのアクセスを許可する。
アプリケーションの認証を設定するには
-
Amazon Location コンソール
に移動し、左側のメニューからAPIキーを選択します。 -
[API キーの作成] を選択します。
重要
作成するAPIキーは、前のセクションで作成した Amazon Location Service リソースと同じ AWS アカウント および AWS リージョンに存在する必要があります。
-
API キーの作成ページの 1 つで、次の情報を入力します。
-
名前 – など、APIキーの名前
MyWebAppKey
。 -
リソース — 前のセクションで作成した Amazon Location Map リソースとプレースインデックスリソースを選択します。リソースの追加を選択すると、複数のリソースを追加できます。これにより、APIキーをそれらのリソースで使用できます。
-
アクション – このAPIキーで承認するアクションを指定します。チュートリアルが期待どおりに動作するように、少なくとも geo:GetMap* と geo:SearchPlaceIndexfForPosition を選択する必要があります。
-
オプションで、説明 、有効期限 、またはタグをAPIキーに追加できます。また、特定のドメインからのみ使用されるキーに制限するために、リファラー (例えば
*.example.com
) を追加することもできます。つまり、このチュートリアルはそのドメインでのみ動作することになります。注記
API キーの使用状況を保護するには、有効期限またはリファラーの両方を設定することをお勧めします。
-
-
API キーの作成 を選択してAPIキーを作成します。
-
API キーを表示 を選択し、チュートリアルの後半で使用するキー値をコピーします。これは
v1.public.
形式です。a1b2c3d4...
重要
このキーは、このチュートリアルの後半でアプリケーションのコードを書くときに必要になります。
アプリケーションの HTML の作成
このチュートリアルでは、マップを埋め込む静的HTMLページを作成し、ユーザーがマップ上の場所にあるものを見つけられるようにします。アプリは 3 つのファイルで構成されます。1 つはウェブページCSS用のHTMLファイル、もう 1 つはマップを作成し、ユーザーのインタラクションとマップイベントに応答するコード用の JavaScript (.js) ファイルです。
まず、アプリケーションに使用される HTMLおよび CSSフレームワークを作成しましょう。これは、マップコンテナを保持する <div>
要素と、クエリへのJSONレスポンスを表示する <pre> 要素を含むシンプルなページになります。
HTML クイックスタートアプリケーションの を作成するには
-
quickstart.html
という名前の新しいファイルを作成します。 -
テキストエディタまたは任意の環境でファイルを編集します。ファイルに以下を追加しますHTML。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Quick start tutorial</title> <!-- Styles --> <link href="main.css" rel="stylesheet" /> </head> <body> <header> <h1>Quick start tutorial</h1> </header> <main> <div id="map"></div> <aside> <h2>JSON Response</h2> <pre id="response"></pre> </aside> </main> <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer> </body> </html>
HTML これには、次のステップで作成するCSSファイルへのポインタ、アプリケーションのプレースホルダー要素、説明テキストが含まれます。
このチュートリアルで後ほど実行する 2 つのプレースホルダー要素があります。1 つ目はマップコントロールを保持する
<div id="map>
エレメントです。2 つ目は<pre id="response">
エレメントで、マップ上の検索結果を表示します。 -
ファイルを保存します。
次に、ウェブページCSSに を追加します。これにより、アプリケーションのテキストとプレースホルダー要素のスタイルが設定されます。
CSS クイックスタートアプリケーションの を作成するには
-
main.css
という新しいファイルを、前の手順で作成した quickstart.html ファイルと同じフォルダに作成します。 -
ご使用されたいエディタでファイルを編集します。以下のテキストをファイルに追加します。
* { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } body { margin: 0; } header { background: #000000; padding: 0.5rem; } h1 { margin: 0; text-align: center; font-size: 1.5rem; color: #ffffff; } main { display: flex; min-height: calc(100vh - 94px); } #map { flex: 1; } aside { overflow-y: auto; flex: 0 0 30%; max-height: calc(100vh - 94px); box-shadow: 0 1px 1px 0 #001c244d, 1px 1px 1px 0 #001c2426, -1px 1px 1px 0 #001c2426; background: #f9f9f9; padding: 1rem; } h2 { margin: 0; } pre { white-space: pre-wrap; font-family: monospace; color: #16191f; } footer { background: #000000; padding: 1rem; color: #ffffff; }
これにより、他のユーザーが使用していないスペースを埋めるようにマップが設定され、回答用の領域がアプリの幅の 30% を占めるように設定され、タイトルと説明テキストの色とスタイルが設定されます。
-
ファイルを保存します。
-
これで、
quickstart.html
ファイルをブラウザで表示して、アプリケーションのレイアウトを確認できるようになります。
次に、アプリケーションにマップコントロールを追加します。
アプリケーションにインタラクティブマップを追加
フレームワークと div プレースホルダーができたので、マップコントロールをアプリケーションに追加できます。このチュートリアルでは、マップコントロールとして MapLibre GL JS
インタラクティブマップをアプリケーションに追加
-
前のセクションで作成した
quickstart.html
ファイルを開きます。 -
必要なライブラリへの参照と、これから作成するスクリプトファイルを追加します。必要な変更は
green
に示されています。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Quick start tutorial</title> <!-- Styles -->
<link href="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.css" rel="stylesheet" />
<link href="main.css" rel="stylesheet" /> </head> <body> ... <footer>This is a simple Amazon Location Service app. Pan and zoom. Click to see details about entities close to a point.</footer><!-- JavaScript dependencies --> <script src="https://unpkg.com/maplibre-gl@3.x/dist/maplibre-gl.js"></script> <script src="https://unpkg.com/@aws/amazon-location-client@1.x/dist/amazonLocationClient.js"></script> <script src="https://unpkg.com/@aws/amazon-location-utilities-auth-helper@1.x/dist/amazonLocationAuthHelper.js"></script> <!-- JavaScript for the app --> <script src="main.js"></script>
</body> </html>アプリケーションに次の依存関係が追加されます。
-
MapLibre GL JS 。このライブラリとスタイルシートには、マップタイルを表示し、パンやズームなどのインタラクティブ機能を含むマップコントロールが含まれています。このコントロールでは、地図上に独自の特徴を描くなどの機能拡張も可能です。
-
Amazon Location クライアント。これにより、地図データを取得したり、地図上の場所を検索したりするために必要な Amazon Location 機能のインターフェイスが提供されます。Amazon Location クライアントは、 AWS SDK for JavaScript v3 に基づいています。
-
Amazon Location 認証ヘルパー。これにより、 APIキーまたは Amazon Cognito を使用して Amazon Location Service を認証するのに役立つ関数が提供されます。
このステップでは、次に作成する
main.js
への参照先も追加されます。 -
-
quickstart.html
ファイルを保存します。 -
HTML および ファイルと同じフォルダ
main.js
に という名前の新しいCSSファイルを作成し、編集用に開きます。 -
次のスクリプトをファイルに追加します。のテキスト
red
は、以前に作成したAPIキー値、マップリソース名、場所リソース名、リージョンのリージョン識別子 ( など) に置き換える必要がありますus-east-1
。// Amazon Location Service resource names: const mapName = "
explore.map
"; const placesName = "explore.place
"; const region = "your_region
"; const apiKey = "v1.public.a1b2c3d4...
// Initialize a map async function initializeMap() { const mlglMap = new maplibregl.Map({ container: "map", // HTML element ID of map element center: [-77.03674, 38.891602], // Initial map centerpoint zoom: 16, // Initial map zoom style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`, // Defines the appearance of the map and authenticates using an API key }); // Add navigation control to the top left of the map mlglMap.addControl(new maplibregl.NavigationControl(), "top-left"); return mlglMap; } async function main() { // Initialize map and Amazon Location SDK client: const map = await initializeMap(); } main();このコードは Amazon Location リソースをセットアップし、 MapLibre GL JS マップコントロールを設定および初期化し、ID を持つ
<div>
要素に配置しますmap
。initializeMap()
関数を理解することは重要です。これにより、アプリケーションで MapLibre マップをレンダリングするために使用される新しいマップコントロール (mlglMap
ローカルmap
で呼び出されますが、コードの残りの部分で呼び出されます) が作成されます。// Initialize the map const mlglMap = new maplibregl.Map({ container: "map", // HTML element ID of map element center: [-77.03674, 38.891602], // Initial map centerpoint zoom: 16, // Initial map zoom style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${apiKey}`, // Defines the appearance of the map and authenticates using an API key });
新しい MapLibre マップコントロールを作成すると、渡すパラメータはマップコントロールの初期状態を示します。ここで以下のパラメータを設定します。
-
HTML コンテナ。 の map div 要素を使用しますHTML。
-
ワシントン DC のある地点までのマップは初期中心。
-
16 へのズームレベル (近隣やブロックレベルに拡大)。
-
マップに使用するスタイル。マップタイルやマップをレンダリング MapLibre URLするためのその他の情報を取得するために が使用するスタイルです。これには認証用の APIキーURLが含まれていることに注意してください。
-
-
JavaScript ファイルを保存し、ブラウザで開きます。これで、ページ上にマップが作成され、画面移動やズーム操作を実行できるようになりました。
注記
このアプリを使用して、 MapLibre マップコントロールの動作を確認できます。Ctrl または Shift キーを押しながらドラッグ操作を試してみると、マップを操作する他の方法を確認できます。この機能はすべてカスタマイズ可能です。
アプリの設置はほぼ完成しました。次のセクションでは、マップ上の場所を選択し、選択した場所の住所を表示します。また、JSONページに結果が表示され、完全な結果が表示されます。
アプリケーションに検索を追加する
アプリケーションの最後のステップは、マップに検索を追加することです。この場合は、ある場所にあるアイテムを検索するリバースジオコーディング検索を追加します。
注記
Amazon Location Service では、名前または住所で検索して、地図上の場所の位置を検索することもできます。
アプリケーションに検索機能の追加
-
前のセクションで作成した
main.js
ファイルを開きます。 -
図のように
main
関数を変更します。必要な変更はgreen
に示されています。async function main() {
// Create an authentication helper instance using an API key const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey);
// Initialize map and Amazon Location SDK client: const map = await initializeMap();const client = new amazonLocationClient.LocationClient({ region, ...authHelper.getLocationClientConfig(), // Provides configuration required to make requests to Amazon Location }); // On mouse click, display marker and get results: map.on("click", async function (e) { // Set up parameters for search call let params = { IndexName: placesName, Position: [e.lngLat.lng, e.lngLat.lat], Language: "en", MaxResults: "5", }; // Set up command to search for results around clicked point const searchCommand = new amazonLocationClient.SearchPlaceIndexForPositionCommand(params); try { // Make request to search for results around clicked point const data = await client.send(searchCommand); // Write JSON response data to HTML document.querySelector("#response").textContent = JSON.stringify(data, undefined, 2); // Display place label in an alert box alert(data.Results[0].Place.Label); } catch (error) { // Write JSON response error to HTML document.querySelector("#response").textContent = JSON.stringify(error, undefined, 2); // Display error in an alert box alert("There was an error searching."); } });
}このコードは、APIキーを使用するように Amazon Location 認証ヘルパーを設定することから始めます。
const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey);
次に、その認証ヘルパーと、使用しているリージョンを使って新しい Amazon Location クライアントを作成します。
const client = new amazonLocationClient.LocationClient({ region, ...authHelper.getLocationClientConfig(), });
次に、ユーザーがマップ・コントロール上のスポットを選択すると、コードはそれに応答する。これは、 に MapLibre 提供されたイベントをキャッチすることによって行われます
click
。map.on("click", async function(e) { ... });
イベントは MapLibre
click
、ユーザーが選択した緯度と経度 () を含むパラメータを提供しますe.lngLat
。click
イベント内では、コードによってがsearchPlaceIndexForPositionCommand
作成され、指定した緯度と経度にあるエンティティが検索されます。// Set up parameters for search call let params = { IndexName: placesName, Position: [e.lngLat.lng, e.lngLat.lat], Language: "en", MaxResults: "5" }; // Set up command to search for results around clicked point const searchCommand = new amazonLocationClient.SearchPlaceIndexForPositionCommand(params); try { // Make request to search for results around clicked point const data = await client.send(searchCommand); ... });
ここで、
IndexName
は先に作成したプレースインデックスリソースの名前、Position
はLanguage
を検索するための緯度と経度、Y は結果の優先言語、そしてMaxResults
は最大 5 つの結果のみを返すように Amazon Location に指示します。残りのコードはエラーをチェックし、検索結果を
response
という<pre>
要素に表示し、一番上の結果をアラートボックスに表示する。 -
(オプション) ここで
quickstart.html
ファイルを保存してブラウザで開くと、マップ上の場所を選択すると、選択した場所の名前または住所が表示されます。 -
アプリケーションの最後のステップでは、 MapLibre 機能を使用して、ユーザーが選択した場所にマーカーを追加します。
main
関数を次のように変更します。必要な変更はgreen
に示されています。async function main() { // Create an authentication helper instance using an API key const authHelper = await amazonLocationAuthHelper.withAPIKey(apiKey); // Initialize map and Amazon Location SDK client const map = await initializeMap(); const client = new amazonLocationClient.LocationClient({ region, ...authHelper.getLocationClientConfig(), // Provides configuration required to make requests to Amazon Location });
// Variable to hold marker that will be rendered on click let marker;
// On mouse click, display marker and get results: map.on("click", async function (e) {// Remove any existing marker if (marker) { marker.remove(); } // Render a marker on clicked point marker = new maplibregl.Marker().setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(map);
// Set up parameters for search call let params = { IndexName: placesName, Position: [e.lngLat.lng, e.lngLat.lat], Language: "en", MaxResults: "5", }; // Set up command to search for results around clicked point const searchCommand = new amazonLocationClient.SearchPlaceIndexForPositionCommand(params); ...このコードでは
marker
変数を宣言しており、ユーザーが場所を選択するたびに、選択した場所を示す Z 変数が入力される。.addTo(map);
でマップに追加されると、メーカーはマップコントロールによって自動的にレンダリングされる。また、このコードは以前のメーカーをチェックして削除し、画面には一度に 1 つのマーカーしか表示されないようにします。 -
main.js
ファイルを保存し、ブラウザでquickstart.html
ファイルを開きます。以前と同様にマップ上で画面移動や拡大を行うことができますが、場所を選択すると、選択した場所の詳細が表示されるようになりました。
これでクイックスタートアプリケーションが完成しました。このチュートリアルでは、以下の静的HTMLアプリケーションを作成する方法を示します。
-
ユーザーが操作できるマップを作成します。
-
マップイベント
click
を処理します。 -
Amazon Location Service を呼び出します。具体的にはAPI、 を使用して、ある場所でマップを検索します
searchPlaceIndexForPosition
。 -
MapLibre マップコントロールを使用してマーカーを追加します。
最終のアプリケーションを表示する
このアプリケーションの最終的なソースコードはこのセクションに含まれています。最終プロジェクトは でも GitHub
の GitHub
次のステップ
クイックスタートチュートリアルを完了したので、Amazon Location Service を使用してアプリケーションを構築する方法を理解できるでしょう。Amazon Location をさらに活用するには、以下のリソースをご覧ください。
-
Amazon Location Service の概念をより深く知る
-
Amazon Location の特徴や機能の使用方法に関する詳細情報はこちら
-
Amazon Location を使用したコード例を見て、このサンプルを発展させて、より複雑なアプリケーションを構築する方法はこちら