This content originally appeared on DEV Community and was authored by Nicholas Reid
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 take the time to play with it. I thought I'd share some hacky code I put together to try out using our new CDN-delivered Amplify libraries in an 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.jsfor 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
<!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" />
<script
src="https://cdn.amplify.aws/packages/core/4.2.1-geo/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/geo/0.0.2-geo.6648/aws-amplify-geo.min.js"
integrity="sha384-VBNaB4q1F3zSs1BgIf7mYogamWN2lITAmfVw3FyxuyFdyaKucigyjrJ6RmQvdbN2"
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdn.amplify.aws/packages/maplibre-gl-js-amplify/1.0.2/maplibre-gl-js-amplify.umd.min.js"
integrity="sha384-g2Tb3Pa8Gpt7OYj324blBhR91QsJeBhvwWqRwcjRHvWk8XE8rjiUs8E0aW/iDnPe"
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"
const AmplifyMapLibreRequest = maplibreAmplify.AmplifyMapLibreRequest
async function initializeMap() {
const map = await AmplifyMapLibreRequest.createMapLibreMap({
container: "map", // An HTML Element or HTML element ID to render the map in https://maplibre.org/maplibre-gl-js-docs/api/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
@geobranch 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,
props: {
name: "world",
},
})
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:
This content originally appeared on DEV Community and was authored by Nicholas Reid
Nicholas Reid | Sciencx (2021-08-09T20:14:16+00:00) Amplify Geo + Amplify CDN + Svelte!. Retrieved from https://www.scien.cx/2021/08/09/amplify-geo-amplify-cdn-svelte/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.