A “Find Corona Test Centers” PWA powered by Amplify Geo and Location Search
Published: 2021-11-30 16:14:38

Given the recent sad increase of Corona cases in Denmark and my involvement in the Frontend and Serverless cohorts in the AWS Community Builders, I decided to combine the two topics by creating a React application (web-based but also being a Progressive Web App) aiming at searching for Covid19 test centers in Denmark.

![](https://cdn-images-1.medium.com/max/2000/1*Nz_-ieAHldj8uV-pJ1o8jw.gif)

I will use [Amplify Geo](https://aws.amazon.com/about-aws/whats-new/2021/09/amplify-geo-aws-amplify/), which adds location-aware features to web applications and [Amazon Location Service](https://aws.amazon.com/location/), which provide secure, reliable and high-quality geospatial data from established global providers such as [Esri ](https://www.esri.com/en-us/home)and [Here.com](https://www.here.com/).

Data is available via Rest API from [Coronasmitte](https://coronasmitte.dk/#) and [CphMed](https://www.cphmed.com/), two very valuable web sites where to find centers information too.

Finally, the app will be deployed on a CloudFront distribution linked with a S3 origin. You can browse the web-app [here](https://d9ky8dr7mk98u.cloudfront.net/).

## Prerequisites

This article assumes that you:

* know how to create a [Progressive React app](https://create-react-app.dev/docs/making-a-progressive-web-app/) via Create React App tool 

* know how to [configure and initialize](https://docs.amplify.aws/cli/start/install/) Amplify in the project

* get familiar wit the Geo’s [Getting Started guide](https://docs.amplify.aws/lib/geo/maps/q/platform/js/#sample-application)

## App use cases

Users of this application will be able to:

* Navigate an interactive Geo map with locations and group of locations (aka clusters), with ability to search for locations via an address bar, and getting suggestions via the Location Search service.

![](https://cdn-images-1.medium.com/max/2000/1*Ep8NUZT9RLsuDv5TXqCYaA@2x.jpeg)

* Access to valuable Test center information such as address, opening hours, waiting time, type (Antigen or PCR) and more when clicking on the specific location — which in turns open a popup.

<div>
![](https://cdn-images-1.medium.com/max/2000/1*4CuFIDYzj7fk9aMqwZ6xYw@2x.jpeg)
</div>

## Amplify Geo main components

The [Getting Started guide](https://docs.amplify.aws/lib/geo/maps/q/platform/js/#sample-application) is pretty comprehensive so I will not repeat much of the steps in this article. Instead let’s look at two main components in Amplify Geo: Maps and Location Search.

### Maps

Based on the [MapLibre GL](https://github.com/maplibre/maplibre-gl-js) library, Amplify Geo [Maps](https://docs.amplify.aws/lib/geo/maps/q/platform/js/) visualize interactive vector maps on the web mostly by abstracting its usage via the *maplibre-gl-js-amplify* package, which exposes, among others, two very important methods:

* *createMap*, very self-explanatory method initializing the map default properties such as zoom level, center of the map, etc.

* *drawPoints*, which, given the coordinates, organizes them into clusters (groups of locations) and unclustered (markers indicating a specific test centre) options, used to modify the look and feel of the elements in the map.

Full code can be found in [GitHub](https://github.com/aladevlearning/app-corona/blob/main/src/components/CoronaMap/CoronaCentresMap.js). Below snippet shows the implementations of above methods.
{% gist https://gist.github.com/aladevlearning/f8f39a0692f82aa1dca12adc7d4ceef1.js %}
### Location Search

[Location Search](https://docs.amplify.aws/lib/geo/search/q/platform/js/) enables search of locations such as addresses, cities by using Esri or Here Geo Location platforms behind the scenes. By combining it with a couple of React components ([AutoSuggest](https://react-autosuggest.js.org/) and [DebounceInput](https://github.com/nkbt/react-debounce-input) — Github code [here](https://github.com/aladevlearning/app-corona/blob/main/src/components/SearchField/SearchField.js)), users are able to input a text, which eventually pops a series of suggestions found by the Location Search via the *Geo.searchByText* method.
{% gist https://gist.github.com/aladevlearning/03b02da93f95efe67a66728765908eae.js %}
## Progressive Web App Gotchas

At the time of the writing the PWA can be installed on Chrome Desktop and Android (via three dots menu and Install App item). For IOS you can manually add the app to home screen manually, obtaining something like below:

![](https://cdn-images-1.medium.com/max/2000/1*4r6bStcolTmp35QriqWkyQ.png)

## Assess app security and performance

[WebPageTest](https://www.webpagetest.org/) is an established web site that can be used to measure the security and performance of your web page. After initial screening, it was clear that some actions needed to be done:

* Control-cache headers should be set to S3 buckets for caching purposes, by adding metadata to all objects in bucket by editing and *Add Metadata* option:

![](https://cdn-images-1.medium.com/max/2000/1*FcacOwGQTE_gZ3O7mk098g.png)

* Create a Custom Policy adding security related headers, thanks to a [recent release](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/example-function-add-security-headers.html) under *Policies* -> *Response Headers*

![](https://cdn-images-1.medium.com/max/3156/1*YmeVogXZnJtOX8W5MquQGg.png)

* Edit distribution *Behaviour* by associating  a Cache Policy and a Response Headers policy we just created.

![](https://cdn-images-1.medium.com/max/2000/1*Ojz8AHT0862fWb98xYxX5w.png)

After above changes we went from a full blood report to a much nicer view:

![](https://cdn-images-1.medium.com/max/2656/1*oQ0DFewcT0g43wBx_4W9CQ.png)

Above were not part of the default Amplify *add hosting* command, but recent releases about [custom resources](https://aws.amazon.com/blogs/mobile/extend-amplify-backend-with-custom-aws-resource-using-aws-cdk-or-cloudformation/), [export](https://aws.amazon.com/blogs/mobile/export-amplify-backends-to-cdk-and-use-with-existing-deployment-pipelines/) and [override](https://aws.amazon.com/blogs/mobile/override-amplify-generated-backend-resources-using-cdk/) can help in automating that via a CDK stack.

## Summary

Amplify Geo makes extremely easy and quick to setup up a secure and scalable map functionality and infrastructure in hours.

In regards of PWA area I may add in future a [component](https://github.com/as-ideas/add-to-homescreen-react) which can popup the installation process proactively.

As I am still in Free Tier zone, I am also very interested in keeping an eye on [pricing](https://docs.amplify.aws/cli/geo/maps/#map-pricing-plan) and will definitely update this section if something worth mentioning pops up.

## References

[https://docs.amplify.aws/lib/geo/getting-started/q/platform/js](https://docs.amplify.aws/lib/geo/getting-started/q/platform/js/)