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
2. Amplify Boost Up #01 開催おめでとうございます © MIERUNE © OpenStreetMap contributors © 2021 HERE
3. Location-based Architect Yasunori Kirimoto Owner of Co-founder of 組織マネジメントしたり、個人開発したり、家族 3人とイヌ と暮らしています
4. 会社紹介資料
 Last Update – 5th Feb.2021 位置と情報で 世界を変える © MIERUNE © MapTiler © OpenStreetMap contributors
5. © MIERUNE © MapTiler © OpenStreetMap contributors
6. dayjournal.booth.pm
8. Amazon Location Service を知っているかたいますか © MIERUNE © OpenStreetMap contributors © 2021 HERE
9. als.mierune.io © MIERUNE © OpenStreetMap contributors © 2021 HERE
10. 会社紹介資料
 Last Update – 5th Feb.2021
11. 会社紹介資料
 Last Update – 5th Feb.2021 Contents 1. AWS Amplify 2. Amazon Location Service 3. まとめ © MIERUNE © MapTiler © OpenStreetMap contributors
12. AWS Amplify © MIERUNE © OpenStreetMap contributors © 2021 HERE
13. MIERUNEのAmazon Location Serviceサンプルの裏側をざっくりと！ • フロントエンドとAWSで実装 • Amplify Analyticsの設定 • CloudWatchの設定 • AmplifyのCI/CD設定 • ALSのポリシーをアタッチ アプリケーション構成
16. AWS AmplifyとAmplify UI VueとVue.jsでログイン機能を構築してみた
17. AWS AmplifyとAmplify UI VueとVue.jsでログイン機能を構築してみた
19. Amazon Location Service © MIERUNE © OpenStreetMap contributors © 2021 HERE
20. 　　　 Amazon Location Service MapLibre GL JS AWS Amplify Vue.js
21. 好きなマップスタイルを選択することで背景 地図を利用することができます。 既存のマップスタイルでは、日本語化対応が されていないため、独自で日本語化対応と日 本向けのマップスタイルを作成しました。 地図表示
22. Before After Amazon Location Serviceのマップスタイルを日本対応にする © MIERUNE © OpenStreetMap contributors © 2021 HERE
23. Amazon Location ServiceとMapLibre GL JSとAWS Amplifyと Vue.jsを組み合わせてマップアプリケーションを構築してみた © MIERUNE © OpenStreetMap contributors © 2021 HERE
24. Amazon Location ServiceとMapLibre GL JSとAWS Amplifyと Vue.jsを組み合わせてマップアプリケーションを構築してみた © MIERUNE © OpenStreetMap contributors © 2021 HERE
25. 出発地と目的地を指定することでルートデー タを取得することができます。 地図画面上で始点と終点の2点をクリックす ることで、マーカーを追加し、検索結果の ルートをハイライト表示する機能を実装しまし た。レスポンスが非常に高速です。 ルート検索 © MIERUNE © OpenStreetMap contributors © 2021 HERE
26. Amazon Location Serviceでルート検索機能を構築してみた © MIERUNE © OpenStreetMap contributors © 2021 HERE
27. キーワードを指定することで該当する住所 データを取得することができます。 キーワードを入力することで、検索結果の住 所へ移動し、マーカーの追加と住所情報を ポップアップ表示する機能を実装しました。レ スポンスが非常に高速なため、オートコンプ リート機能も実装しました。 ジオコーディング © MIERUNE © OpenStreetMap contributors © 2021 HERE
28. Amazon Location Serviceで住所検索機能を構築してみた © MIERUNE © OpenStreetMap contributors © 2021 HERE
29. 経緯度を指定することで該当する住所データ を取得することができます。 地図画面上で長押しクリックをすることで、 マーカーの追加と住所情報をポップアップ表 示する機能を実装しました。 逆ジオコーディング © MIERUNE © OpenStreetMap contributors © 2021 HERE
30. © MIERUNE © OpenStreetMap contributors © 2021 HERE
31. まとめ © MIERUNE © OpenStreetMap contributors © 2021 HERE
32. 会社紹介資料
 Last Update – 5th Feb.2021 まとめ • Amplifyを利用することでフロントエンドとAWSのみで実 装 • Amazon Location Serviceを利用することで難しい位置 情報機能も手軽に実装 • AWSサービスの組み合わせで統一化 • 課金が比較的リーズナブル © MIERUNE © MapTiler © OpenStreetMap contributors
33. 会社紹介資料
 Last Update – 5th Feb.2021 課題 • AmplifyとAmazon Location Serviceの連携機能が対応 されるともっと手軽に利用できそう • ベクトルタイルの取得でCognitoの認証関係が毎回必要 になってしまう © MIERUNE © MapTiler © OpenStreetMap contributors
34. 会社紹介資料
 Last Update – 5th Feb.2021 We Are Hiring! MIERUNE