Page updated Mar 12, 2024

Geo

Under active development: The addOutput method for Amplify Gen 2 is under active development. The experience may change between versions of @aws-amplify/backend. Try it out and provide feedback at https://github.com/aws-amplify/amplify-backend/issues/new/choose

Amplify provides APIs and map UI components for maps and location search for your web apps. The following is an example utilizing the AWS Cloud Development Kit (AWS CDK) to create a Geo resource powered by Amazon Location Services.

amplify/backend.ts
1import { CfnMap } from "aws-cdk-lib/aws-location";
2
3const backend = defineBackend({
4 auth,
5 data,
6 // additional resources
7});
8
9const geoStack = backend.createStack("geo-stack");
10
11// create a location services map
12const map = new CfnMap(geoStack, "Map", {
13 mapName: "myMap",
14 description: "Map",
15 configuration: {
16 style: "VectorEsriNavigation",
17 },
18 pricingPlan: "RequestBasedUsage",
19 tags: [
20 {
21 key: "name",
22 value: "myMap",
23 },
24 ],
25});
26
27// create an IAM policy to allow interacting with geo resource
28const myGeoPolicy = new Policy(geoStack, "AuthenticatedUserIamRolePolicy", {
29 policyName: "GeoPolicy",
30 statements: [
31 new PolicyStatement({
32 actions: [
33 "geo:GetMapTile",
34 "geo:GetMapSprites",
35 "geo:GetMapGlyphs",
36 "geo:GetMapStyleDescriptor",
37 ],
38 resources: [map.attrArn],
39 }),
40 ],
41});
42
43// apply the policy to the authenticated and unauthenticated roles
44backend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);
45backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);
46
47// patch the custom map resource to the expected output configuration
48backend.addOutput({
49 geo: {
50 amazon_location_service: {
51 region: Stack.of(geoStack).region,
52 maps: {
53 items: {
54 [map.mapName]: {
55 style: "VectorEsriNavigation",
56 },
57 },
58 default: map.mapName,
59 },
60 },
61 },
62});

Initialize Geo

To initialize Geo you need to configure Amplify with Amplify.configure()

Working with Maps

To display a map in your React app, you can use the Amplify React MapView component or the MapLibre GL with maplibre-gl-js-amplify libraries are required. Refer to the Amplify Geo documentation for more information.

References

Location Construct Library