Amazon location serviceのGeofencingを試してみたらお手軽だった

geofencingとはバーチャル状に柵を作るような機能のことでAmazon location serviceとamplifyを使うとお手軽に実装できる。

import { AmplifyGeofenceControl } from "maplibre-gl-js-amplify";
import { useControl } from "react-map-gl";
import { Geo } from "@aws-amplify/geo";
import "@aws-amplify/ui-react/styles.css";
import "maplibre-gl-js-amplify/dist/public/amplify-ctrl-geofence.css";

export function Geofence() {
    try {
        Geo.listGeofences().then((response) => {
            response.entries.forEach(geofence => console.log(geofence.geofenceId))
        });
    } catch (error) {
        throw error;
    }
    useControl(() => new AmplifyGeofenceControl());

    return (
        <>
            <div></div>
        </>
    );
}

function App() {
  const mapRef = useRef(null);

  return (
    <div>
      <MapView
        initialViewState={{
          latitude: 37.8,
          longitude: -122.4,
          zoom: 14,
        }}
      >
        <Geofence />
      </MapView>
    </div>
  );
}

権限エラーが出るときは

IAMの設定がうまくいっていない場合は以下のようなエラーが出る。