DEV Community

Cover image for Building an Address Search Function Using Amplify Geo and MapLibre GL Geocoder
Yasunori Kirimoto for AWS Community Builders

Posted on

6 2

Building an Address Search Function Using Amplify Geo and MapLibre GL Geocoder

img

I built an address search function using Amplify Geo and MapLibre GL Geocoder πŸŽ‰

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.

Advance Preparation

  • Amplify Geo settings up to the map display function

Building a Map Application with Amplify Geo and Vue.js

Setting up Amplify Geo

First, we will configure Amplify Geo.
Add location feature (geocoding)

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!

amplify add geo
Enter fullscreen mode Exit fullscreen mode
amplify push
Enter fullscreen mode Exit fullscreen mode

This completes the configuration of Amplify Geo.

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".

execution environment

  • node v16.10.0
  • npm v7.24.0

Install MapLibre GL Geocoder in advance.

npm install @maplibre/maplibre-gl-geocoder
Enter fullscreen mode Exit fullscreen mode

Overall composition

img

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

/src

main.js

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

Load MapLibre GL Geocoder and wrappers.

import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css'
import 'maplibre-gl-js-amplify/dist/public/amplify-geocoder.css'
Enter fullscreen mode Exit fullscreen mode

/src/components

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

Load MapLibre GL Geocoder wrapper.

import { createMap, createAmplifyGeocoder } from 'maplibre-gl-js-amplify';
Enter fullscreen mode Exit fullscreen mode

Load MapLibre GL Geocoder wrapper.

map.addControl(createAmplifyGeocoder());
Enter fullscreen mode Exit fullscreen mode

Let's check with a simple local server.

npm run serve
Enter fullscreen mode Exit fullscreen mode

Start up a local server and try logging in πŸ’‘

img

I was able to build an address search function using Amplify Geo and MapLibre GL Geocoder πŸ‘

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 πŸ‘

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post β†’

Top comments (0)

Best Practices for Running  Container WordPress on AWS (ECS, EFS, RDS, ELB) using CDK cover image

Best Practices for Running Container WordPress on AWS (ECS, EFS, RDS, ELB) using CDK

This post discusses the process of migrating a growing WordPress eShop business to AWS using AWS CDK for an easily scalable, high availability architecture. The detailed structure encompasses several pillars: Compute, Storage, Database, Cache, CDN, DNS, Security, and Backup.

Read full post