DEV Community

Cover image for A Summary of How to Build Amplify Geo and Amazon Location Service

A Summary of How to Build Amplify Geo and Amazon Location Service

img

This summarizes how Amplify Geo and Amazon Location Service are built πŸŽ‰

At the "JAWS PANKRATION 2021" held recently, I made a presentation titled "Comparison of Building Amazon Location Service and Amplify Geo". I summarized the information up to December 2021 about Amplify Geo and Amazon Location Service, which I have been researching a lot this year πŸ’‘

Comparison of Building Amazon Location Service and Amplify Geo
Image description

Amazon Location Service and Amplify Geo

The Amazon Location Service is a service for building location-based applications used within AWS. Currently, five functions are available: map display, address search, route search, geofence, and tracking.

Amplify Geo is a feature of AWS Amplify that allows you to build Amazon Location Service easier, and is a wrapper that automatically configures Amazon Location Service.

We built a web application in our internal hackathon to check out the actual function, and anyone can use it just by registering as a user, so please try it out. We are building our own Japanese style of background map, which is not currently supported by Amazon Location Service, and implementing each function in conjunction with the map library.

als.mierune.io

img

Advance Preparation

In advance, we will set up AWS Amplify and Vue.js up to the login function. We have chosen Vue.js as the framework, but it is possible to build with other frameworks such as React.

↓ More info ↓
Building a Login Function with AWS Amplify, Amplify UI Vue, and Vue 3

View the map

Map View is a feature that allows you to use a variety of background maps by selecting a map style.

Amazon Location Service

The Amazon Location Service allows you to define map styles and credentials, but does not provide the ability to define maps, so it uses a map library called MapLibre GL JS. You will also need to configure Amazon Location Maps in the AWS console and add policies to the Amplify role.

↓ More info ↓
Building a Map Application with Amazon Location Service, MapLibre GL JS, AWS Amplify, and Vue.js

Amplify Geo

When building with Amplify Geo, you will only need two commands to complete the process. Then use MapLibre and the wrapper library when building the frontend. By using the wrapper library, you can easily display the background map. Also, markers can be added easily.

↓ More info ↓
Building a Map Application with Amplify Geo and Vue.js

Leaflet

Officially, "MapLibre GL JS" is recommended as a map library, but I also tried to see if I could build it with "Leaflet", which is one of the most popular map libraries.

↓ More info ↓
Building a Map Application with Amazon Location Service, Leaflet, AWS Amplify, and Vue.js

Geocoding

Geocoding is a feature that allows you to retrieve the corresponding address data by specifying keywords.

Amazon Location Service

The Amazon Location Service requires the use of the AWS SDK when building the frontend. You will also need to configure Amazon Location Place indexes and add policies to the Amplify role in the AWS console.

↓ More info ↓
Building an Address Search Function with Amazon Location Service

Amplify Geo

When building with Amplify Geo, as with the map display, you only need two commands to complete. And you can use the geocoding function from Amplify to get the address data when building the frontend.

↓ More info ↓
Building an Address Search Function with Amplify Geo

Building an Address Search Function Using Amplify Geo and MapLibre GL Geocoder

Routing

Routing is a function that allows you to obtain route data by specifying the starting point and destination.

Amazon Location Service

The Amazon Location Service requires the use of the AWS SDK when building the frontend. You will also need to configure Amazon Location Route calculators and add policies to the Amplify role in the AWS console.

↓ More info ↓
Building a Route Search Function with Amazon Location Service

Amplify Geo

As of December 2021, the routing function does not appear to be implemented yet.

Here is a summary of how to build Amplify Geo and Amazon Location Service πŸ‘

Wanna build it easily? - "Amplify Geo"

  1. Easier to build than Amazon Location Service
  2. No need to configure AWS console and roles
  3. Some functions, such as routing, are still not available

Want your own customization? - "Amazon Location Service"

  1. More challenging to build than Amplify Geo
  2. Need to set up AWS console and roles
  3. Available to customize directly using MapLibre GL JS

I'll continue to explore other features as well πŸ‘

Discussion (0)