Amazon Location Service入門ワークショップ-マップの操作
2023/02/05
目次
関連記事
- Amazon Location Service入門ワークショップの前提環境準備
- Amazon Location Service入門ワークショップ-ジオコーディング
- Amazon Location Service入門ワークショップ-ルート計算
- Amazon Location Service入門ワークショップ-トラッカー
- Amazon Location Service入門ワークショップ-ジオフェンス
マップのテスト
ワークショップ手順では新しいマップをマネジメントコンソールからマップを新規作成して、configuration.jsを変更となってますが、Cognito IDプールのResourceのARNを工夫しないとですね。
なので、後でWorkshopMapをWorkshopMap*に変更しました。
1 2 3 4 5 6 |
export const MAP = { NAME: "WorkshopMap-2", STYLE: "VectorEsriStreets", resource }; |
動的なマップの変更
「試してみよう
動的にマップのスタイルを変更できるサンプルコードはここにあります」
にチャレンジしました。
マップスタイル変更ラジオボタンを配置して変更できるようにしました。
「試してみよう」の先にあるサンプルコードを参照しました。
変更した箇所は次です。
MapControl.jsxとMapControl.module.cssを追加
サンプルコードからコピペでcomnentsディレクトリに追加しました。
configuration.jsの変更
MAPをMAPSとして配列に変更しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//export const MAP = { // NAME: "WorkshopMap-2", // REQUIRED - Amazon Location Service map resource name // STYLE: "VectorEsriNavigation", // REQUIRED - String representing the style of map resource //}; export const MAPS = [ { NAME: "WorkshopMap", // REQUIRED - Amazon Location Service Map resource name STYLE: "VectorEsriStreets", // REQUIRED - String representing the style of map resource LABEL: "WorkshopMap", // REQUIRED - Text to be displayed for the map in the layer control box }, { NAME: "WorkshopMap-2", // REQUIRED - Amazon Location Service Map resource name STYLE: "VectorEsriNavigation", // REQUIRED - String representing the style of map resource LABEL: "WorkshopMap-2", // REQUIRED - Text to be displayed for the map in the layer control box }, ]; |
App.jsxに必要なモジュールとコードを追加
1 2 3 4 5 |
import React, { useState, useEffect, useMemo } from "react"; import Amplify, { Auth,Geo } from "aws-amplify"; import { IDENTITY_POOL_ID, REGION, MAPS, PLACE } from "./configuration"; import MapControl from "./components/MapControl"; |
useMemoとGeoを追加。
MAPをMAPSに変更。
MapControlを追加。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
maps: { items: { //[MAP.NAME]: { // REQUIRED - Amazon Location Service Map resource name // style: MAP.STYLE, // REQUIRED - String representing the style of map resource //}, //}, //default: MAP.NAME, // REQUIRED - Amazon Location Service Map resource name to set as default [MAPS[0].NAME]: { // REQUIRED - Amazon Location Service Map resource name style: [MAPS[0].STYLE], // REQUIRED - String representing the style of map resource }, [MAPS[1].NAME]: { // REQUIRED - Amazon Location Service Map resource name style: [MAPS[1].STYLE], // REQUIRED - String representing the style of map resource }, }, default: [MAPS[0].NAME], // REQUIRED - Amazon Location Service Map resource name to set as default }, |
mapsを複数マップに対応。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const geoConfig = useMemo(() => Geo.getDefaultMap(), []); const [transformRequest, setTransformRequest] = useState(); const styleProps = useMemo( () => ({ height: "100vh", position: "relative", width: "100vw", }), [] ); const [visibleMap, setVisibleMap] = useState(geoConfig.mapName[0]); const handleMapChange = (map) => { setVisibleMap(map); }; |
必要な定数を追加。
1 2 3 |
//mapStyle={MAP.NAME} mapStyle={visibleMap} |
mapStyleを変更
1 2 3 4 5 6 7 8 9 10 11 |
<NavigationControl position="bottom-right" showCompass={false} style={{ left: 20, top: 20 }} /> <MapControl maps={Geo.getAvailableMaps()} visibleMap={visibleMap} onMapChange={handleMapChange} /> |
NavigationControlを変更して、MapControlを追加。
起動時の座標変更
「チャレンジ
現在、起動時のマップはバンクーバーに設定されています。別の地点に変更してみましょう。」
にチャレンジしました。
App.jsxを変更
1 2 3 4 5 6 7 8 |
initialViewState={{ //longitude: -123.1187, //latitude: 49.2819, longitude: -122.333144, latitude: 47.626353, zoom: 11, }} |
initialViewStateの座標を変えました。
検索してピンとポップアップを確認する
左上の検索フィールドに住所を入力して検索結果のピンからポップアップを確認しました。
ポリゴン
任意の範囲を半透明グレーで表示できました。
ルート検索
Routesを押下して、2つのポイントを追加して、[Caluculate]を押下しました。
ひっかけ橋から大阪城までウォーキングで54分との結果が出ました。
歩けますね。
最後までお読みいただきましてありがとうございました!
「AWS認定資格試験テキスト&問題集 AWS認定ソリューションアーキテクト - プロフェッショナル 改訂第2版」という本を書きました。

「AWS認定資格試験テキスト AWS認定クラウドプラクティショナー 改訂第3版」という本を書きました。

「ポケットスタディ AWS認定 デベロッパーアソシエイト [DVA-C02対応] 」という本を書きました。

「要点整理から攻略するAWS認定ソリューションアーキテクト-アソシエイト」という本を書きました。

「AWSではじめるLinux入門ガイド」という本を書きました。


開発ベンダー5年、ユーザ企業システム部門通算9年、ITインストラクター5年目でプロトタイプビルダーもやりだしたSoftware Engineerです。
質問はコメントかSNSなどからお気軽にどうぞ。
出来る限りなるべく答えます。
このブログの内容/発言の一切は個人の見解であり、所属する組織とは関係ありません。
このブログは経験したことなどの共有を目的としており、手順や結果などを保証するものではありません。
ご参考にされる際は、読者様自身のご判断にてご対応をお願いいたします。
また、勉強会やイベントのレポートは自分が気になったことをメモしたり、聞いて思ったことを書いていますので、登壇者の意見や発表内容ではありません。
ad
ad
関連記事
-
-
AWS Lambda(Python3)でSelenium + Chrome Headless + でwebスクレイピングする
インターネット上に公開されている情報をDynamoDBにつっこみたいだけなので、 …
-
-
AWS SSOのパスワードリマインダーでADのパスワードを変更
AWS Managed Microsoft ADを構築してユーザー追加までで構築 …
-
-
AWS CloudHSMを起動してみました
なかなか触る機会のないサービス、CloudHSM。 起動してみました。 手順はユ …
-
-
AlexaにAWSの最新Feedを読み上げてもらう(Lambda Python)
年末にAmazon Echo Dotを購入しましたので、練習がてらAlexaスキ …
-
-
S3 過去のオブジェクトバージョンをコピーしてロールバックしました
バージョニングを有効にしているS3バケットで、オブジェクトを以前のバージョンに戻 …
-
-
5分でAlexaスキルを作る
「JAWS-UG Osaka 第22回勉強会 東西の中の人が語る!!! Micr …
-
-
AWS Toolkit for Eclipseをセットアップ(2021年版)
AWS Toolkit for Eclipseをセットアップするで6年前に書いて …
-
-
Backlogの実績工数をAmazon QuickSightでの可視化 – 仕組み編
Backlogの実績工数をAmazon QuickSightで可視化してわかった …
-
-
AWS CloudFormationデプロイタイムラインビューを確認しました
2024/11/11にタイムラインビューを使用して AWS CloudForma …
-
-
AWS WAF Web ACLとルールをv1(Classic)からv2に自動移行しました
新しいものは、課題が解決されていたり、機能追加されたりするのでいいものです。 長 …