How to add a location search widget to your web app using Amazon Location Service

• maplibre-gl-geocoder

  2 44 1.5 JavaScript

  Geocoding for MapLibre

  

Now, let’s add a location search UI component to our map. First, import createAmplifyGeocoder into App.vue. This will create an instance of maplibre-gl-geocoder with some pre-defined settings.

• amazon-location-search-widget

  1 0 1.8 Vue

  Location Search with Amazon Location Service

We will also add some UI customizations; we will use a custom icon for markers and add popups to markers. Download the SVG icon and put it in src/assets.

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Vue.js

  381 206,993 7.7 TypeScript

  This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

  

In this post, you will learn how you can add a location search widget to your web app using Amazon Location Service’s Places API. We will build the app using AWS Amplify and Vue — We will create, deploy, and manage AWS resources using Amplify CLI and we will build the app components using Amplify JavaScript and MapLibre GL JS. The app will have a basemap with navigation controls and a location search widget with geocoding, reverse-geocoding, and autocomplete support — the following GIF shows the end results.

• vite

  791 64,913 9.9 TypeScript

  Next generation frontend tooling. It's fast!

  

Create a new Vue project using Vite.

• maplibre-gl-js

  55 5,730 9.9 TypeScript

  MapLibre GL JS - Interactive vector tile maps in WebGL2

  

In this post, you will learn how you can add a location search widget to your web app using Amazon Location Service’s Places API. We will build the app using AWS Amplify and Vue — We will create, deploy, and manage AWS resources using Amplify CLI and we will build the app components using Amplify JavaScript and MapLibre GL JS. The app will have a basemap with navigation controls and a location search widget with geocoding, reverse-geocoding, and autocomplete support — the following GIF shows the end results.

• amplify-js

  42 9,360 9.8 TypeScript

  A declarative JavaScript library for application development using cloud services.

  

In this post, you will learn how you can add a location search widget to your web app using Amazon Location Service’s Places API. We will build the app using AWS Amplify and Vue — We will create, deploy, and manage AWS resources using Amplify CLI and we will build the app components using Amplify JavaScript and MapLibre GL JS. The app will have a basemap with navigation controls and a location search widget with geocoding, reverse-geocoding, and autocomplete support — the following GIF shows the end results.

• amplify-flutter

  47 1,285 9.5 Dart

  A declarative library with an easy-to-use interface for building Flutter applications on AWS.

  

In this post, you will learn how you can add a location search widget to your web app using Amazon Location Service’s Places API. We will build the app using AWS Amplify and Vue — We will create, deploy, and manage AWS resources using Amplify CLI and we will build the app components using Amplify JavaScript and MapLibre GL JS. The app will have a basemap with navigation controls and a location search widget with geocoding, reverse-geocoding, and autocomplete support — the following GIF shows the end results.

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project