Amazon Location Service入門ワークショップ-マップの操作

2023/02/04 2023/02/05

マップのテスト

ワークショップ手順では新しいマップをマネジメントコンソールからマップを新規作成して、configuration.jsを変更となってますが、Cognito IDプールのResourceのARNを工夫しないとですね。
なので、後でWorkshopMapをWorkshopMap*に変更しました。

export const MAP = {
  NAME: "WorkshopMap-2",
  STYLE: "VectorEsriStreets",
resource
};

export const MAP = {

NAME: "WorkshopMap-2",

STYLE: "VectorEsriStreets",

resource

};

動的なマップの変更

「試してみよう
動的にマップのスタイルを変更できるサンプルコードはここにあります」
にチャレンジしました。

マップスタイル変更ラジオボタンを配置して変更できるようにしました。
「試してみよう」の先にあるサンプルコードを参照しました。
変更した箇所は次です。

MapControl.jsxとMapControl.module.cssを追加

サンプルコードからコピペでcomnentsディレクトリに追加しました。

configuration.jsの変更

MAPをMAPSとして配列に変更しました。

//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
  },
];

//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に必要なモジュールとコードを追加

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";

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を追加。

      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: {

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を複数マップに対応。

  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);
  };

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);

};

必要な定数を追加。

//mapStyle={MAP.NAME}
mapStyle={visibleMap}

//mapStyle={MAP.NAME}

mapStyle={visibleMap}

mapStyleを変更

<NavigationControl 
  position="bottom-right"
  showCompass={false}
  style={{ left: 20, top: 20 }}
/>
<MapControl
  maps={Geo.getAvailableMaps()}
  visibleMap={visibleMap}
  onMapChange={handleMapChange}
/>

<NavigationControl

position="bottom-right"

showCompass={false}

style={{ left: 20, top: 20 }}

<MapControl

maps={Geo.getAvailableMaps()}

visibleMap={visibleMap}

onMapChange={handleMapChange}

NavigationControlを変更して、MapControlを追加。

起動時の座標変更

「チャレンジ
現在、起動時のマップはバンクーバーに設定されています。別の地点に変更してみましょう。」
にチャレンジしました。

App.jsxを変更

initialViewState={{
  //longitude: -123.1187,
  //latitude: 49.2819,
  longitude: -122.333144,
  latitude: 47.626353,
  zoom: 11,
}}

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認定クラウドプラクティショナー改訂第2版」という本を書きました。

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

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

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

@yamamanx

開発ベンダー5年、ユーザ企業システム部門通算9年、ITインストラクター5年目でプロトタイプビルダーもやりだしたSoftware Engineerです。
質問はコメントかSNSなどからお気軽にどうぞ。
出来る限りなるべく答えます。

このブログの内容/発言の一切は個人の見解であり、所属する組織とは関係ありません。
このブログは経験したことなどの共有を目的としており、手順や結果などを保証するものではありません。
ご参考にされる際は、読者様自身のご判断にてご対応をお願いいたします。

また、勉強会やイベントのレポートは自分が気になったことをメモしたり、聞いて思ったことを書いていますので、登壇者の意見や発表内容ではありません。

- AWS AWS, locationservice

: JAWS-UG 大阪関西女子合同 Amazon Personalizeハンズオンやってみました

久しぶりに大阪でJAWS-UGに参加です。 Amazon Personalize …

: Amazon LinuxのNginx+RDS MySQLにレンタルWebサーバーからWordPressを移設する(失敗、手戻りそのまま記載版)

勉強のためブログサイトを長らくお世話になったロリポップさんから、AWSに移設する …

: Amazon Data Lifecycle Manager(DLM)が東京リージョンで使えるようになったのでLambdaでAMI自動取得から乗り換えた

EBSのスナップショットを自動で作成してくれるAmazon Data Lifec …

: AWS Systems Managerパラメータストアで「Parameter name must be a fully qualified name.」

パラメータストアでパラメータ階層を作成しようとして、パラメータ名に例えば「wor …

: よくあるサーバーレスアーキテクチャで質問フォーム

この記事はServerless2 Advent Calendar 2018に参加 …

: AtomエディタでEC2のファイルを直接編集する

Webページを編集していてEC2のファイルをvimエディタでさわったりしています …

: 「JAWS-UG朝会 #18」で主にAWSなブログについて発表をしました

ラジオ体操いつものラジオ体操から。今日はラーニングセンターから配信の日でした …

: RedmineをELB(ALB)でAutoScalingグループへ負荷分散

高可用なRedmineを作るためのELBの設定です。高可用なRedmine R …

: AWS DataLake 構築ハンズオンに行ってきました

AWSJ大阪が増床されて2019年10月限定でAWS pop-up loftとい …

: 「JAWS-UG 名古屋 2022年 “re:Invent”の復習~忘年会~」に参加しました

re:Inventのおみやげも飲み物、ピザ、お寿司もたくさん。コラボベースさん …

PREV: Amazon Location Service入門ワークショップの前提環境準備
NEXT: Amazon Location Service入門ワークショップ-ジオコーディング

Amazon Location Service入門ワークショップ-マップの操作

関連記事

マップのテスト

動的なマップの変更

MapControl.jsxとMapControl.module.cssを追加

configuration.jsの変更

App.jsxに必要なモジュールとコードを追加

起動時の座標変更

App.jsxを変更

検索してピンとポップアップを確認する

ポリゴン

ルート検索

ad

ad

関連記事

JAWS-UG 大阪関西女子合同 Amazon Personalizeハンズオンやってみました

Amazon LinuxのNginx+RDS MySQLにレンタルWebサーバーからWordPressを移設する(失敗、手戻りそのまま記載版)

Amazon Data Lifecycle Manager(DLM)が東京リージョンで使えるようになったのでLambdaでAMI自動取得から乗り換えた

AWS Systems Managerパラメータストアで「Parameter name must be a fully qualified name.」

よくあるサーバーレスアーキテクチャで質問フォーム

AtomエディタでEC2のファイルを直接編集する

「JAWS-UG朝会 #18」で主にAWSなブログについて発表をしました

RedmineをELB(ALB)でAutoScalingグループへ負荷分散

AWS DataLake 構築ハンズオンに行ってきました

「JAWS-UG 名古屋 2022年 “re:Invent”の復習~忘年会~」に参加しました