An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Some of Our Sources
View All SourcesHelp Webnuz
Referal links:
Building a Map Application with Amplify Geo and Vue.js
I built a map application using Amplify Geo and Vue.js
Amplify Geo was officially released to the public the other day, so I got to try it out.
Amplify Geo is a feature of AWS Amplify that allows you to build Amazon Location Service easier!
Advance Preparation
- Setting up AWS Amplify and Vue.js to the login feature
Building a login function with AWS Amplify, Amplify UI Vue, and Vue 3
Setting up Amplify Geo
First, we will configure Amplify Geo.
Add location feature (map)
If you only need a location function (map), you can implement it with these two commands!
Amazon Location Service requires AWS console configuration and role configuration, but Amplify Geo does all of that for you!
amplify add geoamplify pushThis completes the configuration of Amplify Geo.
Frontend
Next, let's build the actual map application.
Once Amplify and Vue.js are configured, it's just a matter of adding a new "MapPane.vue" and changing some of the code.
execution environment
- node v16.10.0
- npm v7.24.0
Install MapLibre GL JS v1 and MapLibre GL JS Amplify, a wrapper library, in advance.
npm install [email protected]npm install maplibre-gl-js-amplifyOverall composition
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", "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" ]}/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 { 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');Load MapLibre GL JS.
import 'maplibre-gl/dist/maplibre-gl.css'/src/views
Home.vue
<template> <div class="home"> <h2>Amplify Geo</h2> <MapPane></MapPane> <amplify-sign-out></amplify-sign-out> </div></template><script>import MapPane from '@/components/MapPane.vue'export default { name: 'Home', components: { MapPane }}</script>Set the map component.
<MapPane></MapPane>Loads the map component.
import MapPane from '@/components/MapPane.vue'export default { name: 'home', components: { MapPane }}/src/components
MapPane.vue
<template> <div class='mapPane'> <div id='map'></div> </div></template><script> import { createMap, drawPoints } 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.on('load', function () { drawPoints('pointsSource', [ { coordinates: [139.7646, 35.6827], title: 'Point01', address: 'Main Points', }, { coordinates: [139.7720, 35.6768], title: 'Point02', }, { coordinates: [139.7607, 35.6759], }, ], map, { showCluster: true, unclusteredOptions: { showMarkerPopup: true, defaultColor: '#005773' }, clusterOptions: { showCount: true, fillColor: '#005773' }, } ); }); } } }</script><style scoped> #map { z-index: 0; height: 800px; }</style>Load the map and marker functions in MapLibre GL JS Amplify.
import { createMap, drawPoints } from 'maplibre-gl-js-amplify';Set up the map in MapLibre GL JS Amplify.
const map = await createMap({ container: 'map', center: [139.7648, 35.6794], zoom: 15, bearing: 64.8, pitch: 60, hash: true,});Set the marker in MapLibre GL JS Amplify.
drawPoints('pointsSource', [ { coordinates: [139.7646, 35.6827], title: 'Point01', address: 'Main Points', }, { coordinates: [139.7720, 35.6768], title: 'Point02', }, { coordinates: [139.7607, 35.6759], }, ], map, { showCluster: true, unclusteredOptions: { showMarkerPopup: true, defaultColor: '#005773' }, clusterOptions: { showCount: true, fillColor: '#005773' }, });Let's check with a simple local server.
npm run serveStart up a local server and try logging in
I was able to build a map application using Amplify Geo combined with Vue.js
Using Amplify Geo eliminates the need to configure settings and roles in the AWS console, making it easier to build than using Amazon Location Service as it is. However, when customizing beyond the existing functions, MapLibre GL JS needs to be directly loaded and developed, and it seems that more complex customization can be done by using it in combination with the necessary parts of Amplify Geo. I'll keep exploring this
Original Link: https://dev.to/aws-builders/building-a-map-application-with-amplify-geo-and-vuejs-2226
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To