Build and Deploy Location Apps with AWS Location Service and HERE

The post is co-written by Sophia Parafina and Andrea Amorosi | AWS Partner Solutions Architect dreamorosi@ on Twitter & dreamorosi@ on GitHub

Developers building modern cloud applications are not only writing application code but are increasingly responsible for writing infrastructure code to access cloud services. Writing code to manage infrastructure details such as ingress rules, security policies and groups, and keys or tokens to services can be complex.

AWS introduced Amplify as a low code solution for building and deploy web and mobile applications quickly. Developers spend less time dealing with the intricacies of cloud infrastructure and can concentrate on product features. Amplify includes a CLI and Admin UI for managing projects and libraries and components such as authentication, CI/CD, and managed hosting.

Amplify Geo includes libraries for building location applications and services. Let’s take a tour of how to build a location application with Amplify Geo and HERE Location Services.

Getting Started with Amplify Geo

We’ll start by cloning the source code for our application from GitHub. It’s in an example repository with many examples. We can use a sparse checkout to get only the example.

        
$ mkdir here-aws
$ cd here-aws
$ git init
$ git remote add origin -f https://github.com/aws-samples/amazon-location-samples
$ git config core.sparseCheckout true
$ echo "react-map-gl-amplify-here-map" >> .git/info/sparse-checkout
$ git pull origin main

  

Next, we’ll install the Amplify CLI and install the application dependencies.

        
$ npm install -g @aws-amplify/cli
$ npm install

  

Because the example has been built with Amplify, we can create a new project environment and push it to AWS. Follow the prompts to initialize and copy the project to the cloud.

        
$ amplify init
$ amplify push

  

To build and deploy the application, we add hosting and publish it.

        
$ amplify add hosting
$ amplify publish

  

Amplify Geo includes client libraries built on top of Amazon Location Service based on HERE Location Services. Developers can use MapLibre, a ready-to-use library of open-source UI components included with Amplify Geo. Next, let’s take examine the HERE location services used in the application.

AWS Location Service by HERE

The application uses a combination of services. For visualization, it uses HERE map tiles for the base map display that uses the MapLibre library for UI Components. Map coverage is global and regularly updated to provide the most recent map features. To locate places of interest such as shops, hotels, or even medical services, the application uses AWS Location Service Places. This service provides point of interest search, locating place by address through Geocoding, finding a street address by clicking on the map to convert coordinates to an address. Finally, the application incorporates Amazon Location Routes, which can find the fastest route whether you are driving, walking, or taking public transit. HERE provides the routing data that enable accurate travel times based on the road conditions and live traffic data. This combination of services can be applied to multiple use cases such as delivery routing, planning a commute, or locating the nearest services.

Let’s look at how Amplify simplifies building and using Amazon Location Service. First, before a map or any service can be instantiated, it must be defined and authorized to use the services. For each service used, Amplify creates a CloudFormation template and the parameters necessary to create the service. Writing CloudFormation templates can be complex, but Amplify generates them base on the choices you make when prompted and your user credentials.

The application imports the `useAmazonLocationService` module which is needed to instantiate any service including the map.

        
const [transformRequest, mapName, calculateRoute] = useAmazonLocationService();

  

For example, to display the map requires the credentials provided by `transformRequest`.

        
{/* Display map only when transformRequest exists, meaning also credentials have been obtained */}
{transformRequest ? (
 handleMapClick(e)}
  ref={mapRef}
  attributionControl={false}
  asyncRender={true}
  touchRotate
  touchZoom
>

  

Also of note, is that Amplify Geo does not currently support routing services, but they can be added with a custom CloudFormation template. The application also includes routing components to handle the UI, manage requests, and display results.

Finally, the application uses MapLibre for the application UI. It also uses vis.gl’s React-Map-GL bindings for a JavaScript framework. Note that bindings for Angular and Flutter are also available, letting developers choose the application framework.

Summary

Building and deploy location applications and services is easier with AWS Amplify. It provides the boiler plate configuration CloudFormation templates to create and deploy services for your location applications. The Amplify Geo CLI takes the process one step further by configuring and deploying map, place search, geocoding, and reverse geocoding services with HERE data to provide up-to-date data. If Amplify Geo doesn’t support a service, such as routing, you can add the service as a custom resource along with JavaScript modules for interacting with the MapLibre UI components. Finally, because MapLibre is open source, developers are free to use the best framework for their application.

The HERE team will be at AWS re:Invent at booth 1623 demonstrating HERE Location Services and data products. Join us for demos and if you have questions about AWS Location Service.