In this video, you’ll see how to use geocoding and reverse geocoding
in Amazon Location Service.
You'll learn how you can convert street addresses into geographic coordinates,
convert coordinates into street addresses, and embed interactive
maps in your applications.
To get started, let’s navigate to Amazon Location Service.
We can use the site’s interactive tool to explore the various capabilities of
Amazon Location Service.
This is the default map view.
If we want to, we can embed this map into our own applications.
For now, let’s explore the place Index to experience geocoding.
In the search bar, we can search for a place, such as a city or a more
specific point of interest.
Let’s search for Chicago.
Let’s select the city itself.
Here we can see Chicago on the map, as well as the geographic coordinates for the city.
We can zoom in and zoom out by hovering over the map and scrolling,
or by using the buttons in the lower right corner.
Below the map, we can review the API request and response syntax.
Here’s the request that was sent when we searched for Chicago.
And here’s the response to that request.
We can use this drop-down list to return to previous API requests and
responses as long as we stay in this mode of the interactive tool.
Since we’ve completed just one search so far, there’s only one option.
Next, let’s search for a specific point of interest.
This time let’s look for Chicago O’Hare International Airport.
Again, we’re taken to the location on the map.
In this example, however, the map is marked with numbered pins.
We can click individual pins to view details about specific locations within the airport.
Let’s look at the API request and response syntax.
Right now, it still shows our first request.
Let’s select the request we just made.
We can copy this API request to use as a guide when we start building our applications.
We can copy the response syntax as well.
Since there were multiple locations shown on the airport map, we can
see details for each of those locations in the Response syntax.
Let’s go back to the first search result and view the documentation.
Here we can see the API reference for the search action we completed.
We can also access this documentation by navigating to the Amazon Location
Service Getting Started page.
The link to this page is provided in the description for this video.
Next, let’s review an example of reverse geocoding at work in a back-end application.
The use case for this application is to notify a driver if a package is
delivered to the wrong address.
The driver uses a mobile app to send location coordinates to an
AWS Lambda function.
If the coordinates don’t match what’s in the Amazon Location place index,
the Lambda uses Amazon SNS to notify the driver.
We’ll go over a simple Amazon Lambda function to demonstrate how to use
the API for the Amazon Location Place index.
Let’s go back to Amazon Location Service.
Let’s create a place index.
We’ll call it deliveryPlace.
We’ll retain the default data provider and storage settings.
Now that we’ve created the place index, we’ll copy this ARN to the clipboard.
Next, we’ll open the Lambda service and create a function.
We’ll call it location-geocode.
For the runtime, we’ll select Python 3.9.
We’ll leave the rest of the options as they are.
Next, let’s make sure that the function permissions are configured correctly.
The execution role has been created,
but it cannot currently access the functions that we’d like to use.
Let’s drill down into the role to add those permissions in AWS Identity
and Access Management (IAM).
Let’s create a new inline policy.
We’ll edit the JSON code.
Let’s paste in the deliveryPlace index we created.
Next, we’ll review the policy.
Let’s name the policy and create it.
Now we have a policy allowing the Lambda function to perform the
action SearchPlaceIndexForText.
Next, let’s take a look at the code in the Lambda function.
Let’s replace this code.
Again, we’ll use the deliveryPlace index we created.
The action search_place_index_for_text will take a location as a parameter
and return the relevant geometry point coordinates.
Let’s deploy this code.
Instead of passing the parameters programmatically, for this example,
we’ll use the test feature to invoke our Lambda function.
Since this is our first time testing this Lambda function,
we’ll have to create a new event.
Let’s call it testEvent.
Let’s enter an address to use as a parameter.
Let’s run the test.
The response should be similar to what we would see using the interactive tool.
Let’s check the JSON code.
Here we can see the address that was passed as the parameter,
as well as the Point coordinates that were returned from it.
This is an example of geocoding.
Reverse geocoding is very similar.
Let’s go back and create a new Lambda function.
This time we’ll call the function location-reverse-geocode.
We’ll use Python 3.9 as the runtime again and retain all the other default settings.
Next, we’ll add the same inline permission policy we added to the previous function.
Now we’ll go back and replace the code for the function.
Notice that the index name is still deliveryPlace.
But for the response, instead of search_place_index_for_text,
we have search_place_index_for_position.
Let’s deploy this code and test it.
This time, we’ll enter coordinates as the parameters.
We want the function to return the corresponding address.
Let’s save the function and run the test.
Let’s take a look at the response, which should include the full address.
We’ve now seen how to use a Lambda function to perform either
geocoding or reverse geocoding.
Next, we’ll see how to create a web application that includes an interactive
map based on the lambda functions we saw earlier.
For this simple web application we'll use HTML, CSS, and JavaScript.
To get started, let’s create a map in Amazon Location Service.
For the purposes of this example, we’ll use the Esri Street map.
Rather than creating a new place index,
we’ll use the deliveryPlace index we created earlier.
Even though we’re planning to have this map be accessible without logging in,
the Amazon Location Service API requires authentication to use it.
To provide that capability, we’ll use Amazon Cognito.
Let’s create an identity pool.
We’ll call this identity pool deliveryApp.
Let’s enable access to unauthenticated identities.
Next, we’ll create the pool.
The next step is to identify the IAM role to use.
In this case, we’ll create a new IAM role and let Cognito take care of it for us.
As you can see, the roles generated by Cognito incorporate
the deliveryApp name we provided.
Cognito will create two roles:
one for authenticated identities and one for unauthenticated identities.
Next, let’s navigate to IAM to make sure the roles Cognito just created
have the proper permissions.
Here are the two Cognito roles we just created.
Let’s open the unauthenticated role.
Let’s give it another permission and create a new inline policy.
We’ll paste in JSON code that will allow us to access the map and search the
place index we created earlier.
We’ll name the policy location and create it.
With these permissions, unauthenticated identities should have appropriate access.
Now that we’ve completed the setup, we can start creating the web application.
In this empty Web-App folder in our IDE, we’ll create an index.html file.
Next, we’ll paste in a basic HTML template that has a pointer to a
CSS file we’ll create in a moment.
This template contains two placeholders:
one for the map, and one for the JSON response.
Now let’s create the CSS file for styling.
We’ll call it main.css.
Next, we’ll paste in code to add basic styling to our web application.
Let’s preview the web app in a browser.
So far, we have only placeholders and some styling.
Next, we’ll add the interactive map to the application.
Let’s create a file named main.js in our web application folder.
Next, we’ll paste in the code for this application.
This code will set up the Amazon Location resources and then
configure the map library.
This application will use an amplify helper function to sign requests to AWS.
Next, we need to go to Cognito to copy the identity pool ID.
First, we’ll set our platform, which in this case is JavaScript.
Now we can see the identity pool ID and copy it.
Returning to our main.js file, we’ll paste the ID here.
We’ll also update the mapName to reflect the name of the map we created.
Next we’ll change the placesName to deliveryPlace.
Here we can see where the code specifies the map we saw earlier in the HTML,
as well as the initial map center point, which in this case points to Washington, DC.
Next, let’s return to the index.html file to add the reference to main.js.
Under Styles, we’ll add the reference to the map library stylesheet.
Under the footer, we’ll add references to the JavaScript
dependencies and our main.js file.
Now we’ll go back to our browser and refresh our web application.
The map is now displayed in our application.
Next, we’ll add functionality so that clicking a location on the map will
show the JSON response.
Let’s go back to the main.js code to make that change.
We’ll add the code to the main function.
Let’s return to our application in the browser and refresh the page.
Let’s click on the Ronald Reagan Building.
As you can see, clicking on the map displays the address,
as well as showing the JSON response with the coordinates on the right.
The final thing we want to do is add a push-pin when we click.
Let’s go back to the main.js code.
First, we need to make a variable to hold the marker.
We’ll do that right after this constant location.
Next, we’ll add some code to the click event right before we set up the parameter.
This will remove any existing markers from the map and then add the new
marker wherever the user clicked.
Let’s save and refresh our application in the browser.
Let’s click on the Museum of American History.
As, you can see, the web application adds the marker, tells you the location
and address, and shows the JSON response.
Let’s try clicking the National World War II Memorial.
We can see the marker, the location, and the JSON response.
You’ve just seen how to use geocoding and reverse geocoding in Amazon Location Service.
You can learn more about this topic in the description and links for this video.
Thanks for watching. Now it’s your turn to try.