Amplify Geo + Amplify CDN + Svelte!

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:

Blog