Tutorial: one box search

In a typical use case, a user enters a 3 word address into a search box. It is desirable that the user can enter and search for both standard addresses and 3 word addresses.

HERE hosts APIs to process standard addresses and 3 word addresses. To determine which API to call on the client side, the system matches user input against a regular expression. This detects whether the input is a standard or 3 word address.

In the following tutorial, one box search is used in a navigation scenario.

One box search consists of three navigation stages as follows:

  • Regex detects a 3 word address pattern
  • Autosuggest provides location suggestions based on typed input
  • Convert the selected 3 word address to coordinates

Regex detects a 3 word address pattern

When the user starts typing in the search box Regex runs on the background looking for a 3 word address pattern. Search results from HERE’s autosuggest endpoint will be suggested as normal until the 3 word address pattern is recognised. The pattern is word.word.word or ///word.word.word

Regex

^\/{0,}[^0-9`~!@#$%^&*()+\-_=[{\]}\\|'<,.>?/";:£§º©®\s]{1,}
[・.。][^0-9`~!@#$%^&*()+\-_=[{\]}\\|'<,.>?/";:£§º©®\s]{1,}
[・.。][^0-9`~!@#$%^&*()+\-_=[{\]}\\|'<,.>?/";:£§º©®\s]{1,}$
A possible implementation of a user interface, showing autosuggest results for traditional street addresses
Figure 1. A possible implementation of a user interface, showing autosuggest results for traditional street addresses

Autosuggest - API call

The UI, still showing autosuggest results for traditional street addresses because the regex has not matched yet
Figure 2. The UI, still showing autosuggest results for traditional street addresses because the regex has not matched yet

Autosuggest provides location suggestions based on typed input

When the regex matches, the what3words Autosuggest API is called.

Autosuggest - API call

https://what3words.search.hereapi.com/v3 /autosuggest?input=factory.shorts.butt&focus=[CAR-LOCATION]&key=[API-KEY]

Autosuggest - JSON

{
  "suggestions": [
    {
      "country": "DE",
      "nearestPlace": "Prenzlauer Berg, Berlin",
      "words": "factory.shorts.button",
      "rank": 1,
      "distanceToFocusKm": 2,
      "language": "en"
    },
    {
      "country": "PL",
      "nearestPlace": "Suchy Las, Greater Poland",
      "words": "factory.shorts.gift",
      "rank": 2,
      "distanceToFocusKm": 237,
      "language": "en"
    },
    {
      "country": "PL",
      "nearestPlace": "Toruń, Kujawsko-Pomorskie",
      "words": "factory.shorts.bath",
      "rank": 3,
      "distanceToFocusKm": 352,
      "language": "en"
    }
  ]
}
The UI, now showing suggestions from the w3w API, because the regex has matched
Figure 3. The UI, now showing suggestions from the w3w API, because the regex has matched

Convert the selected 3 word address to coordinates

When the user selects a suggested 3 word address the convert-to-coordinates API call is triggered.

Convert-to-coordinates API call

https://what3words.search.hereapi.com/v3 /convert-to-coordinates?words=factory.shorts.button&key=[API-KEY]

Convert-to-coordinates JSON

{
  "country": "DE",
  "square": {
    "southwest": {
      "lng": 13.420922,
      "lat": 52.538621
    },
    "northeast": {
      "lng": 13.420966,
      "lat": 52.538648
    }
  },
  "nearestPlace": "Prenzlauer Berg, Berlin",
  "coordinates": {
    "lng": 13.420944,
    "lat": 52.538635
  },
  "words": "factory.shorts.button",
  "language": "en",
  "map": "https://w3w.co/factory.shorts.button"
}

Use the coordinates returned to set the destination. This response also provides the name of nearest place and the requested 3 word address.

The 3 word address has been converted to coordinates and is displayed on a map
Figure 4. The 3 word address has been converted to coordinates and is displayed on a map

results matching ""

    No results matching ""