Svelte Location Search via AWS Amplify

Have you ever wanted to be able to search for a point of interest in a Svelte app? Building on my previous 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 add two more lines of code to our existing Svelte component to enable this functionality.

Are you building mapping or location services web apps? DM me on Twitter - 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 called Geocoding. So, we can edit the previous AmplifyMap.svelte file to add two new lines:

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

Resulting in this updated file:

<script>
  import { onMount } from "svelte"

  export let width = "800px"
  export let height = "600px"

  async function initializeMap() {
    const map = await AmplifyMapLibre.createMap({
      container: "map", // DOM element to hold map.
      center: [-123.1187, 49.2819],
      zoom: 11,
      region: "us-west-2",
    })

    const geocoder = AmplifyMapLibre.createAmplifyGeocoder()
    map.addControl(geocoder)
  }

  onMount(() => {
    initializeMap()
  })
</script>

<div id="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 our docs here.

2. Add Search Resource

Before this will work properly, we need to provision the Location 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 is 5.2.2-geo.2).

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

And then we can add the Location 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 name for the location search index (place index):  
<use the default ID or provide your own>

? Who can access this Search Index?
  Authorized users only
❯ Authorized and Guest users

? Do you want to configure advanced settings? (y/N)

The place 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 our official docs.