DEV Community: Nicholas Reid

Svelte Location Search via AWS Amplify

Nicholas Reid — Tue, 07 Sep 2021 21:36:58 +0000

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.

Amplify Geo + Amplify CDN + Svelte!

Nicholas Reid — Mon, 09 Aug 2021 20:14:16 +0000

Have you ever wanted to add maps to your Svelte app?

So, we're already seeing some great feedback on our Amplify Geo developer preview release - thanks to everyone who has taken the time to play with it. I thought I'd share some hacky code I threw together to try out using our new CDN-delivered Amplify libraries in a mostly-unbundled Svelte app.

CDN-powered unbundling can be nice. Until recently, Amplify-powered JS apps have been conventionally bundled at build time. CDN unbundling is particularly handy for Svelte+Rollup, because none of the Amplify libraries need to be parsed each build iteration, meaning lightning-fast refreshes. Also, the resulting bundle is pretty small. My bundle.js for this app is just 19Kb, unminified.

1. Svelte Starter

Grab your favorite Svelte template. I'm a typescript+pug+stylus weirdo, but the standard Svelte-provided one is a good place to start.

npx degit sveltejs/template my-geo-app
cd my-geo-app

2. Add the Amplify CDN libraries to your index.html

Because we're using a CDN-based approached, we can just add these libraries to the public/index.html file to have them loaded by the browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />

    <title>My Example Map</title>

    <link rel="icon" type="image/png" href="/favicon.png" />
    <link rel="stylesheet" href="/global.css" />
    <link rel="stylesheet" href="/build/bundle.css" />
    <link href="https://cdn.amplify.aws/packages/maplibre-gl/1.14.0/maplibre-gl.css" rel="stylesheet" integrity="sha384-sZlnv03zeGbcXDiuZ98TrNVZFIfpsVhN0itUxRFONLo6lOZskJPIMlOwDy+nloRF" crossorigin="anonymous" referrerpolicy="no-referrer"></link>
    <link href="https://cdn.amplify.aws/packages/maplibre-gl-geocoder/1.0.1/maplibre-gl-geocoder.css" rel="stylesheet" integrity="sha384-9INm4qwCgRPHsynDw8uatP2FHVIMItwPU+PH8RtOzYAGEjU4Hiirfmuc3Rsa/pBq" crossorigin="anonymous" referrerpolicy="no-referrer"></link>

    <script src="https://cdn.amplify.aws/packages/core/4.2.1-geo.20/aws-amplify-core.min.js" integrity="sha384-ZJ0BipyxRjDHPcTLilxOMRf9grNEwTTUOmr8l8MUprgnpAnpK4Fz20ndOQElCtWb" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/auth/5.0.4-geo/aws-amplify-auth.min.js" integrity="sha384-rqyJfFR2070OQyXIQqomdGCYa6TaR/1asvv2oaz9wB6R8YSiIBC08mWwgVtr1NNk" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/maplibre-gl/1.14.0/maplibre-gl.js" integrity="sha384-jWZKsznBFj0Nl3kUaRKmmk89Hew9zDhTnmOz0pOLceWY7iag+l/8QNPeD0cQYaVG" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/maplibre-gl-geocoder/1.1.0/maplibre-gl-geocoder.min.js" integrity="sha384-kB2/fEHOpfHm1Gzute77/GLQw40BlWkV4XCaqQ/+P8zPIwUm4X5gZxcYx7Nj3tpC" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/geo/0.0.2-geo.6654/aws-amplify-geo.min.js" integrity="sha384-3WpvDe5YSr8Xdmc31s/1cKXlG5DCmeQA2PZkuQUIgwPPwGNY/kbrTYYItxSO8JJJ" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.0.7/maplibre-gl-js-amplify.umd.min.js" integrity="sha384-UQ8x/n1AjWGF3Ti2loSD8SOXsISAZw8yqr+4xWwMOajLlmS36nbWeno3U1e003Pl" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script defer src="/build/bundle.js"></script>
  </head>
  <body></body>
</html>

3. Create an AmplifyMap component.

Add a new file called AmplifyMap.svelte to your src directory, with something like this:

<script>
  import { onMount } from "svelte"

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

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

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

<div id="map" style="width: {width}; height: {height};" />

4. Add AmplifyMap to App

In your App.svelte, import the AmplifyMap component you just created, and add it to the template. We're passing static height and width values to the map component, but a better way might be to make it responsive to window resizing by binding them dynamically.

<script>
  import AmplifyMap from "./AmplifyMap.svelte"
</script>

<main>
  <h1>My Example Map</h1>
  <div id="wrapper">
    <AmplifyMap width="900px" height="600px" />
  </div>
</main>

5. Add Amplify

Last, but most important, you'll need to add AWS Amplify to your project. There are a few ways to do this, but the easiest is via the Amplify CLI. You can just follow the first page of our Getting Started guide here. This takes you through the process of installing the Amplify CLI and provisioning the Amplify Geo backend services in your AWS account.

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.

Your main.js (or main.ts) file should look something like this after you've followed the instructions:

import App from "./App.svelte"

//@ts-ignore
const Amplify = aws_amplify_core.Amplify

import awsconfig from "./aws-exports"
Amplify.configure(awsconfig)

const app = new App({
  target: document.body
})
export default app

6. Happy Mapping!

If everything is wired up correctly, when you npm run dev your app, you should see something like the following in your localhost:5000 browser session: