Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

© MIERUNE © MapTiler © OpenStreetMap contributors

Slide 6

Slide 6 text

dayjournal.booth.pm

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

会社紹介資料
 Last Update – 5th Feb.2021

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

AWS Amplify © MIERUNE © OpenStreetMap contributors © 2021 HERE

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Amazon Location Service © MIERUNE © OpenStreetMap contributors © 2021 HERE

Slide 20

Slide 20 text

　　　 Amazon Location Service MapLibre GL JS AWS Amplify Vue.js

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

© MIERUNE © OpenStreetMap contributors © 2021 HERE

Slide 31

Slide 31 text

まとめ © MIERUNE © OpenStreetMap contributors © 2021 HERE

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

会社紹介資料
 Last Update – 5th Feb.2021 We Are Hiring! MIERUNE