Background

The location bias shows the user where we think they are located. The purpose of this component is to inform the user as well as to allow them to opt in for HTML5 geolocation. It is recommended to display this at the bottom of any search results page.

Note: If you want to allow a user to select a location check out the GeoLocationFilter component here.

Default Styling

If we are using IP address to locate the user, the component looks something like this:

If the user has opted in to HTML5 Gelocation, then the component looks something like this:

Basic Configuration

The only required option is verticalKey when this is used on vertical search results page (if not included in top level search configuration).

<div class="location-bias-container"></div>

ANSWERS.addComponent("LocationBias", {
  container: ".location-bias-container",
  // verticalKey: "VERTICAL_KEY"
});

Advanced Configuration

HTML5 Geolocation

Similar to the Search Bar component, you can adjust the options passed to the Geolocation API.

You can reduce the timeout (geolocationOptions.timeout) or increase the maximum age for a geolocation request (geolocationOptions.maximumAge) and add an optional alert if the request fails (geolocationTimeoutAlert).

Additionally, if the accuracy of geolocation accuracy is particularly important, you can enable “high accuracy”, which will provide more accurate geolocation results at the expense of response time and/or device power consumption.

ANSWERS.addComponent("LocationBias", {
  container: ".location-bias-container",
  geolocationOptions: {
    timeout: 500,
    maximumAge: 300000,
    enableHighAccuracy: false
  },
  geolocationTimeoutAlert: {
    enabled: true,
    message: "We are unable to determine your location"
  }
});

Overriding Strings

You can also override the default strings used in the component using the following attributes:

• ipAccuracyHelpText: Text displayed when geolocation fails and IP address is used to determine location
• deviceAccuracyHelpText: Text displayed when geolocation succeeds and HTML5 is used to determine location.
• updateLocationButtonText: Button text used to re-request location information.

ANSWERS.addComponent("LocationBias", {
container: ".location-bias-container",
ipAccuracyHelpText: 'based on your internet address',
deviceAccuracyHelpText: 'based on your device',
updateLocationButtonText: 'Update your location',
});

Example

https://codesandbox.io/embed/nice-surf-hyc28?codemirror=1&fontsize=13&hidenavigation=1&theme=dark&view=preview

LocationBias API