Front-End Web & Mobile

Considerations when choosing Amazon Location Services Map Styles

Amazon Location Service offers nine different map styles to fit multiple use cases. How do you pick the right base map style for your application? And how does the base map you pick influence the rest of your application? In this post, we review the different map styles available with Amazon Location maps, as well as how to decide which is best for your application.

Displaying Amazon Location Maps

Amazon Location supports popular open-source map rendering libraries, such as MapLibre GL JS, Tangram, and AWS Amplify JS. Providing multiple ways to display base map tiles lets you easily migrate from existing base map providers and sources. Our developer guide includes simple getting-started guides for the libraries listed that let you get up and running in just a few minutes.

Amazon Location offers both Vector and Raster tiles from our data providers. Using vector tiles, you can further modify the style of the map to fit your application. We have resources in our sample Github repository to help get you started with editing map styles outside of the basemap design.

Installing our application

Now that we’ve discussed some different ways to display Amazon Location maps, let’s look at our sample application. First, we must install it. For this post, I’ll use an AWS Cloud9 instance to run the installation commands.


Make sure that you have the following prerequisites before continuing:

Configuring the application

First, we must clone our amazon-location-samples github repository, which contains our sample application. This repo also contains other great examples of getting started with Amazon Location.

Now we’ll navigate into our application repo.

cd amazon-location-samples/maplibre-gl-js-vue-amplify-compare-maps

Now we’ll install our dependencies.

npm install

Once this is complete, we’ll initialize Amplify.

amplify init

Choose the following options when creating the Amplify project:

Enter a name for the project (dev):`dev`
Choose your default editor: `Visual Studio Code`
Select the authentication method you want to use:

For more information about the authentication method, see Install the Amplify CLI.

Once we’ve initialized our Amplify environment, we can create our cloud resources. This may take a few minutes to fully deploy all of the resources.

amplify push

Select “Y” when prompted if you would like to continue.

Current Environment: dev

│ Category │ Resource name         │ Operation │ Provider plugin   │
│ Auth     │ maplibreglvue0e55c8d4 │ Create    │ awscloudformation │
│ Geo      │ placeindex            │ Create    │ awscloudformation │
│ Geo      │ esristreet            │ Create    │ awscloudformation │
│ Geo      │ esrinavigation        │ Create    │ awscloudformation │
│ Geo      │ esridarkgray          │ Create    │ awscloudformation │
│ Geo      │ esrilightgray         │ Create    │ awscloudformation │
│ Geo      │ esriimagery           │ Create    │ awscloudformation │
│ Geo      │ hereexplore           │ Create    │ awscloudformation │
│ Geo      │ heretruck             │ Create    │ awscloudformation │
│ Geo      │ esrilight             │ Create    │ awscloudformation │
│ Geo      │ hereberlin            │ Create    │ awscloudformation │
│ Hosting  │ amplifyhosting        │ Create    │ awscloudformation │
? Are you sure you want to continue? (Y/n) 

Wait for the deployment to finish.

Once the resources are created in the AWS Cloud, we can either host the app locally, or publish our frontend to AWS Amplify.

For local hosting, we run the following command:

npm run start

The following is an example of our application running in AWS Cloud9 locally:

Cloud9 displaying the application running locally

Figure 1. Cloud9 displaying the application running locally

For Amplify hosting, we just need the publish command. For more information about Amplify frontend hosting, see Hosting Overview.

amplify publish

Select “Y” when prompted.

Current Environment: dev

│ Category │ Resource name         │ Operation │ Provider plugin   │
│ Auth     │ maplibreglvue0e55c8d4 │ No Change │ awscloudformation │
│ Geo      │ placeindex            │ No Change │ awscloudformation │
│ Geo      │ esristreet            │ No Change │ awscloudformation │
│ Geo      │ esrinavigation        │ No Change │ awscloudformation │
│ Geo      │ esridarkgray          │ No Change │ awscloudformation │
│ Geo      │ esrilightgray         │ No Change │ awscloudformation │
│ Geo      │ esriimagery           │ No Change │ awscloudformation │
│ Geo      │ hereexplore           │ No Change │ awscloudformation │
│ Geo      │ heretruck             │ No Change │ awscloudformation │
│ Geo      │ esrilight             │ No Change │ awscloudformation │
│ Geo      │ hereberlin            │ No Change │ awscloudformation │
│ Hosting  │ amplifyhosting        │ No Change │ awscloudformation │
No changes detected
? Do you still want to publish the frontend? (Y/n)

When this is complete, a URL will be provided which will lead you to the application now running in Amplify.

Amplify deployment complete

Figre 2. Amplify deployment complete

Select the URL and open it in a web browser. Now you’re ready to use the application to compare map styles. This URL can also be shared within your organization for others to use the app.

Using the application

Now that our application is running in Amplify, we can try loading up some map styles. The application lets you change the pitch of the map, thereby allowing you to utilize 3D styles, as well as a search bar to help find points of interest that you’d like to compare. Next, let’s look at a few examples, and why you might choose one style over the other.

Light vs Dark Map

Starting with two Esri styles – VectorEsriDarkGreyCanvas, and VectorEsriLightGreyCanvas – in this example we can see that using both maps may be preferable, with a switch within the application to swap between light and dark mode. The information presented on the maps is the same, but the colors are different. We have a sample application that switches between map styles on our amazon-location-samples Github repository.

Image showing app comparing Esri Light and Dark styles

Figure 3. Image showing app comparing Esri Light and Dark styles

Map accuracy

Another use case is which maps are more up-to-date. Because Amazon Location uses two data providers, there may be subtle differences between features. In this case, we’re comparing an Esri Navigation style with a Here Explore style. The highway interchange shown was completed in June 2022, and while Here shows the updated configuration, Esri has not updated yet. For applications with very accurate data requirements, you may find that one provider or style provides a more up-to-date or accurate representation in certain areas.

Image showing app displaying Esri Navigation and Here Explore

Figure 4. Image showing app displaying Esri Navigation and Here Explore

Natural features

Map styles will differ regarding what type of natural features they provide. One style that Amazon Location offers – Esri Vector Topographic – is particularly suited for this use-case. In the following example, looking at Yellowstone National Park, we can see feature names for mountains, as well as elevations. The Esri Navigation maps don’t contain this information. For an application designed around outdoor recreation, the Esri topographic vector map may be the better option.

Image showing app displaying Esri Streets and Esri Topographic

Figure 5. Image showing app displaying Esri Streets and Esri Topographic

Public transit

For a use-case that may focus on public transit or other navigational aids, certain styles may prove to be a better fit. In this example, we’re looking at Downtown Tokyo, and comparing an Esri Navigation style with the Here Explore style. In this case, Here has more public transit information, including more obvious train lines and train stations.

Image showing app displaying Esri Navigation compared to Here Explore

Figure 6. Image showing app displaying Esri Navigation compared to Here Explore

Trucking and hazardous material

When driving a large vehicle, bridge heights and travel restrictions are incredibly important. When building an application for these use-cases, the Here Explore Truck map is designed specifically for this task. Displaying bridge heights as well as haz-mat restricted roads, the Here Explore Truck maps make sure that you have all of the information that you need for safe travels in a larger vehicle.

Image showing app displaying Here Explore vs Here Explore Truck

Figure. 7 Image showing app displaying Here Explore vs Here Explore Truck

Satellite vs Street maps

The final use-case is satellite (or aerial) views compared to a street map. By using the Raster Esri Imagery tiles, we can see aerial views of our locations. This can be useful in precision locating apps, where it must be very obvious where something may be located. One example may be locating a rental scooter that is in a parking lot that isn’t clear on a street map, but is obvious on aerial views.

Image showing app displaying Esri Raster imagery next to Here Explore

Figure 8. Image showing app displaying Esri Raster imagery next to Here Explore


To delete the application, navigate to the application directory:

cd amazon-location-samples/maplibre-gl-js-vue-amplify-compare-maps

then run

amplify delete

Select “y” when prompted:

? Are you sure you want to continue? This CANNOT be undone. (This will delete all the environments of the project from the cloud and wipe out all the local files created by Amplify CLI) (y/N)

Summary and next steps

In this post, we discussed how you can use an open-source application to compare Amazon Location map styles side-by-side in AWS Amplify. Using this tool, you can decide which map is the best for your use case, and look at specific points of interest in different styles. Because this is an open-source tool, you can modify the code and add markers, polygons, and other features to compare even farther exactly how your application might look using different map styles.

About the Authors:

Zachariah Elliott

Zachariah Elliott works as a Solutions Architect focusing on Amazon Location at AWS. He is passionate about helping customers build geospatial solutions on AWS. He is also part of the IoT Subject Matter Expert community at AWS and loves helping customers develop unique IoT-based solutions.

Riku Inada

Riku Inada works as a Solutions Architect focusing on manufacturing industry at AWS. He likes to use AWS Amplify to solve customer challenges. He enjoys fitness in his free time.