Need to configure your backend?See Build a Backend →

マップを操作する

マップを表示する

まず、Amazon Location Service マップリソースをプロビジョニングし、マップを設定または既存のリソースを使用ガイドの手順に従ってアプリを構成していることを確認します。

注： React では、Amplify React MapView コンポーネントを使用できます

マップをレンダリングするには、MapLibre GLとmaplibre-gl-js-amplifyライブラリが必要です。MapLibre GL はオープンソースのマップレンダリングライブラリで、maplibre-gl-js-amplifyライブラリは MapLibre を Amplify Geo と統合し、認証を処理するのを簡単にします。

依存関係をアプリに追加します：

Terminal

npm add maplibre-gl maplibre-gl-js-amplify

以下を確認してください：

maplibre-gl-js-amplifyバージョン4.0.0以上がインストールされている
webpack、rollup などのパッケージバンドラーが CSS ファイルを処理するように設定されている。webpack ドキュメントこちらを確認してください。

ライブラリをアプリケーションにインポートします：

import { createMap } from 'maplibre-gl-js-amplify';
import 'maplibre-gl/dist/maplibre-gl.css';

次に、createMapの助けを借りてMapを作成してレンダリングします。

注：このようにcreateMapを呼び出す前に、DOM にid="map"のdivが必要です。

async function initializeMap() {
  const map = await createMap({
    container: 'map', // マップをレンダリングする HTML 要素または HTML 要素 ID https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/
    center: [-123.1187, 49.2819], // [経度、緯度]
    zoom: 11
initializeMap();

className またはスタイルシート ID 以外のものを使用してマップをレンダリングするには、HTML 要素自体への参照を渡すことができます。

const element = document.getElementsByClassName("class")[0];
const map = await createMap({
    container: element,

MapLibre キャンバスには、正しく表示するために定義された高さが必要です。そうしないと、マップが表示されるべき場所で空白の画面が表示される場合があります。

amplify-map.cssファイルには、マップコンポーネントの高さを設定するためによく使用されるいくつかのメソッドが含まれています。リストされた例のいくつかを独自のスタイルに追加することも、以下のようにamplify-map.cssを直接インポートすることもできます：

import "maplibre-gl-js-amplify/dist/public/amplify-map.css";

パーセンテージベースの高さを使用してマップをレンダリングするには、マップコンテナへのすべての祖先要素が高さを持つことを確認する必要があります：

  /* マップ要素の祖先 */
  height: 100%;
  height: 50%;

バンクーバーを中心としたマップ

マップにマーカーを表示する

マップにマーカーを表示するには、drawPoints関数を使用します。drawPointsは以下を期待しています：

sourceName - マーカーがレンダリングされるレイヤーを指定します。同じsourceNameを渡すことで既存のマーカーを編集できます
座標データ - (経度、緯度) 表示するマーカーの座標データ
maplibre-gl-js Map - マーカーをレンダリングするマップオブジェクト

まず、アプリでdrawPointsメソッドをインポートします。インポートセクションは以下のようになります

import { drawPoints } from 'maplibre-gl-js-amplify';

drawPointsメソッドは、マップ上にマーカーを表示するために使用されるソースとレイヤーのID を返します。これらのID は、maplibre-gl-jsソース、ペイント、およびレイヤーオプションによるさらなるカスタマイズに使用できます。

drawPointsで使用できるパラメータとオプションの詳細については、ドキュメントを確認してください。

次に、マップにマーカーを表示したい場合は、以下のコードスニペットを使用します。マップの読み込み時にマーカーを表示したい場合は、これをinitializeMap()関数に追加します。

map.on('load', function () {
  drawPoints(
    'mySourceName', // 任意のソース名
        coordinates: [-122.483696, 37.833818], // [経度、緯度]
        title: 'Golden Gate Bridge',
        address: 'A suspension bridge spanning the Golden Gate'
        coordinates: [-122.477, 37.8105] // [経度、緯度]
    ], // 座標データの配列、フィーチャーデータの配列、または[NamedLocations](https://github.com/aws-amplify/maplibre-gl-js-amplify/blob/main/src/types.ts#L8)の配列
      showCluster: true,
      unclusteredOptions: {
        showMarkerPopup: true
      clusterOptions: {
        showCount: true

ゴールデンゲートブリッジ上のポイントを備えたマップ

異なるマップスタイルを表示する

getAvailableMaps API は、表示可能なすべてのマップの情報を取得します。

これは、ユーザーにさまざまなマップスタイルの選択肢を提供したい場合に便利です。

import { Geo } from '@aws-amplify/geo';
Geo.getAvailableMaps();

利用可能なマップは以下の内容を含む配列として返されます：

    mapName: 'myAmplifyGeoEsriStreetMap',
    style: 'VectorEsriStreets'
    mapName: 'myAmplifyGeoEsriTopographicMap',
    style: 'VectorEsriTopographic'

resizeとsetStyle関数を使用してマップをリサイズおよびカスタマイズできます：

map.setStyle('myAmplifyGeoEsriTopographicMap'); // getAvailableMaps()から受け取ったマップ名
map.resize(); // マップを再レンダリングします

DOM からマップを削除する

マップを DOM から削除する時が来たら、生成されたマップの.removeメソッドを使用できます。これは、マップに関連付けられたすべてのリソース（DOM 要素、イベントバインディング、Web ワーカー、WebGL リソース）をクリーンアップして解放します。

map.remove();

.remove()を呼び出した後、マップで他のメソッドを呼び出してはいけません。

React ユーザーの場合：

コンポーネントのアンマウント時にマップを削除しないと、アプリケーションでメモリリークが発生する可能性があります。React useEffectフックの戻り値またはクラスコンポーネントのcomponentWillUnmountライフサイクルフックで.remove()を呼び出すことをお勧めします。

HTML ウェブサイトにマップを追加する

HTML ウェブサイトにマップを表示するには、以下のスクリプトを HTML ウェブページに追加します。

<link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link>
<script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/core/4.3.0/aws-amplify-core.min.js" integrity="sha384-7Oh+5w0l7XGyYvSqbKi2Q7SA5K640V5nyW2/LEbevDQEV1HMJqJLA1A00z2hu8fJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/auth/4.3.8/aws-amplify-auth.min.js" integrity="sha384-jfkXCEfYyVmDXYKlgWNwv54xRaZgk14m7sjeb2jLVBtUXCD2p+WU8YZ2mPZ9Xbdw" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/geo/1.1.0/aws-amplify-geo.min.js" integrity="sha384-TFMTyWuCbiptXTzvOgzJbV8TPUupG1rA1AVrznAhCSpXTIdGw82bGd8RTk5rr3nP" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.1.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-7/RxWonKW1nM9zCKiwU9x6bkQTjldosg0D1vZYm0Zj+K/vUSnA3sOMhlRRWAtHPi" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

次に、マップをレンダリングしたいウェブページの任意の場所にid="map"の div 要素を追加します。以下のコードスニペットを含めて、Amplify を構成し（amplify_outputs.jsonファイルパスを適宜更新）、マップをインスタンス化します。

<script type="module">
  import outputs from './amplify_outputs.json' assert { type: 'json' };
  const { Amplify } = aws_amplify_core;
  const { createMap } = AmplifyMapLibre;
  Amplify.configure(outputs);
  createMap({
    container: 'map',
    center: [-123.1187, 49.2819], // [経度、緯度]
    zoom: 13

サンプルアプリケーション

<!DOCTYPE html>
        <meta charset="utf-8">
        <title>ウェブページにマップを表示する</title>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
        <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" integrity="sha384-DrPVD9GufrxGb7kWwRv0CywpXTmfvbKOZ5i5pN7urmIThew0zXKTME+gutUgtpeD" crossorigin="anonymous" referrerpolicy="no-referrer"></link>
        <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.15.2/maplibre-gl.js" integrity="sha384-rwYfkmAOpciZS2bDuwZ/Xa/Gog6jXem8D/whm3wnsZSVFemDDlprcUXHnDDUcrNU" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.amplify.aws/packages/core/5.0.5/aws-amplify-core.min.js" integrity="sha384-eM2urkpomL9SRm/kuPHZG3XPEItAiUAAyotT/AqlhSus8iAqs/EfHaYy1Jn5ih7K" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.amplify.aws/packages/auth/5.0.5/aws-amplify-auth.min.js" integrity="sha384-H25CFLYd7YHa1Oib73fs3kJN36VhaHHkLjo4AhGrhJ4HuKam05pg2/0t2MR6epun" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.amplify.aws/packages/geo/2.0.5/aws-amplify-geo.min.js" integrity="sha384-Esc9xx0X7ckb/yeYHuYsZGqBB4FwYr98NFHS3BRXLeRE/eB0uVrad2w+G6cGxYb5" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.5.0/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-9kJyZavd3Jk6QzHeaLpugVonfZmZZZdixek6uglOwzKtZvDS9K3W4dshw1uswmlV" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <style>
            body { margin: 0; padding: 0; }
            #map { position: absolute; top: 0; bottom: 0; width: 100%; }
        </style>
    </head>
        <div id="map"></div>
        <script type="module">
            import outputs from "./amplify_outputs.json" assert { type: "json" };
            const { Amplify } = aws_amplify_core;
            const { createMap } = AmplifyMapLibre;
            Amplify.configure(outputs);
            createMap({
                container: "map",
                center: [-123.1187, 49.2819], // [経度、緯度]
                zoom: 13,
        </script>
    </body>

マップ API

現在構成されているマップについての詳細情報が必要な場合、またはプログラムでマップを切り替える方法が必要な場合、@aws-amplify/geoパッケージは現在プロビジョニングされているマップについてより多くの情報を返す API を提供します。

まず、@aws-amplify/geoパッケージから Geo をインポートする必要があります。

import { Geo } from '@aws-amplify/geo';

getAvailableMaps

getAvailableMapsは、Amplify プロジェクトで現在プロビジョニングされているマップリソースを返します。これらの異なるマップのいずれかに切り替えて、それらの異なるマップスタイルを表示できます。

API

Geo.getAvailableMaps() => Promise<AmazonLocationServiceMapStyle[]>;

パラメータ

戻り値

getAvailableMapsからの戻り値は、mapName、style、およびregionの配列であるAmazonLocationServiceMapStyle[]に解決する Promise です。

各オブジェクトには以下のプロパティがあります：

mapName - 作成したマップの名前。
style - マップの作成に使用された Amazon Location Service スタイル。
region - マップがホストされている AWS リージョン。

注： Amplify と MapLibre でマップを変更する場合、setStyle関数はスタイルではなく Location Service マップの名前で呼び出す必要があります。これは、transformRequest関数が Location Service マップ名を使用してマップタイルデータに対する新しいリクエストを行うためです。

例

const availableMaps = await Geo.getAvailableMaps();
map.setStyle(availableMaps[0].mapName);

getDefaultMap

getDefaultMapは、デフォルトマップオブジェクトを取得するために使用されます。

API

Geo.getDefaultMap() => Promise<AmazonLocationServiceMapStyle>;

パラメータ

戻り値

getDefaultMapからの戻り値は、AmazonLocationServiceMapStyle オブジェクトに解決する Promise です。

オブジェクトには以下のプロパティがあります：

mapName - 作成したマップの名前。
style - マップの作成に使用された Amazon Location Service スタイル。
region - マップがホストされている AWS リージョン。

例

const defaultMap = await Geo.getDefaultMap();