You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The pricing plan for Search Index will be set to `RequestBasedUsage`.
70
70
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.
71
-
72
-
73
-
{/* MOVE THIS TO LEGACY RESOURCES PAGE */}
74
-
{/* ## Advanced Settings
75
-
You can optionally configure the data provider and result storage location for your location search index.
76
-
77
-
### Location Search data provider
78
-
You can select a data provider as the source for geocoding, reverse geocoding and searches.
79
-
Each provider gathers and curates their data using different means. They may also have varying expertise in different regions of the world.
80
-
The available data providers of geospatial data are shown. To learn more about data providers, please refer this [location service documentation](https://docs.aws.amazon.com/location/latest/developerguide/what-is-data-provider.html).
81
-
82
-
- Here – For additional information about HERE Technologies, see [Here guide](https://docs.aws.amazon.com/location/latest/developerguide/HERE.html).
83
-
- Esri – For additional information about Esri, see [Esri guide](https://docs.aws.amazon.com/location/latest/developerguide/esri.html).
84
-
85
-
<Callout>
86
-
87
-
**Note:** If your application is tracking or routing assets you use in your business (such as delivery vehicles or employees), you may only use `HERE` as your geolocation provider.
88
-
See section 82 of the [AWS service terms](https://aws.amazon.com/service-terms/) for more details.
89
-
90
-
</Callout>
91
-
92
-
### Location Search result storage location
93
-
You can specify how the results of a search operation will be stored by the caller.
94
-
95
-
- SingleUse - specifies that the results won't be stored.
96
-
- Storage - specifies that the result can be cached or stored in a database.
97
-
98
-
Refer [this location service doc](https://docs.aws.amazon.com/location-places/latest/APIReference/API_DataSourceConfiguration.html#locationplaces-Type-DataSourceConfiguration-IntendedUse) for more information. */}
> **Note:** Make sure that `maplibre-gl-js-amplify` version `4.0.0` or above is installed.
51
55
52
56
First, create a map onto which you want to add the location search UI component. See the guide on [creating and displaying maps](/[platform]/build-a-backend/add-aws-services/geo/maps).
53
57
54
-
Then, use `createAmplifyGeocoder()` to get a new instance of `MaplibreGeocoder` and add the location search UI component to the map.
58
+
<BlockSwitcher>
59
+
<Blockname="API Key">
60
+
61
+
Start off my getting an instance of GeoPlaces by authenticating using the API key and the `AmazonLocationClient`.
return geoPlaces; // Return the GeoPlaces instance
74
+
}
75
+
```
76
+
77
+
Create a new instance of `MaplibreGeocoder` and add the location search UI component to the map. Use the `map` from [this](/[platform]/build-a-backend/add-aws-services/geo/maps/#display-a-map) set up tutorial.
78
+
79
+
> **Note:** Ensure that your package bundler (webpack, rollup, etc) is configured to handle css files. Check out the webpack documentation [here](https://webpack.js.org/loaders/css-loader/).
center: [-123.1187, 49.2819], // Starting center coordinates
93
+
zoom:11, // Initial zoom levels
94
+
validateStyle:false// Disable style validation
95
+
});
96
+
return map; // Return the initialized map
97
+
}
98
+
99
+
constmap=initializeMap();
100
+
101
+
// highlight-start
102
+
constgeocoder=newMaplibreGeocoder(geoPlaces, {
103
+
maplibregl,
104
+
showResultsWhileTyping:true, // Show results while typing
105
+
debounceSearch:300, // Debounce search requests
106
+
limit:30, // Limit number of results
107
+
reverseGeocode:true, // Enable reverse geocoding
108
+
zoom:14, // Zoom level on result selection
109
+
placeholder:"Search text or nearby (lat,long)"// Place holder text for search box.
110
+
});
111
+
112
+
// Add the search box to the map
113
+
map.addControl(geocoder, 'top-left');
114
+
// highlight-end
115
+
```
116
+
</Block>
117
+
118
+
<Blockname="Legacy Resources">
119
+
120
+
Use the `createAmplifyGeocoder()` to get a new instance of `MaplibreGeocoder` and add the location search UI component to the map.
55
121
56
122
> **Note:** Ensure that your package bundler (webpack, rollup, etc) is configured to handle css files. Check out the webpack documentation [here](https://webpack.js.org/loaders/css-loader/).
57
123
@@ -78,11 +144,25 @@ async function initializeMap() {
78
144
79
145
initializeMap();
80
146
```
147
+
</Block>
148
+
</BlockSwitcher>
81
149
82
150
83
151
84
152
### Display the location search box outside the map
85
153
154
+
<BlockSwitcher>
155
+
<Blockname="API Key">
156
+
You can also use maplibre-gl-geocoder to display the location search UI component anywhere in your application, even outside the map.
157
+
158
+
Use `geocoder` from above to create a new `MaplibreGeocoder` and add it within your Amplify app.
You can also use [maplibre-gl-geocoder](https://github.com/maplibre/maplibre-gl-geocoder) to display the location search UI component anywhere in your application, even outside the map.
87
167
88
168
To do so, extract the html element using function `onAdd()` and attach it anywhere in your DOM instead of adding it via the map's `addControl()` function.
@@ -91,11 +171,42 @@ To do so, extract the html element using function `onAdd()` and attach it anywhe
96
178
97
179
### Customize Search Icons
98
180
181
+
<BlockSwitcher>
182
+
<Blockname="API Keys">
183
+
You can customize the search icons used by the [maplibre-gl-geocoder](https://github.com/maplibre/maplibre-gl-geocoder) to use any image of your choosing. [MapLibre markers](https://maplibre.org/maplibre-gl-js/docs/API/#markers-and-controls) require an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) when passing in custom images.
184
+
185
+
The following example puts an existing SVG icon into an HTMLElement before being passed to `createAmplifyGeocoder` which creates a [maplibre-gl-geocoder](https://github.com/maplibre/maplibre-gl-geocoder).
186
+
187
+
```javascript
188
+
importmyIconfrom"./myIcon.svg"// relative path to your custom icon
189
+
190
+
consticon=newImage(100, 100);
191
+
icon.src= myIcon;
192
+
193
+
constgeocoder=newMaplibreGeocoder(geoPlaces, {
194
+
maplibregl,
195
+
showResultsWhileTyping:true, // Show results while typing
196
+
debounceSearch:300, // Debounce search requests
197
+
limit:30, // Limit number of results
198
+
reverseGeocode:true, // Enable reverse geocoding
199
+
zoom:14, // Zoom level on result selection
200
+
placeholder:"Search text or nearby (lat,long)", // Place holder text for search box.
201
+
// highlight-next-line
202
+
showResultMarkers: { element: icon }
203
+
});
204
+
205
+
map.addControl(geocoder);
206
+
```
207
+
</Block>
208
+
209
+
<Blockname="Legacy Resources">
99
210
You can customize the search icons used by the [maplibre-gl-geocoder](https://github.com/maplibre/maplibre-gl-geocoder) to use any image of your choosing. [MapLibre markers](https://maplibre.org/maplibre-gl-js/docs/API/#markers-and-controls) require an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) when passing in custom images.
100
211
101
212
The following example puts an existing SVG icon into an HTMLElement before being passed to `createAmplifyGeocoder` which creates a [maplibre-gl-geocoder](https://github.com/maplibre/maplibre-gl-geocoder).
-`maplibre-gl-js-amplify` version `4.0.0` or above is installed
55
-
- Any package bundlers (webpack, rollup, etc) are configured to handle css files. Check out the webpack documentation [here](https://webpack.js.org/loaders/css-loader/).
55
+
- Any package bundlers (webpack, rollup, etc) are configured to handle css files. Check out the webpack documentation [here](https://webpack.js.org/loaders/css-loader/).
56
56
57
57
</Callout>
58
58
59
+
<BlockSwitcher>
60
+
61
+
<Blockname="API Keys">
62
+
63
+
You can render your map using an existing or provisioned API key. To generate API keys with Amplify Geo, visit the [set up page](/[platform]/build-a-backend/add-aws-services/geo/set-up-geo/#generate-api-keys) to learn more about setting up API keys.
64
+
65
+
Start by importing the following libraries into your application:
66
+
67
+
```ts
68
+
import*from'maplibre-gl-js'asmaplibregl;
69
+
import'maplibre-gl/dist/maplibre-gl.css';
70
+
```
71
+
72
+
Next, create and render the [Map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/) by creating an instance through .
73
+
74
+
**Note:** There must be a `div` with an `id="map"` on the DOM before making the call to `maplibregl.Map` in this way.
75
+
76
+
With the region of your generated API key and the hidden value, you can use the `maplibregl.Map` function to render a map with a customized style and color scheme. Visit the official Amazon Location Service documentation to learn more about [style specifications](https://docs.aws.amazon.com/location/latest/developerguide/map-styles.html).
77
+
```javascript
78
+
constAPI_KEY="Your_API_Key"; // your hidden value (should be v1.public.a1b2c3d4...)
Copy file name to clipboardExpand all lines: src/pages/[platform]/build-a-backend/add-aws-services/geo/set-up-geo/index.mdx
+60-2Lines changed: 60 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -29,7 +29,7 @@ export function getStaticProps(context) {
29
29
30
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
31
32
-
If you have not yet created an Amplift app, visit the [quickstart guide](/[platform]/start/quickstart/).
32
+
If you have not yet created an Amplify app, visit the [quickstart guide](/[platform]/start/quickstart/).
33
33
34
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
35
@@ -111,7 +111,7 @@ This command will deploy a Geofence Collection to your cloud sandbox and generat
111
111
112
112
## Define resource access permissions
113
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.
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 [this](/[platform]/build-a-backend/add-aws-services/geo/custom-authorization/) page to learn more about access customization and possible access actions.
115
115
116
116
The following example shows you how you can set up your map and collection access structure for authorized and guest users.
AWS Location API keys currently do not support geofence collections or their associated APIs. Adding acesss definitions for any API keys using the `allow.apiKey.to()` definition will NOT result in the creation of an API key.
143
+
144
+
</Callout>
145
+
146
+
## Generate API Keys
147
+
148
+
You can use AWS Location API keys to authenticate and authorize anonymous users to use Geo resources. Refer to the [Amazon Location documentation](https://docs.aws.amazon.com/location/latest/developerguide/access.html) to learn more about authentication with API keys.
149
+
150
+
To generate API keys for your map and location resources, you can configure their generation during resource instantiation.
This will generate AWS Location API keys configured with the restrictions provided in the `access` block. The names of all provisioned API keys will then appear in the `amplify_outputs.json` file. To access their hidden values through AWS SDK/CLI, refer to the instructions below.
186
+
187
+
Install the latest version of the [AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html) and configure it with your AWS account.
188
+
189
+
```bash title="Terminal" showLineNumbers={false}
190
+
aws location describe-key \
191
+
--key-name <your-key-name>
192
+
```
193
+
194
+
<Callout>
195
+
**Note:** To access information about generated API keys, you must ensure that `geo:DescribeKey` access is granted to your user roles and resources. learn more about setting up access for Location resources [here](https://docs.aws.amazon.com/location/latest/developerguide/set-up.html).
196
+
</Callout>
197
+
140
198
## Configure your application
141
199
142
200
To display a map in your application, you can use the [Amplify React MapView component](https://ui.docs.amplify.aws/react/components/geo) or the [MapLibre GL](https://github.com/maplibre/maplibre-gl-js) with `maplibre-gl-js-amplify` libraries are required.
0 commit comments