Skip to content

Commit 6c46bc7

Browse files
adding new geo set up page
1 parent 343b87e commit 6c46bc7

File tree

4 files changed

+168
-57
lines changed

4 files changed

+168
-57
lines changed
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Callout } from '@/components/Callout';
2+
import Link from 'next/link';
3+
import classNames from 'classnames';
4+
5+
export const GeoLegacyResourcesBanner = () => {
6+
return (
7+
<Callout backgroundColor="background.error">
8+
Amazon Location Service has introduced new APIs for Maps and Places which
9+
no longer require account-bound resources. Amplify Geo no longer supports
10+
the provisioning of legacy (account-bound) maps and place indices. Please{' '}
11+
<Link
12+
href="https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_location-readme.html"
13+
passHref
14+
className={classNames('amplify-link')}
15+
>
16+
visit the CDK API to learn more about provisioning legacy resources.
17+
</Link>
18+
</Callout>
19+
);
20+
};
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { GeoLegacyResourcesBanner } from './GeoLegacyResourcesBanner';

src/components/Layout/Layout.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import {
3737
} from '@/components/NextPrevious';
3838
import { Modal } from '@/components/Modal';
3939
import { Gen1Banner } from '@/components/Gen1Banner';
40+
import { GeoLegacyResourcesBanner } from '../GeoLegacyResourcesBanner';
4041
import { PinpointEOLBanner } from '@/components/PinpointEOLBanner';
4142
import { LexV1EOLBanner } from '../LexV1EOLBanner';
4243
import { ApiModalProvider } from '../ApiDocs/ApiModalProvider';
@@ -288,6 +289,9 @@ export const Layout = ({
288289
{(isGen1GettingStarted || isGen1HowAmplifyWorks) && (
289290
<Gen1Banner currentPlatform={currentPlatform} />
290291
)}
292+
{asPathWithNoHash.includes('/geo/set-up-geo/') && (
293+
<GeoLegacyResourcesBanner />
294+
)}
291295
{(asPathWithNoHash.includes('/push-notifications/') ||
292296
asPathWithNoHash.includes('/analytics/') ||
293297
asPathWithNoHash.includes('/in-app-messaging/')) && (

src/pages/[platform]/build-a-backend/add-aws-services/geo/set-up-geo/index.mdx

Lines changed: 143 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -27,76 +27,136 @@ export function getStaticProps(context) {
2727
};
2828
}
2929

30-
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)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) to create a Geo resource powered by [Amazon Location Services](https://aws.amazon.com/location/). But do note there are no official hand-written (L2) constructs for this service yet.
30+
In this guide, you will learn how to set up Geo in your Amplify app. You will set up your backend resources, manage their access, and integrate geo maps, place indices, and geofence collections within your application.
31+
32+
If you have not yet created an Amplift app, visit the [quickstart guide](/[platform]/start/quickstart/).
33+
34+
Amazon Location Services now offers independent APIs and UI components for maps and location search for your web apps, eliminating the need to provision these resources. You can add maps, location search (place index), and geofencing functionality to your app in just a few lines of code. Learn more about these resources [here](https://docs.aws.amazon.com/location/latest/developerguide/what-is.html).
35+
36+
## Building your Geo backend
37+
38+
First, create a file `amplify/geo/resource.ts` within your Amplify app. This file will be the location to configure your Geo backend resources. This entails managing access to maps and location search and provisioning geofence collections. For example, you can instantiate a geofence collection, place index, or a map resource by using the `defineMap`, `definePlace`, or `defineCollection` functions and providing a `name` for these resources.
39+
40+
```ts title="amplify/geo/resource.ts"
41+
import {
42+
defineMap,
43+
defineCollection,
44+
definePlace,
45+
} from '@aws-amplify/backend-geo';
46+
47+
export const map = defineMap({
48+
name: 'amplifyMap',
49+
});
50+
51+
export const place = definePlace({
52+
name: 'amplifyPlaceIndex',
53+
});
54+
55+
export const collection = defineCollection({
56+
name: 'amplifyCollection'
57+
});
58+
```
59+
60+
Now, import these resource definitions within your `amplify/backend.ts` file that contains your backend definition. Add these Geo resources to `defineBackend`.
3161

3262
```ts title="amplify/backend.ts"
33-
import { defineBackend } from "@aws-amplify/backend";
34-
import { Policy, PolicyStatement } from "aws-cdk-lib/aws-iam";
35-
import { CfnMap } from "aws-cdk-lib/aws-location";
36-
import { Stack } from "aws-cdk-lib/core";
37-
import { auth } from "./auth/resource";
38-
import { data } from "./data/resource";
39-
40-
const backend = defineBackend({
63+
import { defineBackend } from '@aws-amplify/backend';
64+
import { auth } from './auth/resource.js';
65+
// highlight-next-line
66+
import { map, place, collection } from './geo/resource.js';
67+
68+
defineBackend({
4169
auth,
42-
data,
43-
// additional resources
70+
// highlight-start
71+
map,
72+
place,
73+
collection,
74+
// highlight-end
4475
});
76+
```
77+
78+
To deploy these resources to your cloud sandbox, run the CLI command in your terminal:
79+
<InlineFilter filters={["react", "angular", "javascript", "vue", "nextjs", "react-native"]}>
80+
81+
```bash title="Terminal" showLineNumbers={false}
82+
npx ampx sandbox
83+
```
84+
85+
</InlineFilter>
86+
87+
<InlineFilter filters={["android"]}>
88+
89+
```bash title="Terminal" showLineNumbers={false}
90+
npx ampx sandbox --outputs-out-dir <path_to_app/src/main/res/raw/>
91+
```
92+
93+
</InlineFilter>
94+
95+
<InlineFilter filters={["swift"]}>
96+
97+
```bash title="Terminal" showLineNumbers={false}
98+
npx ampx sandbox --outputs-out-dir <path_to_swift_project>
99+
```
100+
101+
</InlineFilter>
102+
<InlineFilter filters={["flutter"]}>
103+
104+
```bash title="Terminal" showLineNumbers={false}
105+
npx ampx sandbox --outputs-format dart --outputs-out-dir lib
106+
```
107+
108+
</InlineFilter>
45109

46-
const geoStack = backend.createStack("geo-stack");
47-
48-
// create a location services map
49-
const map = new CfnMap(geoStack, "Map", {
50-
mapName: "myMap",
51-
description: "Map",
52-
configuration: {
53-
style: "VectorEsriNavigation",
54-
},
55-
pricingPlan: "RequestBasedUsage",
56-
tags: [
57-
{
58-
key: "name",
59-
value: "myMap",
60-
},
110+
This command will deploy a Geofence Collection to your cloud sandbox and generate access policies to integrate the map and location search resources with your Amplify app.
111+
112+
## Define resource access permissions
113+
114+
All maps, place indices, and geofence collections requested by Amplify Geo are inaccessible by users or other resources by default. Access to these resources must be explicitly granted within the `access` callback of the `defineMap`, `definePlace`, and `defineCollection` functions. Refer to the [access actions](#resource-access-actions) for all resource types to pick appropriate actions for your API access definitions.
115+
116+
The following example shows you how you can set up your map and collection access structure for authorized and guest users.
117+
118+
1. Guests only have access to read into and list geofence collections.
119+
2. Authenticated users can create, read, update, and delete geofence collections while also being able to access the static ma managed by AWS.
120+
121+
```ts title="amplify/geo/resource.ts"
122+
export const map = defineMap({
123+
name: 'amplifyMap',
124+
access: (allow) => [
125+
allow.authenticated.to(['get'])
61126
],
62127
});
63128

64-
// create an IAM policy to allow interacting with geo resource
65-
const myGeoPolicy = new Policy(geoStack, "GeoPolicy", {
66-
policyName: "myGeoPolicy",
67-
statements: [
68-
new PolicyStatement({
69-
actions: [
70-
"geo:GetMapTile",
71-
"geo:GetMapSprites",
72-
"geo:GetMapGlyphs",
73-
"geo:GetMapStyleDescriptor",
74-
],
75-
resources: [map.attrArn],
76-
}),
129+
export const collection = defineCollection({
130+
name: 'amplifyCollection',
131+
access: (allow) => [
132+
allow.authenticated.to(['create', 'read', 'update', 'delete']),
133+
allow.guest.to(['read', 'list']),
77134
],
78135
});
136+
```
137+
138+
## Configure additional geofence collections
139+
140+
Amplify Geo gives you the ability to configure your backend to automatically request and manage multiple geofence collections.
79141

80-
// apply the policy to the authenticated and unauthenticated roles
81-
backend.auth.resources.authenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);
82-
backend.auth.resources.unauthenticatedUserIamRole.attachInlinePolicy(myGeoPolicy);
83-
84-
// patch the map resource to the expected output configuration
85-
backend.addOutput({
86-
geo: {
87-
aws_region: geoStack.region,
88-
maps: {
89-
items: {
90-
[map.mapName]: {
91-
style: "VectorEsriNavigation",
92-
},
93-
},
94-
default: map.mapName,
95-
},
96-
},
142+
You can define these additional geofence collections by reusing the `defineCollection` function while providing a unique `name` to identify the collection. You can configure specific access permissions to these collections by adding them to the API with the unique `name`.
143+
144+
<Callout info>
145+
146+
**Note**: If numerous geofence collections are defined, then one of them must be marked as default using the `isDefault` flag.
147+
148+
</Callout>
149+
150+
```ts title="amplify/geo/resource.ts"
151+
export const firstCollection = defineCollection({
152+
name: 'firstCollection',
153+
isDefault: true
97154
});
98-
```
99155

156+
export const secondCollection = defineCollection({
157+
name: 'secondCollection'
158+
});
159+
```
100160

101161
<InlineFilter filters={['javascript', "angular", "react", "vue", "react-native", "nextjs"]}>
102162

@@ -420,6 +480,32 @@ Initialized Amplify
420480

421481
[Location Construct Library](https://docs.aws.amazon.com/cdk/api/v2/docs/aws-cdk-lib.aws_location-readme.html)
422482

483+
### Resource Access Actions
484+
485+
#### Map Actions
486+
487+
| Custom Action Name | Accessible APIs |
488+
| :------- | :------------------- |
489+
| `get` |[`geo-maps:GetGlyphs`](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetGlyphs.html)<br></br> [`geo-maps:GetSprites`](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetSprites.html)<br></br> [`geo-maps:GetStaticMap`](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetStaticMap.html) <br></br>[`geo-maps:GetStyleDescriptor`](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetStyleDescriptor.html)<br></br> [`geo-maps:GetTile`](https://docs.aws.amazon.com/location/latest/APIReference/API_geomaps_GetTile.html) |
490+
491+
#### Place Index Actions
492+
493+
| Custom Action Name | Accessible APIs |
494+
| :------- | :------------------- |
495+
| `autocomplete` | [`geo-places:Autocomplete`](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Autocomplete.html) |
496+
| `geocode` | [`geo-places:Geocode`](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Geocode.html)<br></br> [`geo-places:ReverseGeocode`](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_ReverseGeocode.html) |
497+
| `search` | [`geo-places:GetPlace`](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_GetPlace.html)<br></br> [`geo-places:SearchNearby`](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_SearchNearby.html)<br></br> [`geo-places:SearchText`](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_SearchText.html)<br></br> [`geo-places:Suggest`](https://docs.aws.amazon.com/location/latest/APIReference/API_geoplaces_Suggest.html) |
498+
499+
#### Geofence Collection Actions
500+
501+
| Custom Action Name | Accessible APIs |
502+
| :------- | :------------------- |
503+
| `create` | [`geo:CreateGeofenceCollection`](https://docs.aws.amazon.com/location/latest/APIReference/API_WaypointGeofencing_CreateGeofenceCollection.html) |
504+
| `read` | [`geo:DescribeGeofenceCollection`](https://docs.aws.amazon.com/location/latest/APIReference/API_WaypointGeofencing_DescribeGeofenceCollection.html)<br></br> [`geo:BatchEvaluateGeofences`](https://docs.aws.amazon.com/location/latest/APIReference/API_WaypointGeofencing_BatchEvaluateGeofences.html)<br></br> [`geo:ForecastGeofenceEvents`](https://docs.aws.amazon.com/location/latest/APIReference/API_WaypointGeofencing_ForecastGeofenceEvents.html)<br></br> [`geo:GetGeofence`](https://docs.aws.amazon.com/location/latest/APIReference/API_WaypointGeofencing_GetGeofence.html) |
505+
| `update` | [`geo:BatchPutGeofence`](https://docs.aws.amazon.com/location/latest/APIReference/API_WaypointGeofencing_BatchPutGeofence.html)<br></br> [`geo:PutGeofence`](https://docs.aws.amazon.com/location/latest/APIReference/API_WaypointGeofencing_PutGeofence.html)<br></br> [`geo:UpdateGeofenceCollection`](https://docs.aws.amazon.com/location/latest/APIReference/API_WaypointGeofencing_UpdateGeofenceCollection.html) |
506+
| `delete` | [`geo:BatchDeleteGeofence`](https://docs.aws.amazon.com/location/latest/APIReference/API_WaypointGeofencing_BatchDeleteGeofence.html)<br></br> [`geo:DeleteGeofenceCollection`](https://docs.aws.amazon.com/location/latest/APIReference/API_WaypointGeofencing_DeleteGeofenceCollection.html) |
507+
| `list` | [`geo:ListGeofences`](https://docs.aws.amazon.com/location/latest/APIReference/API_WaypointGeofencing_ListGeofences.html)<br></br> [`geo:ListGeofenceCollections`](https://docs.aws.amazon.com/location/latest/APIReference/API_WaypointGeofencing_ListGeofenceCollections.html) |
508+
423509
## Map Pricing Plan
424510
The pricing plan for the Map example is set to `RequestBasedUsage`.
425511
We advice you to go through the [location service pricing](https://aws.amazon.com/location/pricing/) along with the [location service terms](https://aws.amazon.com/service-terms/) (_82.5 section_) to learn more about the pricing plan.

0 commit comments

Comments
 (0)