Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Page updated May 14, 2024

Set up Amplify Geo

Amplify provides APIs and map UI components for maps and location search for your web apps.You can add maps and location search functionality to your app in just a few lines of code. The following is an example utilizing the AWS Cloud Development Kit (AWS CDK) to create a Geo resource powered by Amazon Location Services. But do note there are no official hand-written (L2) constructs for this service yet.

amplify/backend.ts
import { defineBackend } from "@aws-amplify/backend";
import { Policy, PolicyStatement } from "aws-cdk-lib/aws-iam";
import { CfnMap } from "aws-cdk-lib/aws-location";
import { Stack } from "aws-cdk-lib/core";
import { auth } from "./auth/resource";
import { data } from "./data/resource";
const backend = defineBackend({
auth,
data,
// additional resources
});
const geoStack = backend.createStack("geo-stack");
// create a location services map
const map = new CfnMap(geoStack, "Map", {
mapName: "myMap",
description: "Map",
configuration: {
style: "VectorEsriNavigation",
},
pricingPlan: "RequestBasedUsage",
tags: [
{
key: "name",
value: "myMap",
},
],
});
// create an IAM policy to allow interacting with geo resource
const myGeoPolicy = new Policy(geoStack, "GeoPolicy", {
policyName: "myGeoPolicy",
statements: [
new PolicyStatement({
actions: [
"geo:GetMapTile",
"geo:GetMapSprites",
"geo:GetMapGlyphs",
"geo:GetMapStyleDescriptor",
],
resources: [map.attrArn],
}),
],
});
// apply the policy to the authenticated and unauthenticated roles
backend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);
backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);
// patch the map resource to the expected output configuration
backend.addOutput({
geo: {
aws_region: geoStack.region,
maps: {
items: {
[map.mapName]: {
style: "VectorEsriNavigation",
},
},
default: map.mapName,
},
},
});

Configure your application

To display a map in your application, you can use the Amplify React MapView component or the MapLibre GL with maplibre-gl-js-amplify libraries are required.

Install the necessary dependencies by running the following command:

Terminal
npm add aws-amplify @aws-amplify/geo

Note: Make sure that version 6.0.0 or above is installed.

Import and load the configuration file in your app. It's recommended you add the Amplify configuration step to your app's root entry point.

src/index.js
import { Amplify } from 'aws-amplify';
import outputs from '../amplify_outputs.json';
Amplify.configure(outputs);

Make sure you call Amplify.configure as early as possible in your application’s life-cycle. A missing configuration or NoCredentials error is thrown if Amplify.configure has not been called before other Amplify JavaScript APIs.

Notes:

  • If you want to use existing Amazon Location Service resources follow this guide instead.
  • If you want to use Amazon Location Service APIs not directly supported by Geo, use the escape hatch to access the Amazon Location Service SDK.

References

Location Construct Library

Map Pricing Plan

The pricing plan for the Map example is set to RequestBasedUsage. We advice you to go through the location service pricing along with the location service terms (82.5 section) to learn more about the pricing plan.