MapLibreとAmazon Location Service

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.

自己紹介

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

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

MapLibreとは 01

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

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

Amazon Location Serviceがあります！🗺

Amazon Location Serviceとは 02

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

公式demo - location.aws.com/demo

料金の例

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

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

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

組み合わせ方法 03

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

構成イメージ

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ 04

MapLibreとAmazon Location Serviceは相性抜群！地理院タイル

MapLibreとAmazon Location Service

MapLibreとAmazon Location Service

More Decks by Yasunori Kirimoto

Other Decks in Technology

Featured

Transcript