Building an Address Search Function with Amazon Location SDK and API Key Function

Yasunori Kirimoto - Oct 24 '23 - - Dev Community

img

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!

GitHub logo 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

README02

Easily start geocoding with MapLibre GL JS and Amazon Location Service.


blog

Building an Address Search Function with Amazon Location SDK and API key function


Usage

README03


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

Install package

npm install
Enter fullscreen mode Exit fullscreen mode

build

npm run build
Enter fullscreen mode Exit fullscreen mode

dev

npm run dev
Enter fullscreen mode Exit fullscreen mode


README01


License

MIT

Copyright (c) 2023 MapLibre User Group Japan



Japanese


MapLibreGLJS & Amazon Location Service & ジオコーディング スターター

README02

MapLibre GL JSとAmazon Location Serviceでジオコーディングを手軽に始める


blog

Amazon Location SDKとAPIキーで住所検索機能を構築してみた


使用方法

README03


Amazon Location Serviceのマップ・APIキー(マップ)・ジオコーディング・APIキー(ジオコーディング)を作成


リージョン・APIキー(マップ)・マップ名・APIキー(ジオコーディング)・ジオコーディング名をenvファイルに設定

VITE_REGION = xxxxx
VITE_MAP_API_KEY = v1.public.xxxxx
VITE_MAP_NAME
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub

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

Start local server



npm run dev
Enter fullscreen mode Exit fullscreen mode

img

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

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

Install "amazon-location-utilities-datatypes," a library that converts Amazon Location Service responses to GeoJSON format.



npm install @aws/amazon-location-utilities-datatypes
Enter fullscreen mode Exit fullscreen mode

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!

AWS Geospatial · GitHub

Open-source projects and sample codes from AWS Geospatial - AWS Geospatial

favicon github.com

Building an Address Search Function

Finally, we will build the address search function. Some files are changed from the starter.

Overall Configuration
img

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

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

/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();
Enter fullscreen mode Exit fullscreen mode

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

Set up authentication for the API key.



const authHelper = await withAPIKey(placeApiKey);
const client = new LocationClient({
    region: region,
    ...authHelper.getLocationClientConfig()
});
Enter fullscreen mode Exit fullscreen mode

Geocoding from text.



const input = {
    IndexName: placeName,
    Text: "サッポロファクトリー",
};
const command = new SearchPlaceIndexForTextCommand(input);
const response = await client.send(command);
Enter fullscreen mode Exit fullscreen mode

Convert the geocoding response to GeoJSON.



const featureCollection = placeToFeatureCollection(response, {
    flattenProperties: true
});
Enter fullscreen mode Exit fullscreen mode

Let's check with a simple local server.



npm run dev
Enter fullscreen mode Exit fullscreen mode

You can combine the Amazon Location SDK with the API key functionality to display the results of an address search!
img

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);

...
Enter fullscreen mode Exit fullscreen mode

img

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);

...
Enter fullscreen mode Exit fullscreen mode

img

Related Articles

AWS Heroes

Building a Map Application with MapLibre GL JS and Amazon Location Service API key functionality

Yasunori Kirimoto for AWS Heroes ・ Sep 26 '23

#maplibre #amazonlocationservice #aws #foss4g

MapLibre User Group Japan

Building a Map Application with MapLibre GL JS and Svelte

Yasunori Kirimoto for MapLibre User Group Japan ・ Sep 21 '23

#maplibre #svelte #gis #foss4g

AWS Heroes

Trying to display an Amazon Location Service map in QGIS

Yasunori Kirimoto for AWS Heroes ・ Sep 4 '23

#qgis #amazonlocationservice #foss4g #aws

AWS Heroes

Use 3D map library with API key function of Amazon Location Service

Yasunori Kirimoto for AWS Heroes ・ Aug 2 '23

#amazonlocationservice #itowns #aws #foss4g

AWS Heroes

Amazon Location Service and AWS Amplify to Use Various Map Library

Yasunori Kirimoto for AWS Heroes ・ Jan 5 '23

#amazonlocationservice #amplify #aws #foss4g

References
Amazon Location Service
MapLibre GL JS

Image
Executive Power BI Dashboard: Streamlining Data-Driven Decision Making

powerbi, powerbidashboard, executivedashboard
Image
Resilience: Overcoming Setbacks

webdev, javascript, beginners, tutorial
Image
tehnik main slots online dengan arif
Image
Beware Of This Common Mistake With Your Bi Fold Door Repair
Image
14 Questions You Shouldn't Be Insecure To Ask About Bifold Door Repair
Image
Bet88
Image
24 Hours For Improving Accident Lawyers Firm
Image
Jenis Penjelasan Mengenai Judi Online
Image
Cat Flap Installation Cost Near Me
Image
Adding a Cat Flap to Your Bifold Doors
Image
kelebihan permainan slots online tembak ikan
Image
SW Alliance FAQs : Committing to Social Responsibility

swalliance
Image
Smarter, Faster Internet: Mohammad S A A Alothman’s Vision for AI-Driven Networks

alothman
Image
Introducing Rate Keeper: A Compact Utility for Robust Rate Limiting

webdev, javascript, api, ratelimit
Image
Electric Fire Place In Wall 101 The Ultimate Guide For Beginners
Image
Five Things Everybody Gets Wrong Concerning Best Accident Lawyer Near Me
Image
Are You Getting The Most From Your Accident Lawyer Phoenix?
Image
Test: How Much Do You Know About Asbestos Disease Compensation?
Image
Quick Guide: Spinning Up Vagrant in No Time

virtualmachine, ubuntu, linux, development
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .