Showing realtime location data

geo to appsync

In this section, you will use combine Amazon Location Service and AWS AppSync to show real time location data from multiple users in your app.

1. Add geofences to your existing collection

new geofences

You’ll add some geofences for some common attraction around the race track:

  • Golf Club Milano
  • Saint Georges Premier Restaurant
  • Parco di Villa Litta
  • Bosco Bellos

Download the attractions.geo.json file. Head to the AWS Console for Amazon Location. Open the Monza Circuit Geofence collection and add new geofences.

new geofences

2. Create a new model to store Location Events

Define a new model that will store your geofence location events.

Open the file graphql-real-time-race/amplify/backend/api/graphqlrealtimerace/schema.graphql

Add the following type to the file:

type LocationEvent @model @auth(rules: [{allow: private, provider: iam, operations: [read, create]}, {allow: private}]) {
  id: ID!
  type: String
  geofenceId: String
  deviceId: String
  sampleTime: String
  longitude: Float
  latitude: Float
}

The type uses the @auth directive to create 2 rules:

  1. {allow: private}: allows all signed-in cognito users to red the events. This is needed to allow users to see location updates in the app
  2. {allow: private, provider: iam, operations: [read, create]}: allows IAM credential users to create and read events. This is needed to allow your Lambda function to add location events

3. Create a Lambda function to store location events

In your cloud9 terminal, in the graphql-real-time-race/ folder, use Amplify to create a new Lambda function called updateLocation.

$ amplify add function
Scanning for plugins...
Plugin scan successful
? Select which capability you want to add: **Lambda function (serverless function)**
? Provide an AWS Lambda function name: **updateLocation**
? Choose the runtime that you want to use: **NodeJS**
? Choose the function template that you want to use: **Hello World**

Available advanced settings:
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration

? Do you want to configure advanced settings? **Yes**
? Do you want to access other resources in this project from your Lambda function? **Yes**
? Select the categories you want this function to have access to. **api**
? Select the operations you want to permit on graphqlrealtimerace **Query**, **Mutation**

You can access the following resource attributes as environment variables from your Lambda function
        API_GRAPHQLREALTIMERACE_GRAPHQLAPIENDPOINTOUTPUT
        API_GRAPHQLREALTIMERACE_GRAPHQLAPIIDOUTPUT
        ENV
        REGION
? Do you want to invoke this function on a recurring schedule? **No**
? Do you want to configure Lambda layers for this function? **No**
? Do you want to edit the local lambda function now? **No**
Successfully added resource updateLocation locally.

The Lambda function is configured with permissions to do queries and mutations on your GraphQL API.

Open the file
graphql-real-time-race/amplify/backend/function/updateLocation/src/index.js.

Update the code:

[ 🌟 ] updateLocation/src/index.js

In this lambda function, the request function is a helper function that signs your GraphQL request with the function’s credentials. The Lambda function is called by EventBridge when the rule set up by Amazon Location Service is triggered. Let’s deploy the changes before adding the Lambda function as a target.

amplify push --yes

4. Add the Lambda function as a target to your EventBridge Rule

Head to the AWS console for Amazon EventBridge. Click on Rules in the left side menu and click on AmazonLocationMonitor-MonzaCircuit. Click on Edit. Add a new Lambda function Target for this rule pointing to your function, then click Update.

new geofences

5. Update your application code

Now, you’ll update your application code to see location update notifications. The updated code subscribes to the subscription OnCreateLocationEvent and shows a notification for each event.

First install some new dependencies

yarn add react-use
yarn add -D @types/zen-observable

Next, add the file attractions.geo.json to the src/data folder.

Then update src/pages/Map.tsx

[ 🌟 ] src/pages/Map.tsx

6. Generate events and view notifications

As before, you can move the red user icon to generate location events on the map. The app shows you the most recent location upates for any user that is in the Monza Circuit area. By using geofences for specific attractions, you could send specific contextual information to a user to let them know about an exciting event/promotion happening at that spot!

new geofences