Amplify Geo for AWS Amplify を試してみる

AWS Amplify に AWS Location Serviceのリソースを作成してくれる Amplify Geo のデベロッパープレビューが公開されたので試してみた。

できたものはこちらです。

amplifygeo-20210929141446-hostingbucket-dev.s3-website-ap-northeast-1.amazonaws.com

aws.amazon.com

実は AWS Location Serviceが出た頃に Location Service は試していて、以下のような簡単なアプリケーションを作っていたのだけど、

master.d1h878o7did8z6.amplifyapp.com

地図にピンを刺すだけ

Amplify Geo を使うとこんな感じの機能をもっと簡単に作れるようになる。

Amplify CLIの最新版を入れて amplify add geoをするだけ。 （自分が最初にインストールしたときは @aws-amplify/cli@geo をインストールする必要があったけど今は変わったっぽい？）

ちなみにまだプレビュー版だけあって大きめな変更がちょくちょく入っているみたい。 自分のときはドキュメントに従って Location Serviceのリソースを作成しても No map resources found in amplify config というエラーが出て地図が表示されずかなり長い間ハマっていた。

https://docs.amplify.aws/lib/geo/getting-started/q/platform/js/

地図を表示するためのコードはこのような感じ。Vueでやっているけどフレームワーク関係なく同じように書いてあげればできると思う。

<template>
  <div id="app">
    <h2>Amplify Geo</h2>
    <div id="map"></div>
  </div>
</template>

<script>
import { createMap } from "maplibre-gl-js-amplify";
import "maplibre-gl/dist/maplibre-gl.css";

export default {
  name: 'App',
  async created() {
    await createMap({
      container: "map",
      center: [137.7335629, 34.7023743],
      zoom: 12,
      region: "ap-northeast-1"
    })
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 20px;
}

#map { 
  /* The id of the container you passed to createMap */
  position: absolute;
  top: 14%;
  bottom: 0;
  height: 80%;
  width: 100%;
}
</style>

ソースコードはこちら。次は Location Searchを組み込んでみたい。

github.com