Amazon Location ServiceとMapLibre GL JSとAWS AmplifyとVue.jsを組み合わせてマップアプリケーションを構築してみた

Amplify Boost Up #01 発表資料
https://aws-amplify-jp.connpass.com/event/217715

Google Slides
https://docs.google.com/presentation/d/e/2PACX-1vS6nCeulMm_paP0osUpnHTyLAMQpjgGBdCTvv5Ao_Hs58WbNM2eEmgkl-5sGNniF5HKjs2bPML183rx/pub?start=false&loop=false&delayms=3000

Transcript

1. Amazon Location ServiceとMapLibre GL
   JSとAWS AmplifyとVue.jsを組み合わせて
   マップアプリケーションを構築してみた
   Yasunori Kirimoto
   2021.07.30
   Amplify Boost Up #01
   © MIERUNE © MapTiler © OpenStreetMap contributors
   

   View Slide

2. Amplify Boost Up #01 開催おめでとうございます
   © MIERUNE © OpenStreetMap contributors © 2021 HERE
   

   View Slide

3. Location-based Architect
   Yasunori Kirimoto
   Owner of
   Co-founder of
   組織マネジメントしたり、個人開発したり、家族 3人とイヌ
   と暮らしています
   

   View Slide

4. 会社紹介資料

   Last Update – 5th Feb.2021
   位置と情報で
   世界を変える
   © MIERUNE © MapTiler © OpenStreetMap contributors
   

   View Slide

5. © MIERUNE © MapTiler © OpenStreetMap contributors
   

   View Slide

6. dayjournal.booth.pm
   

   View Slide

7. View Slide

8. Amazon Location Service を知っているかたいますか
   © MIERUNE © OpenStreetMap contributors © 2021 HERE
   

   View Slide

9. als.mierune.io
   © MIERUNE © OpenStreetMap contributors © 2021 HERE
   

   View Slide

10. 会社紹介資料

    Last Update – 5th Feb.2021
    

    View Slide

11. 会社紹介資料

    Last Update – 5th Feb.2021
    Contents
    1. AWS Amplify
    2. Amazon Location Service
    3. まとめ
    © MIERUNE © MapTiler © OpenStreetMap contributors
    

    View Slide

12. AWS Amplify
    © MIERUNE © OpenStreetMap contributors © 2021 HERE
    

    View Slide

13. MIERUNEのAmazon Location Serviceサンプルの裏側をざっくりと！
    ● フロントエンドとAWSで実装
    ● Amplify Analyticsの設定
    ● CloudWatchの設定
    ● AmplifyのCI/CD設定
    ● ALSのポリシーをアタッチ
    アプリケーション構成
    

    View Slide

14. View Slide

15. View Slide

16. AWS AmplifyとAmplify UI VueとVue.jsでログイン機能を構築してみた
    

    View Slide

17. AWS AmplifyとAmplify UI VueとVue.jsでログイン機能を構築してみた
    

    View Slide

18. View Slide

19. Amazon Location Service
    © MIERUNE © OpenStreetMap contributors © 2021 HERE
    

    View Slide

20. 　　　 Amazon Location Service MapLibre GL JS AWS Amplify Vue.js
    

    View Slide

21. 好きなマップスタイルを選択することで背景
    地図を利用することができます。
    既存のマップスタイルでは、日本語化対応が
    されていないため、独自で日本語化対応と日
    本向けのマップスタイルを作成しました。
    地図表示
    

    View Slide

22. Before After
    Amazon Location Serviceのマップスタイルを日本対応にする
    © MIERUNE © OpenStreetMap contributors © 2021 HERE
    

    View Slide

23. Amazon Location ServiceとMapLibre GL JSとAWS Amplifyと
    Vue.jsを組み合わせてマップアプリケーションを構築してみた
    © MIERUNE © OpenStreetMap contributors © 2021 HERE
    

    View Slide

24. Amazon Location ServiceとMapLibre GL JSとAWS Amplifyと
    Vue.jsを組み合わせてマップアプリケーションを構築してみた
    © MIERUNE © OpenStreetMap contributors © 2021 HERE
    

    View Slide

25. 出発地と目的地を指定することでルートデー
    タを取得することができます。
    地図画面上で始点と終点の2点をクリックす
    ることで、マーカーを追加し、検索結果の
    ルートをハイライト表示する機能を実装しまし
    た。レスポンスが非常に高速です。
    ルート検索
    © MIERUNE © OpenStreetMap contributors © 2021 HERE
    

    View Slide

26. Amazon Location Serviceでルート検索機能を構築してみた
    © MIERUNE © OpenStreetMap contributors © 2021 HERE
    

    View Slide

27. キーワードを指定することで該当する住所
    データを取得することができます。
    キーワードを入力することで、検索結果の住
    所へ移動し、マーカーの追加と住所情報を
    ポップアップ表示する機能を実装しました。レ
    スポンスが非常に高速なため、オートコンプ
    リート機能も実装しました。
    ジオコーディング
    © MIERUNE © OpenStreetMap contributors © 2021 HERE
    

    View Slide

28. Amazon Location Serviceで住所検索機能を構築してみた
    © MIERUNE © OpenStreetMap contributors © 2021 HERE
    

    View Slide

29. 経緯度を指定することで該当する住所データ
    を取得することができます。
    地図画面上で長押しクリックをすることで、
    マーカーの追加と住所情報をポップアップ表
    示する機能を実装しました。
    逆ジオコーディング
    © MIERUNE © OpenStreetMap contributors © 2021 HERE
    

    View Slide

30. © MIERUNE © OpenStreetMap contributors © 2021 HERE
    

    View Slide

31. まとめ
    © MIERUNE © OpenStreetMap contributors © 2021 HERE
    

    View Slide

32. 会社紹介資料

    Last Update – 5th Feb.2021
    まとめ
    ● Amplifyを利用することでフロントエンドとAWSのみで実
    装
    ● Amazon Location Serviceを利用することで難しい位置
    情報機能も手軽に実装
    ● AWSサービスの組み合わせで統一化
    ● 課金が比較的リーズナブル
    © MIERUNE © MapTiler © OpenStreetMap contributors
    

    View Slide

33. 会社紹介資料

    Last Update – 5th Feb.2021
    課題
    ● AmplifyとAmazon Location Serviceの連携機能が対応
    されるともっと手軽に利用できそう
    ● ベクトルタイルの取得でCognitoの認証関係が毎回必要
    になってしまう
    © MIERUNE © MapTiler © OpenStreetMap contributors
    

    View Slide

34. 会社紹介資料

    Last Update – 5th Feb.2021
    We Are Hiring!
    MIERUNE
    

    View Slide