Amplify Geo + Amplify CDN + Svelte!
Tags: svelte, aws, mapping, cdn
Published: 2021-08-09 20:14:16

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

So, we're already seeing some great feedback on our [Amplify Geo](https://docs.amplify.aws/cli/geo/maps) 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](https://github.com/sveltejs/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.

```html
<!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:

```html
<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](https://svelte.dev/tutorial/dimensions).

```html
<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] (https://docs.amplify.aws/lib/geo/getting-started/q/platform/js). 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:

```javascript
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:


![amplify_geo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pzwbjaiaytumuy7ketku.png)