# Using the Amplify library with Amazon Location Service
The following tutorial walks you through using AWS Amplify with Amazon Location. Amplify uses MapLibre GL JS to render maps in your JavaScript-based application.
Amplify is a set of open-source client libraries that provide interfaces to different categories of services, including Amplify Geo, which is powered by Amazon Location Service. [ Learn more about the AWS Amplify Geo JavaScript library](https://docs.amplify.aws/lib/geo/getting-started/q/platform/js/).
**Note**
This tutorial assumes that you have already followed the steps in [Using maps - To add a map to your application](map-prerequisites.md#create-map-resource).
## Building the application: Scaffolding
This tutorial creates a web application that uses JavaScript to build a map on an HTML page.
Begin by creating an HTML page (`index.html`) that includes the map's container:
+ Enter a `div` element with an `id` of `map` to apply the map's dimensions to the map view. The dimensions are inherited from the viewport.
```
```
## Building the application: Adding dependencies
Add the following dependencies to your application:
+ AWS Amplify map and geo libraries.
+ AWS Amplify core library.
+ AWS Amplify auth library.
+ AWS Amplify stylesheet.
```
```
This creates an empty page with the map's container.
## Building the application: Configuration
To configure your application using JavaScript:
1. Enter the identifiers of the unauthenticated identity pool that you created in [Using maps - Step 2, Set up authentication](map-prerequisites.md#create-map-resource).
```
// Cognito Identity Pool ID
const identityPoolId = "region:identityPoolID"; // for example: us-east-1:123example-1234-5678
// extract the Region from the Identity Pool ID
const region = identityPoolId.split(":")[0];
```
1. Configure AWS Amplify to use the resources you've created, including the identity pool and the Map resource (shown here with the default name of `explore.map`).
```
// Configure Amplify
const { Amplify } = aws_amplify_core;
const { createMap } = AmplifyMapLibre;
Amplify.configure({
Auth: {
identityPoolId,
region,
},
geo: {
AmazonLocationService: {
maps: {
items: {
"explore.map": {
style: "Default style"
},
},
default: "explore.map",
},
region,
},
}
});
```
## Building the application: Map initialization
For the map to display after the page is loaded, you must initialize the map. You can adjust the initial map location, add additional controls, and overlay data.
```
async function initializeMap() {
const map = await createMap(
{
container: "map",
center: [-123.1187, 49.2819],
zoom: 10,
hash: true,
}
);
map.addControl(new maplibregl.NavigationControl(), "top-left");
}
initializeMap();
```
**Note**
You must provide word mark or text attribution for each data provider that you use, either on your application or your documentation. Attribution strings are included in the style descriptor response under the `sources.esri.attribution`, `sources.here.attribution`, and `sources.grabmaptiles.attribution` keys. Amplify will automatically provide attribution. When using Amazon Location resources with [data providers](https://docs.aws.amazon.com/location/previous/developerguide/what-is-data-provider.html), make sure to read the [service terms and conditions](https://aws.amazon.com/service-terms/).
## Running the application
You can run this sample application by using it in a local web server, or opening it in a browser.
To use a local web server, you can use npx, installed as part of Node.js, or any other web server of your choice. To use npx, type `npx serve` from within the same directory as `index.html`. This serves the application on `localhost:5000`.
**Note**
If the policy that you created for your unauthenticated Amazon Cognito role includes a `referer` condition, you might be blocked from testing with `localhost:` URLs. In this case. you can test with a web server that provides a URL that is in your policy.
After completing the tutorial, the final application looks like the following example.
```
```
Running this application displays a full-screen map using your chosen map style. This sample is also described on the **Embed map** tab of any Map resource page in the [Amazon Location Service console](https://console.aws.amazon.com/location/maps/home).
After you complete this tutorial, go to the [ Display a map](https://docs.amplify.aws/lib/geo/maps/q/platform/js#display-a-map) topic in the AWS Amplify documentation to learn more, including how to display markers on the map.