Add a map to your app

geo to appsync

1. Create a map

Let’s start by creating a new Map using Amazon Location Service. Head to the console and click on Amazon Location Service. Expand the left side menu and click on Maps, then Create map. Name the map GraphQlRealTimeRacing, select a Esri type of map, Select ‘yes’ for the simulated data question and click Create map.

2. Add permissions to your Amazon Cognito Identity Pool role

From your cloud9 terminal:

amplify auth console

Select Identity Pool and follow the link to the AWS console. In the Cognito User Pool console, click on Edit identity pool (Top RH Corner).

cup ip

Take note of the name of the Authenticated role. This is the role that your authenticated users can leverage to access AWS resources from the app. Next, go to the AWS IAM console page and locate the role. Add a new inline policy called MapsReadOnly to the role:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "MapsReadOnly",
      "Effect": "Allow",
      "Action": [
        "geo:GetMapStyleDescriptor",
        "geo:GetMapGlyphs",
        "geo:GetMapSprites",
        "geo:GetMapTile"
      ],
      "Resource": "arn:aws:geo:<region>:<account ID>:map/GraphQlRealTimeRacing"
    }
  ]
}

Replace <region> and <account ID> with your specific information.

3. Show the map in your app

Add the following dependencies to your application.

yarn add react-map-gl@5
yarn add -D @types/mapbox-gl@2.1.2
yarn add -D @types/react-map-gl@5.2.9

Then update the file src/pages/Map.tsx:

[ 🌟 ] src/pages/Map.tsx

You should now see a fully functional map centered on our main venue: the Autodromo Nazionale Monza racing circuit. Take a look around!

cup ip