フレームワークと 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 ファイルや CSS
main.jsファイルと同じフォルダにという名前の新しいファイルを作成し、編集用に開きます。 -
次のスクリプトをファイルに追加します。
赤色のテキストは、以前に作成した 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
mapで<div>要素に配置します。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 のマップ div 要素を使用する HTML コンテナ。
-
ワシントン DC のある地点までのマップは初期中心。
-
16 へのズームレベル (近隣やブロックレベルに拡大)。
-
マップに使用するスタイル。これにより、マップをレンダリングするためのマップタイルやその他の情報を取得するための URL が MapLibre に与えられます。この URL には認証用の API キーが含まれていることに注意してください。
-
-
JavaScript ファイルを保存し、ブラウザで開きます。これで、ページ上にマップが作成され、画面移動やズーム操作を実行できるようになりました。
注記
このアプリを使用して、MapLibre マップコントロールの動作を確認できます。Ctrl または Shift キーを押しながらドラッグ操作を試してみると、マップを操作する他の方法を確認できます。この機能はすべてカスタマイズ可能です。
アプリの設置はほぼ完成しました。次のセクションでは、マップ上の場所を選択し、選択した場所の住所を表示します。また、結果の JSON をページに表示して、結果全体を確認することもできます。
