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.
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 mapconst 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 resourceconst 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 rolesbackend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);
// patch the map resource to the expected output configurationbackend.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:
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.
import { Amplify } from 'aws-amplify';import outputs from '../amplify_outputs.json';Amplify.configure(outputs);
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
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.