Set up Amplify Geo - JavaScript - AWS Amplify Gen 1 Documentation (original) (raw)

Note: Please reach out to us for any feedback and/or issues here

Amplify Geo provides APIs and map UI components for maps and location search for JavaScript-based web apps. You can add maps and location search functionality to your app in just a few lines of code. Amplify Geo APIs are powered by Amazon Location Service and the map UI components from MapLibre are already integrated with the Geo APIs. You can quickly get started using Amplify CLI to provision your map and location search resources.

Follow this guide to get started with Amplify Geo through the Amplify CLI.

Notes:

Provisioning resources through CLI

Prerequisite: Install and configure the Amplify CLI

The primary way to provision Geo resources is through the Amplify CLI. You can use the following command to install this globally.

Now, let's make sure that the right version was installed:

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

Once that is complete, you can run the following command from your project's root folder to initialize Amplify in your repo:

The above command will guide you through setting up your project name and preferred authentication profile.

Now you are able to add a geo resource, such as map resources or a search index:

The CLI will let you configure the Geo category based on the capabilities you want to add (maps and/or search). You can either choose to stick with the defaults or configure advanced settings. Please refer to Amplify CLI Geo docs for more details on these configurations.

The add command automatically creates the backend configuration. Once all your configuration is complete, run the following (this might take a few minutes):

A file called amplifyconfiguration.json that contains all geo-related configuration information is placed in your app's source directory.

For more information, you can visit the full Amplify CLI Geo Maps docs.

Configure your application

Install the necessary dependencies by running the following command:

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

Import and load the configuration file generated in previous step using Amplify CLI in your app. It’s recommended you add the Amplify configuration step to your app’s root entry point. For example src/index.js in a create-react-app generated React application or main.ts in Angular.

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. Review the Library Not Configured Troubleshooting guide for possible causes of this issue.