Building an Address Search Function Using Amplify Geo and MapLibre GL Geocoder
Tags: amazonlocationservice, vue, awsamplify, maplibre
Published: 2021-11-29 14:41:30

![img](https://day-journal.com/memo/images/try-070_01.png)
<br>

### I built an address search function using Amplify Geo and MapLibre GL Geocoder :tada:  

Amplify Geo was officially released the other day. Amplify Geo is one of the features of AWS Amplify that makes it easier to build Amazon Location Service. 
In this article, I tried to build a map application by adding an address search function with MapLibre GL Geocoder.

<br>

Advance Preparation
- Amplify Geo settings up to the map display function 

[Building a Map Application with Amplify Geo and Vue.js](https://dev.to/aws-builders/building-a-map-application-with-amplify-geo-and-vuejs-2226)

<br>

## Setting up Amplify Geo
First, we will configure Amplify Geo.
[Add location feature (geocoding)](https://day-journal.com/memo/aws-amplify-005)

<br>

If you only need a location function (geocoding), you can implement it with these two commands and the map function!
Amazon Location Service requires AWS console configuration and role configuration, but Amplify Geo does all of that for you!

```sh
amplify add geo
```

```sh
amplify push
```

This completes the configuration of Amplify Geo.

<br>

## Frontend
Next, let's build the actual map application.

Once you have configured the map display function of Amplify Geo, you only need to change "MapPane.vue" and "main.js".

<br>

execution environment
- node v16.10.0  
- npm v7.24.0 

<br>

Install MapLibre GL Geocoder in advance.

```sh
npm install @maplibre/maplibre-gl-geocoder
```

<br>

Overall composition

![img](https://day-journal.com/memo/images/try-070_02.png)


#### package.json

```json
{
  "name": "amplify-geo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@aws-amplify/ui-components": "^1.9.2",
    "@maplibre/maplibre-gl-geocoder": "^1.2.0",
    "aws-amplify": "^4.3.4",
    "core-js": "^3.6.5",
    "maplibre-gl": "^1.15.2",
    "maplibre-gl-js-amplify": "^1.1.2",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}
```

<br>

/src

#### main.js

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'maplibre-gl/dist/maplibre-gl.css'
import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css'
import 'maplibre-gl-js-amplify/dist/public/amplify-geocoder.css'

import {
  applyPolyfills,
  defineCustomElements
} from '@aws-amplify/ui-components/loader';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

applyPolyfills().then(() => {
  defineCustomElements(window);
});

const app = createApp(App);
app.config.isCustomElement = tag => tag.startsWith('amplify-');
app.use(store).use(router).mount('#app');
```

<br>

Load MapLibre GL Geocoder and wrappers.

```javascript
import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css'
import 'maplibre-gl-js-amplify/dist/public/amplify-geocoder.css'
```

<br>

/src/components

#### MapPane.vue

```vue
<template>
    <div class='mapPane'>
        <div id='map'></div>
    </div>
</template>

<script>
    import { createMap, createAmplifyGeocoder } from 'maplibre-gl-js-amplify';

    export default {
        name: 'MapPane',
        data() {
            return {
            }
        },
        mounted: async function () {
            this.mapCreate();
        },
        methods: {
            mapCreate: async function() {
                const map = await createMap({
                    container: 'map',
                    center: [139.7648, 35.6794],
                    zoom: 15,
                    bearing: 64.8,
                    pitch: 60,
                    hash: true,
                });
                map.addControl(createAmplifyGeocoder());
            },
        }
    }
</script>

<style scoped>
    #map {
        z-index: 0;
        height: 800px;
    }
</style>
```

<br>

Load MapLibre GL Geocoder wrapper.

```javascript
import { createMap, createAmplifyGeocoder } from 'maplibre-gl-js-amplify';
```

<br>

Load MapLibre GL Geocoder wrapper.

```javascript
map.addControl(createAmplifyGeocoder());
```

<br>

Let's check with a simple local server.

```shell
npm run serve
```

<br>

Start up a local server and try logging in :bulb: 

![img](https://day-journal.com/memo/images/try-070_00.gif)  

#### I was able to build an address search function using Amplify Geo and MapLibre GL Geocoder :thumbsup: 

We have confirmed that the combination of Amplify Geo and MapLibre GL Geocoder makes it easier to build an address search function than using Amplify Geo as it is. I will continue to explore other features as well :thumbsup: