MapLibreとAmazon Location Service

MapLibre Meetup Japan #02 発表資料
https://mug-jp.connpass.com/event/315110

1. MapLibreとAmazon Location Service 2024.04.22 - MapLibre Meetup Japan #02 Yasunori Kirimoto Maptiles by MIERUNE, under CC BY. Data by OpenStreetMap contributors, under ODbL.
2. 自己紹介
3. Yasunori Kirimoto AWS DevTools Hero MapLibre Voting Member OSGeo Charter Member Co-Founder and COO of MIERUNE MapLibre User Group Japan Amplify Japan User Group Notion Sapporo dayjournal 　dayjournal_nori Owner of dayjournal
4. 目次
5. 01　MapLibreとは 02　Amazon Location Serviceとは 03　組み合わせ方法 04　まとめ
6. MapLibreとは 01
7. MapLibre ・Web地図に関するプロダクトを OSSとして開発やメンテナンスを しているOrganization ・ブラウザやモバイル向けの地図 ライブラリおよび地図配信に関す るツール群を提供 ・今回はMapLibre GL JSを利用
8. マップアプリケーションを開発していて 背景地図を利用するには？ 🤔 住所検索を利用するには？ 🤔 ルート検索を利用するには？ 🤔 地理院タイル
9. Amazon Location Serviceがあります！🗺
10. Amazon Location Serviceとは 02
11. Amazon Location Service ・AWSの環境下で位置情報アプリ ケーションを構築可能 ・マップ、ジオコーディング、 ルーティング、ジオフェンス、ト ラッキング等の機能 ・料金がリーズナブル
12. 公式demo - location.aws.com/demo
13. 料金の例
14. 最近のアップデート ・APIキーの対応でFOSS4Gと相性が良い 🎉 ・Amazon Location SDKの公開で開発が手軽に 🎉 ・AWS CDKやAWS CloudFormationのサポートが拡大 🎉
15. Monthly Updates ・Amazon Location Serviceのアッ プデートまとめ配信 (非公式) ・始めてから3年目
16. AWS Japan公式Webマガジン - builders.flash
17. 組み合わせ方法 03
18. AWS CDKとAWS CloudFormationでAmazon Location Serviceのリソースを構築する
19. 構成イメージ
20. 事前準備 ・まずはAWSのアカウントを作りましょう！
21. リソースを構築 ・リソースの作成方法を選択 ・マネジメントコンソール → GUIで操作 ・AWS CDK → TypeScript等のコードでインフラを管理 ・AWS CloudFormation → YAMLやJSONでインフラを管理
22. AWS CDKの例 ・aws-cdk-templates-showcaseで プロジェクトを公開 ・Amazon Location Serviceのリ ソースを手軽に構築可能
23. リソースの確認 ・マップ、ジオコーディング、 ルーティング、API キーの設定を 確認 ・マップ名、ジオコーディング名 ・ルーティング名、リージョン 名、APIキーをコピー
24. アプリケーションを構築 ・スターターを利用 ・Amazon Location SDKを利用 ・コードを書く
25. スターター ・maplibregljs-amazon-location- service-starterを利用 ・MapLibre GL JSとAmazon Location Serviceの環境構築済のス ターター
26. Amazon Location SDK ・API認証やMapLibreとの組み合 わせをサポート ・以前はすべて手動で構築 or Amplify Geo ・現在はAmazon Location SDK or Amplify Geo ・Gen2の登場でAmplify Geoは...
27. コード - package.json ・client-location : Amazon Location Service を操作 ・amazon-location-utilities-auth- helper : APIキーとAmazon Cognitoの認証 ・amazon-location-utilities-data types : レスポンスを GeoJSON 形式に変 換
28. コード - .env ・マップ名、ジオコーディング名 ・ルーティング名、リージョン 名、APIキーを入力 ・外部公開時はAPI キーのリファ ラー設定が必要
29. コード - main.ts ・APIキーの認証設定 ・指定位置からリバースジオコー ディング ・ジオコーディングのレスポンス をGeoJSONに変換
30. コード - main.ts ・指定位置でルート検索 ・ルーティングのレスポンスを GeoJSONに変換 ・マップを設定
31. コード - main.ts ・ジオコーディング結果のスタイ ル設定 ・ジオコーディング結果の情報表 示
32. コード - main.ts ・ルーティング結果のスタイル設 定 ・ルーティング結果の情報表示
33. まとめ 04
34. MapLibreとAmazon Location Serviceは 相性抜群！ 地理院タイル