DEV Community

Cover image for Building a Map Application with Amazon Location Service, OpenLayers, and AWS Amplify
Yasunori Kirimoto for AWS Heroes

Posted on • Edited on

8 4

Building a Map Application with Amazon Location Service, OpenLayers, and AWS Amplify

img

I built a map application using Amazon Location Service, OpenLayers, and AWS Amplify 🎉

Advance Preparation

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 "openlayers-starter" and installs the “AWS Amplify” Package and "Maplibre GL JS Amplify" packages in advance. Also, install "MapLibre OpenLayers layer" package to display vector tiles.

npm install aws-amplify
npm install maplibre-gl-js-amplify
npm install @geoblocks/ol-maplibre-layer
Enter fullscreen mode Exit fullscreen mode

package.json

{
  "name": "openlayers-starter",
  "version": "6.15.1",
  "description": "",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "Yasunori Kirimoto",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.7.4",
    "vite": "^3.0.4"
  },
  "dependencies": {
    "@geoblocks/ol-maplibre-layer": "^0.0.4",
    "aws-amplify": "^4.3.30",
    "maplibre-gl-js-amplify": "^2.0.3",
    "ol": "^6.15.1"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

img

amplify add auth
Enter fullscreen mode Exit fullscreen mode

img

amplify add geo
Enter fullscreen mode Exit fullscreen mode

img

amplify push
Enter fullscreen mode Exit fullscreen mode

img

You can also check the deployment status in the AWS Management Console.
img

This completes the AWS Amplify configuration!

Building the Map Application

Finally, let's build the actual map application.

Overall composition
img

vite.config.ts

Configure the combination of AWS Amplify and OpenLayers to be executable in Vite.

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    },
  },
  define: {
    'window.global': {}
  },
  build: {
    target: 'esnext'
  },
})
Enter fullscreen mode Exit fullscreen mode

/src

@geoblocks/ol-maplibre-layer.d.ts

Add the MapLibre OpenLayers layer type definition file.

declare module '@geoblocks/ol-maplibre-layer';
Enter fullscreen mode Exit fullscreen mode

/src

main.ts

Configure OpenLayers to display Amazon Location Service map styles.

import './style.css'
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import Source from 'ol/source/Source';
import { fromLonLat } from 'ol/proj';
import { ScaleLine } from 'ol/control';
import MapLibreLayer from '@geoblocks/ol-maplibre-layer';
import { Amplify } from 'aws-amplify';
import { Auth } from 'aws-amplify';
import { Geo, AmazonLocationServiceMapStyle } from '@aws-amplify/geo';
import awsconfig from './aws-exports';
import { AmplifyMapLibreRequest } from 'maplibre-gl-js-amplify';

Amplify.configure(awsconfig);
const credentials = await Auth.currentCredentials();
const defaultMap = Geo.getDefaultMap() as AmazonLocationServiceMapStyle;
const { transformRequest } = new AmplifyMapLibreRequest(
    credentials,
    defaultMap.region
);

const map = new Map({
    target: 'map',
    layers: [
        new MapLibreLayer({
            maplibreOptions: {
                style: Geo.getDefaultMap().mapName,
                transformRequest: transformRequest,
            },
            source: new Source({
                attributions: [
                    '© 2022 HERE',
                ],
                attributionsCollapsible: false,
            }),
        }),
    ],
    view: new View({
        center: fromLonLat([139.767, 35.681]),
        zoom: 11,
    }),
});

map.addControl(new ScaleLine({
    units: 'metric'
}));
Enter fullscreen mode Exit fullscreen mode

Now we can display the Amazon Location Service map style in OpenLayers!
img

Related Articles

References
Amazon Location Service
AWS Amplify
OpenLayers

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (0)

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, cherished by the supportive DEV Community. Coders of every background are encouraged to bring their perspectives and bolster our collective wisdom.

A sincere “thank you” often brightens someone’s day—share yours in the comments below!

On DEV, the act of sharing knowledge eases our journey and forges stronger community ties. Found value in this? A quick thank-you to the author can make a world of difference.

Okay