I built a map application using Amazon Location Service, Leaflet, and AWS Amplify 🎉
Advance Preparation
Installation of AWS Amplify
AWS Amplify #001 - InstallationUse the built environment to get started with Leaflet easily
leaflet-starter
Execution environment
- node v18.1.0
- npm v8.8.0
The following is a detailed explanation.
- Building the Environment
- Setting up AWS Amplify
- Building the Map Application
Building the Environment
First, we will build the environment.
The environment uses "leaflet-starter" and installs the "AWS Amplify" Package and "Maplibre GL JS Amplify" packages in advance. Also, install "MapLibre GL JS" and "MapLibre GL Leaflet" packages to display vector tiles.
npm install aws-amplify
npm install maplibre-gl-js-amplify@1.6.0
npm install maplibre-gl@1.15.3
npm install @maplibre/maplibre-gl-leaflet
package.json
{
"name": "leaflet-starter",
"version": "1.9.2",
"description": "",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"keywords": [],
"author": "Yasunori Kirimoto",
"license": "ISC",
"devDependencies": {
"typescript": "^4.8.4",
"vite": "^3.1.8"
},
"dependencies": {
"@maplibre/maplibre-gl-leaflet": "^0.0.17",
"@types/leaflet": "^1.8.0",
"aws-amplify": "^4.3.38",
"leaflet": "^1.9.2",
"maplibre-gl": "^1.15.3",
"maplibre-gl-js-amplify": "^1.6.0"
}
}
This completes the environment build!
Setting up AWS Amplify
Next, we will configure AWS Amplify.
Add authentication functions as usual. For the map function, select "HERE Explore" and set the access target to "Authorized and Guest users."
amplify init
amplify add auth
amplify add geo
amplify push
You can also check the deployment status in the AWS Management Console.
This completes the AWS Amplify configuration!
Building the Map Application
Finally, let's build the actual map application.
Overall composition
vite.config.ts
Configure the combination of AWS Amplify and Leaflet to be executable in Vite.
import { defineConfig } from 'vite'
export default defineConfig({
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser',
},
},
define: {
'window.global': {}
},
build: {
target: 'esnext',
commonjsOptions: {
ignoreDynamicRequires: true
}
}
})
/src
main.ts
Configure Leaflet to display Amazon Location Service map styles.
import './style.css';
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';
import '@maplibre/maplibre-gl-leaflet';
import { Amplify } from '@aws-amplify/core';
import { Auth } from '@aws-amplify/auth';
import { Geo, AmazonLocationServiceMapStyle } from '@aws-amplify/geo';
import awsconfig from './aws-exports';
import { AmplifyMapLibreRequest } from 'maplibre-gl-js-amplify';
L.Icon.Default.imagePath = 'img/icon/';
Amplify.configure(awsconfig);
const credentials = await Auth.currentCredentials();
const defaultMap = Geo.getDefaultMap() as AmazonLocationServiceMapStyle;
const { transformRequest } = new AmplifyMapLibreRequest(
credentials,
defaultMap.region
);
const map = L.map('map', {
center: [35.681, 139.767],
zoom: 11,
layers: [
L.maplibreGL({
style: Geo.getDefaultMap().mapName,
transformRequest: transformRequest,
})
],
});
map.attributionControl.addAttribution(
'© 2022 HERE'
);
Now we can display the Amazon Location Service map style in Leaflet!
Related Articles
References
Amazon Location Service
AWS Amplify
Leaflet
Top comments (0)