loading

LocationBias

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: Location Bias (IP Address)

If the user has opted in to HTML5 Gelocation, then the component looks something like this: Location Bias (Device)

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 SearchBar 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

LocationBias API
Property Type Default Description
verticalKey
string
If used on Vertical Search Page, the verticalKey for the vertical. Required if not included in top level search configuration.
updateLocationEl
string
.js-locationBias-update-location
Selector for button a user clicks to update their location
ipAccuracyHelpText
string
based on your internet address
Text displayed when geolocation fails, and IP address is used to determine location.
deviceAccuracyHelpText
string
based on your device
Text displayed when geolocation succeeds, and HTML5 is used to determine location.
updateLocationButtonText
string
Update your location
Label of the button to update your location
geolocationOptions
object
Geolocation-related configuration. See Geolocation Documentation for more information.
enableHighAccuracy
boolean
Whether to improve accuracy at the cost of response time and/or power consumption, defaults to false.
timeout
number
6000
The maximum amount of time (in ms) a geolocation call is allowed to take before defaulting, defaults to 1 second.
maximumAge
number
300000
The maximum amount of time (in ms) to cache a geolocation call, defaults to 5 minutes.
geolocationTimeoutAlert
object
Configuration for a native alert, displayed when a call to the geolocation API fails.
enabled
boolean
Whether to display a window.alert() on the page
message
string
We are unable to determine your location
If enabled is true, the message in the alert.