MapLibreとAmazon Location Service

Slide 1

Slide 1 text

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.

Slide 2

Slide 2 text

自己紹介

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

01　MapLibreとは 02　Amazon Location Serviceとは 03　組み合わせ方法 04　まとめ

Slide 6

Slide 6 text

MapLibreとは 01

Slide 7

Slide 7 text

MapLibre ・Web地図に関するプロダクトを OSSとして開発やメンテナンスをしているOrganization ・ブラウザやモバイル向けの地図ライブラリおよび地図配信に関するツール群を提供・今回はMapLibre GL JSを利用

Slide 8

Slide 8 text

マップアプリケーションを開発していて背景地図を利用するには？ 🤔 住所検索を利用するには？ 🤔 ルート検索を利用するには？ 🤔 地理院タイル

Slide 9

Slide 9 text

Amazon Location Serviceがあります！🗺

Slide 10

Slide 10 text

Amazon Location Serviceとは 02

Slide 11

Slide 11 text

Amazon Location Service ・AWSの環境下で位置情報アプリケーションを構築可能・マップ、ジオコーディング、ルーティング、ジオフェンス、トラッキング等の機能・料金がリーズナブル

Slide 12

Slide 12 text

公式demo - location.aws.com/demo

Slide 13

Slide 13 text

料金の例

Slide 14

Slide 14 text

最近のアップデート・APIキーの対応でFOSS4Gと相性が良い 🎉 ・Amazon Location SDKの公開で開発が手軽に 🎉 ・AWS CDKやAWS CloudFormationのサポートが拡大 🎉

Slide 15

Slide 15 text

Monthly Updates ・Amazon Location Serviceのアップデートまとめ配信 (非公式) ・始めてから3年目

Slide 16

Slide 16 text

AWS Japan公式Webマガジン - builders.flash

Slide 17

Slide 17 text

組み合わせ方法 03

Slide 18

Slide 18 text

AWS CDKとAWS CloudFormationでAmazon Location Serviceのリソースを構築する

Slide 19

Slide 19 text

構成イメージ

Slide 20

Slide 20 text

事前準備・まずはAWSのアカウントを作りましょう！

Slide 21

Slide 21 text

リソースを構築・リソースの作成方法を選択・マネジメントコンソール → GUIで操作・AWS CDK → TypeScript等のコードでインフラを管理・AWS CloudFormation → YAMLやJSONでインフラを管理

Slide 22

Slide 22 text

AWS CDKの例・aws-cdk-templates-showcaseでプロジェクトを公開・Amazon Location Serviceのリソースを手軽に構築可能

Slide 23

Slide 23 text

リソースの確認・マップ、ジオコーディング、ルーティング、API キーの設定を確認・マップ名、ジオコーディング名・ルーティング名、リージョン名、APIキーをコピー

Slide 24

Slide 24 text

アプリケーションを構築・スターターを利用・Amazon Location SDKを利用・コードを書く

Slide 25

Slide 25 text

スターター・maplibregljs-amazon-location- service-starterを利用・MapLibre GL JSとAmazon Location Serviceの環境構築済のスターター

Slide 26

Slide 26 text

Amazon Location SDK ・API認証やMapLibreとの組み合わせをサポート・以前はすべて手動で構築 or Amplify Geo ・現在はAmazon Location SDK or Amplify Geo ・Gen2の登場でAmplify Geoは...

Slide 27

Slide 27 text

コード - package.json ・client-location : Amazon Location Service を操作・amazon-location-utilities-auth- helper : APIキーとAmazon Cognitoの認証・amazon-location-utilities-data types : レスポンスを GeoJSON 形式に変換

Slide 28

Slide 28 text

コード - .env ・マップ名、ジオコーディング名・ルーティング名、リージョン名、APIキーを入力・外部公開時はAPI キーのリファラー設定が必要

Slide 29

Slide 29 text

コード - main.ts ・APIキーの認証設定・指定位置からリバースジオコーディング・ジオコーディングのレスポンスをGeoJSONに変換

Slide 30

Slide 30 text

コード - main.ts ・指定位置でルート検索・ルーティングのレスポンスを GeoJSONに変換・マップを設定

Slide 31

Slide 31 text

コード - main.ts ・ジオコーディング結果のスタイル設定・ジオコーディング結果の情報表示

Slide 32

Slide 32 text

コード - main.ts ・ルーティング結果のスタイル設定・ルーティング結果の情報表示