Vuetify Here Geocoder Autocomplete

Overview

Vuetify Here Geocoder Autocomplete

A wrapper for the v-autocomplete component from Vuetify to use the autocomplete feature of the new HERE Geocoding & Search API

GitHub Workflow Status (branch) Codecov branch VueJS 2.x npm GitHub

Demo

A demo is available here.

Installation

Run in your terminal:

# npm
npm install vuetify-here-geocoder-autocomplete

# Yarn
yarn add vuetify-here-geocoder-autocomplete

You also need to sign up for a free account with Here, which offers 250K transactions per month for free (starting in 2021), to generate an API key.

โš ๏ธ Warning: The autocomplete function of the HERE Geocoding & Search API is currently still in BETA state. But works fine in combination with this library. โš ๏ธ

๐Ÿ“Œ Note: This library does not work with Internet Explorer because it uses the standard Javascript fetch API to communicate with the Here API. You can find more information here.
If it is absolutely mandatory for you to be able to run in Internet Explorer, please create an issue and we can discuss the options.

Usage

">
<template
  ><v-here-geocoder-autocomplete
    :here-api-key="myHereApiKey"
    v-model="place"
    debounce-time
    clearable
  />
template>
<script>
import VHereGeocoderAutocomplete from "vuetify-here-geocoder-autocomplete";
export default {
  name: "App",
  components: {
    VHereGeocoderAutocomplete
  },
  data() {
    return {
      place: null,
      myHereApiKey: "API_KEY" // I highly recommend you to inject the API key via an environment variable
    };
  }
};
script>

The variable place looks like this:

Deutschland, 10557, Berlin, Platz der Republik 1" }">
{
  "title": "Deutschland, 10557, Berlin, Platz der Republik 1",
  "id": "here:af:streetsection:yS70afKYO41l5M.aTlXOQD:CgcIBCDVrstQEAEaATE",
  "resultType": "houseNumber",
  "houseNumberType": "PA",
  "address": {
    "label": "Platz der Republik 1, 10557 Berlin, Deutschland",
    "countryCode": "DEU",
    "countryName": "Deutschland",
    "stateCode": "BE",
    "state": "Berlin",
    "countyCode": "B",
    "county": "Berlin",
    "city": "Berlin",
    "district": "Tiergarten",
    "street": "Platz der Republik",
    "postalCode": "10557",
    "houseNumber": "1"
  },
  "highlight": "Deutschland, 10557, Berlin, Platz der Republik 1"
}

However, this depends on the type of search result, the fields title, id and address will always be included in the result.

The highlight field is the string that is displayed to the user and converts the highlight details provided by the API to the value of the title field. However, this field can also be set with a custom highlighting using the customHighlight property (see Custom Highlighting).

Note for initial value

If you don't store this kind of object in your application, you can still pass a plain string that is equivalent to the value title, e.g.: Deutschland, 10557, Berlin, Platz der Republik 1.

If this value is not null during the initialization of the component, it will automatically request the Here API and use the first hit.

That means if place is equal to Deutschland, 10557, Berlin, Platz der Republik 1, it will be automatically transformed to the above JSON object.

Props

Authentication Properties

One of the two properties must be defined for the component to communicate with the Here API.

Property Type Default Description
here-api-key String Sign up with Here to generate a free API key
here-bearer-o-auth-token String You can obtain an OAuth token, for example, by using your backend to contact the OAuth interface of Here's Geocoding and Search API with the credentials for Here. The token obtained is then only valid for a limited time and can be passed to the frontend and this component to enable autocomplete requests.
This procedure is more difficult than using the API key, but it prevents abuse of the API key, which can be extracted from the frontend and used by third parties for their own purposes at your expense.

Further information
Guide to get token

Here API Query Properties

These properties can be used to directly configure the search query to the here autocomplete API. The values are inserted unchanged into the query. The documentation for the usage can be found in the API Reference in the autocomplete section.

Property Type Default Description
at String null Check the at parameter in the API Reference โ†’ Autocomplete โ†’ QUERY PARAMETERS โ†’ at
in String null Check the limit parameter in the API Reference โ†’ Autocomplete โ†’ QUERY PARAMETERS โ†’ in
limit Number null Check the in parameter in the API Reference โ†’ Autocomplete โ†’ QUERY PARAMETERS โ†’ limit
types String null Check the types parameter in the API Reference โ†’ Autocomplete โ†’ QUERY PARAMETERS โ†’ types
lang String navigator.language (if available, otherwise null) Check the lang parameter in the API Reference โ†’ Autocomplete โ†’ QUERY PARAMETERS โ†’ lang

Filter Properties

Since the types property of the Here Autocomplete API offers only limited possibilities to build for example a country picker, the search results can be filtered by the properties contained in the search result object.

CAUTION the fields in the result objects are not always consistent. For what exactly to filter for in order to achieve the desired restriction, see the examples of the API and the API Reference.

In any case, the types property must also be set, since the filtering is based only on the 5 (default) results returned by the API.

Example: To limit the results to countries, the properties types="area" and administrative-area-type="country" must be set.

Property Type Default Description
resultType String null Filters for results where resultType exists in the search result object and matches the value defined here.
houseNumberType String null Filters for results where houseNumberType exists in the search result object and matches the value defined here.
localityType String null Filters for results where localityType exists in the search result object and matches the value defined here.
administrativeAreaType String null Filters for results where administrativeAreaType exists in the search result object and matches the value defined here.

Other Properties

Property Type Default Description
debounceTime Number|Boolean false Pass true to debounce the API requests for 250ms, or pass a custom delay.
custom-highlight Function See Custom Highlighting
prependIcon String "mdi-map-marker" Default styling, you can overwrite it like every other Vuetify property

Furthermore, every prop from Vuetify Autocomplete component is supported, except items, search-input.sync, filter, loading, and return-object which are used internally.

Events

Name Description Arguments
input Emitted when the user selects a place @input="onInput", onInput(place) { }
clear Emitted when the user click on the clear button (used with prop clearable) @clear="onClear", onClear() { }
error Emitted when there is an error with the Here API @error="onError", onError(error) { }

Custom highlighting

You can override the default behavior of highlighted search query hits via a custom function and/or slot. When using both, the returned value of your custom highlight function will become the highlight prop in the slot.

The Here API provides the highlighting details in the form of the highlights field in each search result as seen in the Response sample in the API Reference.

For example like this:

{
  "title": "Deutschland, 10557, Berlin, Platz der Republik 1",
  "id": "here:af:streetsection:yS70afKYO41l5M.aTlXOQD:CgcIBCDVrstQEAEaATE",
  "resultType": "houseNumber",
  "houseNumberType": "PA",
  "address": {},
  "highlights": {
    "title": [
      {
        "start": 0,
        "end": 11
      },
      {
        "start": 13,
        "end": 18
      },
      {
        "start": 47,
        "end": 48
      }
    ],
    "address": {
      "label": [
        {
          "start": 0,
          "end": 18
        }
      ],
      "country": [
        {
          "start": 0,
          "end": 11
        }
      ]
    }
  }
}

This complicates the implementation by inserting for example HTML tags.

With a custom function

">
<v-here-geocoder-autocomplete :custom-highlight="yourCustomHighlightFunction" />

If custom highlighting is required, I highly recommend checking out the default function and understanding how highlighting is possible.

The custom highlight function gets the unmodified search result object and returns a string.

The default highlight function:

", ret.slice( highlight.start + incrementCounter, highlight.end + incrementCounter ), "", ret.slice(highlight.end + incrementCounter) ].join(""); // number of characters added with the bold tag incrementCounter += 7; }); return ret; } else { return placeItem.title; } };">
placeItem => {
  if (placeItem.highlights.title != null) {
    let ret = placeItem.title;
    // this is necessary because adding a bold tags displaces the highlight indexes delivered by the here api
    let incrementCounter = 0;
    placeItem.highlights.title.forEach(highlight => {
      ret = [
        ret.slice(0, highlight.start + incrementCounter),
        "",
        ret.slice(
          highlight.start + incrementCounter,
          highlight.end + incrementCounter
        ),
        "",
        ret.slice(highlight.end + incrementCounter)
      ].join("");
      // number of characters added with the bold tag
      incrementCounter += 7;
    });
    return ret;
  } else {
    return placeItem.title;
  }
};

With the slot

Note that this slot's parent element is a

{{ highlight }} ">
<v-here-geocoder-autocomplete>
  <template slot="highlight" slot-scope="{ highlight }">
    <v-list-tile-title>{{ highlight }}v-list-tile-title>
  template>
v-here-geocoder-autocomplete>
You might also like...
vue autoComplete component

vueto-complete vue autoComplete component Index Features Installation Examples Props Slots Events Styling LICENSE Features Supports full control over

A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Vue Tags Input v4 Forked from voerro/vue-tagsinput A simple tags input with typeahead built with Vue.js 2. Installation via NPM npm i @seriouslag/vue-

A simple tags input with typeahead (autocomplete) built with Vue.js 2.
A simple tags input with typeahead (autocomplete) built with Vue.js 2.

Voerro Vue Tags Input v2 A simple tags input with typeahead built with Vue.js 2. Live Demo Installation via NPM npm i @voerro/vue-tagsinput --save-dev

Wrapper for vue-mapbox-geocoder

v-mapbox-geocoder ๐ŸŒŽ v-mapbox plugin for mapbox-gl-geocoder support. Setup First of all you need to install mapbox-gl-geocoder and v-mapbox. See v-map

nothing here, move on..

Peco is no longer maintained ๐Ÿ’€ , check out its successor, Saber ๐Ÿ”ฅ ! Introduction Peco is a static website generator powered by modern web tooling, l

Yep - Here it goes our anual new boilerplate admin for firebase...

Yep - Here it goes our anual new boilerplate admin for firebase...

A digital e-commerce project. Here you can sale your digital arts, photos, graphics, illustration etc.

A digital e-commerce project. Here you can sale your digital arts, photos, graphics, illustration etc.

Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue
Autocomplete - Accessible autocomplete component for vanilla JavaScript and Vue

Autocomplete Accessible autocomplete component for vanilla JavaScript and Vue. Demo Take a look at the documentation page, and the Codepen examples. F

Vue - Boilerplate Front : Vuetify, Vuex, Vuetify, JWT, Jest (Beta)

Vue - Boilerplate Front : Vuetify, Vuex, Vuetify, JWT, Jest (Beta)

Vuetify editor. Component simplifies integration tiptap editor with vuetify.
Vuetify editor. Component simplifies integration tiptap editor with vuetify.

WYSIWYG editor for Vuetify. The editor is based on tiptap and uses vuetify's components. ๐Ÿ’ช If you have Vuetify 1.x (not 2.x), then you can find docs

Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs.
Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs.

Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs.

์‚ฌ์šฉ์ž ๊ฒŒ์‹œํŒ(FE)Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs.
์‚ฌ์šฉ์ž ๊ฒŒ์‹œํŒ(FE)Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs.

Vuetify Material Dashboard Vuetify Material Dashboard is a beautiful resource built over Vuetify, Vuex and Vuejs. It will help you get started develop

Vuetify Material Dashboard Free - A beautiful resource built over Vuetify, Vuex and Vuejs
Vuetify Material Dashboard Free - A beautiful resource built over Vuetify, Vuex and Vuejs

Vuetify Material Dashboard Free - A beautiful resource built over Vuetify, Vuex and Vuejs

:eight_pointed_black_star: Vue.js simple autocomplete dropdown component

vue-simple-search-dropdown A Vue component for a simple searchable dropdown. No external library is used in this dropdown. Demo Demo here: https://rom

Select with autocomplete, slots, bootstrap and material design themes.
Select with autocomplete, slots, bootstrap and material design themes.

The current version is 3.x, if you are looking for 2.x, you can find it here (also, see breaking changes). Flexible select Demo + Documentation Featur

Autocomplete component for Vue.js

v-autocomplete Autocomplete component for Vue.js This component is css-free. The idea is to be used with any framework. Installation Using yarn yarn a

Autocomplete component for Vue js

vuejs-auto-complete A Vue autocomplete component npm install vuejs-auto-complete --save Usage Installation, add autocomplete component into your app i

Feature-rich autocomplete component for Vue.js
Feature-rich autocomplete component for Vue.js

vue-simple-suggest Simple yet feature-rich autocomplete component for Vue.js Install npm install --save vue-simple-suggest See installation guide for

An autocomplete/typeahead component for Vue 2 and Bootstrap 4
An autocomplete/typeahead component for Vue 2 and Bootstrap 4

vue-bootstrap-typeahead A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2 View The Examples Installation From NPM: npm i

Comments
  • Nuxt | Navigator is not defined

    Nuxt | Navigator is not defined

    Hey,

    basic install of nuxt (vuetify + axios).

    Error Message:

    ReferenceError navigator is not defined

    Line 8447 of node_modules\vuetify-here-geocoder-autocomplete\dist\VHereGeocoderAutocomplete.common.js :

    default: navigator.language ? navigator.language : null

    Any Idea how to fix this? Where could I provide a default value like null?

    Best Regards Felix.

    opened by ThcDelux3 4
  • Only show housenumbers

    Only show housenumbers

    First great work! Awesome tool.

    My question. Is there a way to only show house numbers (not as the final result) but in the preview before you select?

    for e.g

    Adress, Street 1 Adress, Street 2 Adress, Street 3 ....

    question 
    opened by ThcDelux3 1
  • component has big impact on the bundle size

    component has big impact on the bundle size

    Hello,

    I have started using the plugin a few weeks ago with great enthusiasm. There is almost nothing made to work with here and vue, including vuetify, so it is a great help your work.

    However, I notice that adding it has a big impact on the bundle size. According to analyzer it adds 548 KB to the bundle !!!

    Is it a permanent limitation? is there any way to reduce the size? impossible right?

    Thanks

    Best regards !

    opened by geopamplona 0
  • Set value of component

    Set value of component

    Is there a way to set the Value of the autocomplete via the v-model?

    code example:

    <v-here-geocoder-autocomplete
      :here-api-key="hereApiKey"
      v-model="place"
      label="Search for any place..."
      debounce-time
      append-icon=""
      hide-no-data
      clearable
      outlined
    />
    
    
    method() {
       hydrateForm() {
            this.place = "Deutschland, 10557, Berlin, Platz der Republik 1"
        }
    }
    

    when calling hydrateForm nothing happens :/

    would this be possible by ref and calling an internal funtion to "force" the value?

    opened by ThcDelux3 0
Owner
Philipp Treupel
Philipp Treupel
Autocomplete component for Vue js

vuejs-auto-complete A Vue autocomplete component npm install vuejs-auto-complete --save Usage Installation, add autocomplete component into your app i

Charlie Kassel 136 Nov 8, 2022
Feature-rich autocomplete component for Vue.js

vue-simple-suggest Simple yet feature-rich autocomplete component for Vue.js Install npm install --save vue-simple-suggest See installation guide for

Marketplace Technologies 442 Jan 4, 2023
An autocomplete/typeahead component for Vue 2 and Bootstrap 4

vue-bootstrap-typeahead A simple list-group based typeahead/autocomplete using Bootstrap 4 and Vue 2 View The Examples Installation From NPM: > npm i

Alex Urquhart 209 Nov 19, 2022
A Vue component for autocomplete email domains

vue-email-dropdown A Vue component for autocomplete email domains Features Allows passing a list of domains to be used in for the suggestions. Allows

Danny Feliz 27 Nov 24, 2022
Autocomplete Component for Vue.Js

vue-autocomplete Autocomplete Component for Vue.Js Intro Vue Autocomplete is a Vue.Js component to make some suggestions for user input. come with .vu

Naufal Rabbani 210 Jan 18, 2022
Google Autocomplete Vue Componet

Google Autocomplete I am sharing this component because I was overwhelmed by complicated examples to achieve this simple job. So, I will try to be as

Gustavo Ocanto 275 Aug 29, 2022
๐Ÿงฑ Very Downshift like autocomplete solution for Vue

Vue Combo Blocks ?? Provides all the building blocks needed for accessible autocomplete, combobox, or typeahead component. A very Downshift like autoc

Simeon Kerkola 17 Jul 7, 2022
A better vim plugin for stylus, including proper and up-to-date syntax highligting, indentation and autocomplete

Vim Stylus Vim + Stylus = fast, effective and convenient CSS workflow! Features All HTML5 tags and CSS3 props are covered Correct highlighting for int

Ilia Loginov 48 Dec 28, 2022
Vue 2 Component to make Autocomplete element.

Vue 2 Autocomplete Autocomplete component for Vue 2. This is a fork of vue2-autocomplete - Naufal Rabbani [email protected] Install You can imp

Eduardo Aguad 0 Oct 12, 2017
A Vue Autocomplete component with accessibility and simplicity in mind.

VueCompleter A Vue Autocomplete component with accessibility and simplicity in mind. Installation npm install vue-completer or yarn add vue-completer

Tom Elliott 3 Nov 8, 2020