I built an address search function with Amazon Location SDK and API key. 🎉
In the past, to use the Amazon Location Service, you had the option of configuring it manually or using Amplify Geo. However, with the release of the Amazon Location SDK and API Key feature this year, more options are now available, and the Amazon Location SDK makes manual configuration easier. I would like to explain the address search feature using this new functionality in this article.
The created environment is available on GitHub. Please use it!
mug-jp / maplibregljs-amazon-location-service-place-indexes-starter
Easily start geocoding with MapLibre GL JS and Amazon Location Service.
maplibregljs-amazon-location-service-place-indexes-starter
Easily start geocoding with MapLibre GL JS and Amazon Location Service.
- MapLibre GL JS v3.3.1
- Amazon Location Service
- node v20.6.1
- npm v9.8.1
blog
Building an Address Search Function with Amazon Location SDK and API key function
Usage
Create Amazon Location Service "map", "API key(map)", "geocoding" and "API key(geocoding)"
Set "region", "API key(map)", "map name", "API key(geocoding)" and "geocoding name" in env file
VITE_REGION = xxxxx
VITE_MAP_API_KEY = v1.public.xxxxx
VITE_MAP_NAME = xxxxx
VITE_PLACE_API_KEY = v1.public.xxxxx
VITE_PLACE_NAME = xxxxx
Install package
npm install
build
npm run build
dev
npm run dev
License
MIT
Copyright (c) 2023 MapLibre User Group Japan
Japanese
MapLibreGLJS & Amazon Location Service & ジオコーディング スターター
MapLibre GL JSとAmazon Location Serviceでジオコーディングを手軽に始める
- MapLibre GL JS v3.3.1
- Amazon Location Service
- node v20.6.1
- npm v9.8.1
blog
Amazon Location SDKとAPIキーで住所検索機能を構築してみた
使用方法
Amazon Location Serviceのマップ・APIキー(マップ)・ジオコーディング・APIキー(ジオコーディング)を作成
リージョン・APIキー(マップ)・マップ名・APIキー(ジオコーディング)・ジオコーディング名をenvファイルに設定
VITE_REGION = xxxxx
VITE_MAP_API_KEY = v1.public.xxxxx
VITE_MAP_NAME
…Advance Preparation
- Create an API key for Amazon Location Service
Amazon Location Service #004 - API Key Creation (Maps)
Amazon Location Service #005 - API Key Creation (Geocoding)
- Use the built environment to get started with MapLibre GL JS and Amazon Location Service easily
maplibregljs-amazon-location-service-starter
Execution environment
- node v20.6.1
- npm v9.8.1
How to use the MapLibre GL JS and Amazon Location Service starter
Use the existing starter to build an address search function. Fork or download the package to your local environment and verify it works.
Install the package
npm install
Start local server
npm run dev
Install Amazon Location SDK
Next, install the necessary libraries for the Amazon Location SDK. Installing it will make it easier to authenticate the API and combine it with MapLibre GL JS.
Install the AWS SDK. "client-location" is an SDK that allows you to manipulate the Amazon Location Service.
npm install @aws-sdk/client-location
Install "amazon-location-utilities-auth-helper," a library that facilitates authentication with Amazon Location Service API keys and Cognito.
npm install @aws/amazon-location-utilities-auth-helper
Install "amazon-location-utilities-datatypes," a library that converts Amazon Location Service responses to GeoJSON format.
npm install @aws/amazon-location-utilities-datatypes
I contributed to "amazon-location-utilities-datatypes" to add an optional feature because it was sometimes difficult to use in combination with MapLibre GL JS!
Building an Address Search Function
Finally, we will build the address search function. Some files are changed from the starter.
package.json
{
"name": "maplibregljs-amazon-location-service-place-indexes-starter",
"version": "3.3.1",
"description": "",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"keywords": [],
"author": "MapLibre User Group Japan",
"license": "ISC",
"devDependencies": {
"typescript": "^5.2.2",
"vite": "^4.4.9"
},
"dependencies": {
"@aws-sdk/client-location": "^3.433.0",
"@aws/amazon-location-utilities-auth-helper": "^1.0.2",
"@aws/amazon-location-utilities-datatypes": "^1.0.3",
"maplibre-gl": "^3.3.1"
}
}
.env
Set the region, map API key, map name, geocoding API key, and geocoding name created in the preliminaries to the env file.
VITE_REGION = xxxxx
VITE_MAP_API_KEY = v1.public.xxxxx
VITE_MAP_NAME = xxxxx
VITE_PLACE_API_KEY = v1.public.xxxxx
VITE_PLACE_NAME = xxxxx
/src
main.ts
import './style.css'
import 'maplibre-gl/dist/maplibre-gl.css';
import maplibregl from 'maplibre-gl';
import { LocationClient, SearchPlaceIndexForTextCommand } from "@aws-sdk/client-location";
import { placeToFeatureCollection } from '@aws/amazon-location-utilities-datatypes';
import { withAPIKey } from '@aws/amazon-location-utilities-auth-helper';
const region = import.meta.env.VITE_REGION;
const mapApiKey = import.meta.env.VITE_MAP_API_KEY;
const mapName = import.meta.env.VITE_MAP_NAME;
const placeApiKey = import.meta.env.VITE_PLACE_API_KEY;
const placeName = import.meta.env.VITE_PLACE_NAME;
async function initialize() {
const authHelper = await withAPIKey(placeApiKey);
const client = new LocationClient({
region: region,
...authHelper.getLocationClientConfig()
});
const input = {
IndexName: placeName,
Text: "サッポロファクトリー",
};
const command = new SearchPlaceIndexForTextCommand(input);
const response = await client.send(command);
const featureCollection = placeToFeatureCollection(response, {
flattenProperties: true
});
const map = new maplibregl.Map({
container: 'map',
style: `https://maps.geo.${region}.amazonaws.com/maps/v0/maps/${mapName}/style-descriptor?key=${mapApiKey}`,
center: [139.767, 35.681],
zoom: 11,
});
map.addControl(
new maplibregl.NavigationControl({
visualizePitch: true,
})
);
map.on('load', function () {
map.addSource("search-result", {
type: "geojson",
data: featureCollection
});
map.addLayer({
'id': "search-result",
'type': 'circle',
'source': 'search-result',
'layout': {},
'paint': {
'circle-color': '#007cbf',
'circle-radius': 10
}
});
map.on('click', 'search-result', (e) => {
const coordinates = e.lngLat;
const description = e.features![0].properties['Place.Label'];
new maplibregl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
map.on('mouseenter', 'search-result', () => {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'search-result', () => {
map.getCanvas().style.cursor = '';
});
});
}
initialize();
Define the Amazon Location SDK.
import { LocationClient, SearchPlaceIndexForTextCommand } from "@aws-sdk/client-location";
import { placeToFeatureCollection } from '@aws/amazon-location-utilities-datatypes';
import { withAPIKey } from '@aws/amazon-location-utilities-auth-helper';
Set up authentication for the API key.
const authHelper = await withAPIKey(placeApiKey);
const client = new LocationClient({
region: region,
...authHelper.getLocationClientConfig()
});
Geocoding from text.
const input = {
IndexName: placeName,
Text: "サッポロファクトリー",
};
const command = new SearchPlaceIndexForTextCommand(input);
const response = await client.send(command);
Convert the geocoding response to GeoJSON.
const featureCollection = placeToFeatureCollection(response, {
flattenProperties: true
});
Let's check with a simple local server.
npm run dev
You can combine the Amazon Location SDK with the API key functionality to display the results of an address search!
Here are some other examples!
Geocoding from ID.
import { LocationClient, GetPlaceCommand } from "@aws-sdk/client-location";
...
const input = {
IndexName: placeName,
PlaceId: "AQABAFkA9d5eLnjB7XKy9_p0QX3oXD4nrLodHDtIvvzOwEyHbBx9m7LhmUP9WoNILhCrNzsL_DzOmUqagzNOgEabayDDLe6Oxh0rXolepvlZamPS5Q4KX41udsz856yYG6UdXqO6JmoLazImn-Isq2p20k5q_0902-uClFkGTw"
};
const command = new GetPlaceCommand(input);
...
Reverse geocoding from the specified location.
import { LocationClient, SearchPlaceIndexForPositionCommand } from "@aws-sdk/client-location";
...
const input = {
IndexName: placeName,
Position: [139.767, 35.681],
};
const command = new SearchPlaceIndexForPositionCommand(input);
...
Related Articles
Building a Map Application with MapLibre GL JS and Amazon Location Service API key functionality
Yasunori Kirimoto for AWS Heroes ・ Sep 26 '23
Building a Map Application with MapLibre GL JS and Svelte
Yasunori Kirimoto for MapLibre User Group Japan ・ Sep 21 '23
Trying to display an Amazon Location Service map in QGIS
Yasunori Kirimoto for AWS Heroes ・ Sep 4 '23
Use 3D map library with API key function of Amazon Location Service
Yasunori Kirimoto for AWS Heroes ・ Aug 2 '23
Amazon Location Service and AWS Amplify to Use Various Map Library
Yasunori Kirimoto for AWS Heroes ・ Jan 5 '23
References
Amazon Location Service
MapLibre GL JS
Top comments (0)