Have you ever wanted to be able to search for a point of interest in a Svelte app? Building on myprevious post about adding a map to a web app, it's relatively straightforward to allow users to search for addresses and points of interest, and visualize the results. In fact, we only need to addtwo more lines of code to our existing Svelte component to enable this functionality.

Are you building mapping or location services web apps? DM me onTwitter - Would love to chat to understand your needs and experiences.

1. AmplifyMap Svelte Component

The key thing to know is that Location Search is more formally calledGeocoding. So, we can edit the previousAmplifyMap.svelte file to add two new lines:

constgeocoder=AmplifyMapLibre.createAmplifyGeocoder()map.addControl(geocoder)

Resulting in this updated file:

<script>import{onMount}from"svelte"exportletwidth="800px"exportletheight="600px"asyncfunctioninitializeMap(){constmap=awaitAmplifyMapLibre.createMap({container:"map",// DOM element to hold map.center:[-123.1187,49.2819],zoom:11,region:"us-west-2",})constgeocoder=AmplifyMapLibre.createAmplifyGeocoder()map.addControl(geocoder)}onMount(()=>{initializeMap()})</script><divid="map"style="width: {width}; height: {height};"/>

If we take this approach, the search box will be added into the map itself, and the results will be shown as a list overlaid over the map. You can also have the search component elsewhere in your app - more details in ourdocs here.

2. Add Search Resource

Before this will work properly, we need to provision theLocation Search resource via the Amplify CLI. This is very similar to how we added the map resource in the previous post.

IMPORTANT NOTE Because the Geo functionality is under Developer Preview, you need to make sure you have the@geo branch of the CLI installed, as described in the Geo Getting Started guide. We'll remove this requirement when Geo is generally available.

Make sure you have the latest@geo branch Amplify CLI installed, using the following command. (At the time of writing, the latest version is5.2.2-geo.2).

npm -g i @aws-amplify/cli@geo

And then we can add theLocation Search backend resource using the following commands:

$> amplify add geo? Select which capability you want to add:  Map(visualize the geospatial data)❯ Location search(search by places, addresses, coordinates)? Provide a nameforthe location search index(place index):  <use the default ID or provide your own>? Who can access this Search Index?  Authorizedusersonly❯ Authorized and Guestusers? Do you want to configure advanced settings?(y/N)

Theplace index string isn't super critical, it's safe to either keep the default suggested ID or pick your own more meaningful name.

Finally, we need to make sure that we push to Amplify to make sure the changes are provisioned in AWS, using the following command:

amplify push

3. Hooray!

Hopefully, you now have a web app which will let users search for locations and show those locations on a map!

You can get a lot more information on neat ways to extend and customize this experience in ourofficial docs.