場所検索を使用する
マップに場所検索機能を追加する
まず、場所検索を設定または既存のAmazon Location Serviceリソースを使用の指示に従って検索インデックスリソースをプロビジョニングして、アプリを設定してください。また、アプリケーションでマップの表示をすでに設定していることを確認してください。
マップに場所検索UIコンポーネントを追加するには、maplibre-gl-geocoderライブラリを使用できます。maplibre-gl-js-amplifyパッケージを使用すると、maplibre-gl-geocoderとAmplify Geoを簡単に統合できます。これは、ユーティリティ関数createAmplifyGeocoder()をエクスポートして、いくつかの事前定義された設定を備えたmaplibre-gl-geocoderのインスタンスを返し、UIコンポーネントをカスタマイズするためのすべてのオプションをサポートします。
次のコマンドで必要な依存関係をインストールしてください:
npm add @maplibre/maplibre-gl-geocoder maplibre-gl@1 maplibre-gl-js-amplify注:
maplibre-gl-js-amplifyバージョン4.0.0以上がインストールされていることを確認してください。
まず、場所検索UIコンポーネントを追加したいマップを作成してください。マップの作成と表示に関するガイドを参照してください。
次に、createAmplifyGeocoder()を使用してMaplibreGeocoderの新しいインスタンスを取得し、場所検索UIコンポーネントをマップに追加します。
注: パッケージバンドラー(webpack、rollupなど)がCSSファイルを処理するように設定されていることを確認してください。webpackのドキュメントはこちらで確認できます。
import { createMap, createAmplifyGeocoder } from "maplibre-gl-js-amplify";import maplibregl from "maplibre-gl";import "maplibre-gl/dist/maplibre-gl.css";import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css";import "maplibre-gl-js-amplify/dist/public/amplify-geocoder.css"; // Optional CSS for Amplify recommended styling
async function initializeMap() { const el = document.createElement("div"); el.setAttribute("id", "map"); document.body.appendChild(el);
const map = await createMap({ container: "map", center: [-123.1187, 49.2819], // [Longitude, Latitude] zoom: 11, })
map.addControl(createAmplifyGeocoder());}
initializeMap();
マップの外に場所検索ボックスを表示する
maplibre-gl-geocoderを使用して、場所検索UIコンポーネントをマップの外を含めアプリケーションの任意の場所に表示することもできます。
これを行うには、関数onAdd()を使用してhtml要素を抽出し、マップのaddControl()関数を使用する代わりに、DOMの任意の場所にそれを添付します。
const geocoder = createAmplifyGeocoder();document.getElementById("search").appendChild(geocoder.onAdd());
検索アイコンをカスタマイズする
maplibre-gl-geocoderで使用される検索アイコンをカスタマイズして、好きな画像を使用できます。MapLibreマーカーは、カスタム画像を渡す際にHTMLElementが必要です。
次の例では、既存のSVGアイコンをcreateAmplifyGeocoderに渡す前にHTMLElementに配置します。これにより、maplibre-gl-geocoderが作成されます。
import myIcon from "./myIcon.svg" // relative path to your custom icon
const icon = new Image(100, 100);icon.src = myIcon;
const geocoder = createAmplifyGeocoder({ showResultMarkers: { element: icon } });map.addControl(geocoder);
場所ベースの検索機能
Amplify Geoを使用すると、テキスト、住所、または地理座標で場所を検索できます。
テキスト、住所、ビジネス名、都市などで検索する
Geo.searchByText() APIを使用すると、住所、名前、都市、地域などの自由形式のテキストで場所またはポイントオブインタレストを検索できます。
import { Geo } from "@aws-amplify/geo"
Geo.searchByText("Amazon Go Store")以下を提供することで、検索結果をさらにカスタマイズできます:
countries- 検索結果を指定された国に制限します(ISO Alpha-3国コードで指定)maxResults- 最大結果セットを制限しますbiasPosition- 検索の開始場所として機能しますsearchAreaConstraints- 検索内の領域を制限しますsearchIndexName- デフォルトとは異なるLocation Serviceの検索インデックスリソースを使用します
注: biasPositionとsearchAreaConstraintsパラメータの両方を同時に提供するとエラーが返されます。
const searchOptionsWithBiasPosition = { countries: string[], // Alpha-3 country codes maxResults: number, // 50 is the max and the default biasPosition: [ longitude // number latitude // number, ], // Coordinates point to act as the center of the search searchIndexName: string, // the string name of the search index}
const searchOptionsWithSearchAreaConstraints = { countries: ["USA"], // Alpha-3 country codes maxResults: 25, // 50 is the max and the default searchAreaConstraints: [SWLongitude, SWLatitude, NELongitude, NELatitude], // Bounding box to search inside of searchIndexName: string, // the string name of the search index}
Geo.searchByText('Amazon Go Stores', searchOptionsWithBiasPosition)これは検索制約にマッチする場所とその座標を返します。以下の例で示すように、場所は追加のメタデータを持つことがあります。
// returns[ { geometry: { point: [ -122.34014899999994, // Longitude point 47.61609000000004 // Latitude point ], }, addressNumber: "2131" // optional string for the address number alone country: "USA" // optional Alpha-3 country code label: "Amazon Go, 2131 7th Ave, Seattle, WA, 98121, USA" // Optional string municipality: "Seattle" // Optional string neighborhood: undefined // Optional string postalCode: "98121" // Optional string region: "Washington" // Optional string street: "7th Ave" // Optional string subRegion: "King County" // Optional string }]座標で検索する
Geo.searchByCoordinates() APIは逆ジオコーダーで、座標点を取得し、マップのその点で見つかるものについての情報を返します。返されるオブジェクトは、上記のsearchByText() APIと同じ形です。
import { Geo } from "@aws-amplify/geo";
Geo.searchByCoordinates([longitudePoint, latitudePoint])maxResultsパラメータで結果セットを制限することも、searchIndexNameパラメータでデフォルトの検索インデックスをオーバーライドすることもできます。
const searchOptionsWithBiasPosition = { maxResults: number, // 50 is the max and the default searchIndexName: string, // the string name of the search index}
Geo.searchByCoordinates([-122.3399573, 47.616179], searchOptionsWithBiasPosition)提案を検索する
Geo.searchForSuggestions() APIを使用すると、場所、住所、都市、地域などの自由形式のテキストで提案を検索できます。
import { Geo } from "@aws-amplify/geo";
Geo.searchForSuggestions("Amazon Go Store")Geo.searchByText() APIと同様に、以下を提供することで検索結果をさらにカスタマイズできます:
countries- 検索結果を指定された国に制限します(ISO Alpha-3国コードで指定)maxResults- 最大結果セットを制限しますbiasPosition- 検索の開始場所として機能しますsearchAreaConstraints- 検索内の領域を制限しますsearchIndexName- デフォルトとは異なるLocation Serviceの検索インデックスリソースを使用します
注: biasPositionとsearchAreaConstraintsパラメータの両方を同時に提供するとエラーが返されます。
const searchOptionsWithBiasPosition = { countries: string[], // Alpha-3 country codes maxResults: number, // 50 is the max and the default biasPosition: [ longitude // number latitude // number, ], // Coordinates point to act as the center of the search searchIndexName: string, // the string name of the search index}
const searchOptionsWithSearchAreaConstraints = { countries: ["USA"], // Alpha-3 country codes maxResults: 25, // 50 is the max and the default searchAreaConstraints: [SWLongitude, SWLatitude, NELongitude, NELatitude], // Bounding box to search inside of searchIndexName: string, // the string name of the search index}
Geo.searchForSuggestions('Amazon Go', searchOptionsWithBiasPosition)これは検索制約にマッチする提案(場所とそれぞれのplaceIdが利用可能な場合)のリストを返します。
// returns[ { text: "Amazon Go, 2131 7th Ave, Seattle, WA, 98121, USA", placeId: "8fd9d4c6-2527-4190-a7df-0dae352c9dc6" }, { text: "Amazon Go, 1906 Terry Ave, Seattle, WA, 98101, USA", placeId: "5d04d071-dea2-4d86-bfce-86bd6a8f4787" }]以下のように提案リストでplaceIdが利用できない場合は、searchByTextを使用して選択した場所をテキストで検索してください。
Geo.searchForSuggestions("Amazon", { MaxResults: 5 })
// returns[ { text: "Amazon Go", }, { text: "Amazon 4-star", }]
Geo.searchByText('Amazon Go', { MaxResults: 5 })これは検索テキストにマッチする場所とその座標を返します。
PlaceIdで検索する
Geo.searchByPlaceId() APIを使用すると、プロバイダーが返した場所の一意の不透明トークンであるplaceIdで場所を検索できます。
import { Geo } from "@aws-amplify/geo";
Geo.searchByPlaceId(placeId)searchIndexNameパラメータでデフォルトの検索インデックスをオーバーライドすることもできます。
const searchByPlaceIdOptions = { searchIndexName: string, // the string name of the search index}
Geo.searchByPlaceId("8fd9d4c6-2527-4190-a7df-0dae352c9dc6", searchByPlaceIdOptions)これは以下の例で示すようにメタデータを含む場所を返します。
// returns{ geometry: { point: [ -122.34014899999994, // Longitude point 47.61609000000004 // Latitude point ], }, addressNumber: "2131" // optional string for the address number alone country: "USA" // optional Alpha-3 country code label: "Amazon Go, 2131 7th Ave, Seattle, WA, 98121, USA" // Optional string municipality: "Seattle" // Optional string neighborhood: undefined // Optional string postalCode: "98121" // Optional string region: "Washington" // Optional string street: "7th Ave" // Optional string subRegion: "King County" // Optional string}