--- title: Leverage geolocalization slug: '433' canonical_url: https://docs.coveo.com/en/433/ collection: javascript-search-framework source_format: adoc --- # Leverage geolocalization The [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) allows you to use _geospatial data_ (latitude and longitude) in your [indexed](https://docs.coveo.com/en/204/) content to optimize search results based on the location of the end [user](https://docs.coveo.com/en/250/) (or a reference location). **Example** The end user searches for a restaurant. The index returns the closest results based on the current location of the end user. This article provides several examples of how you can use geolocalized results within your [search interfaces](https://docs.coveo.com/en/2741/). > **Note** > > Geolocation is resource-intensive and can increase [query](https://docs.coveo.com/en/231/) duration. > It's not recommended with a large index, unless you filter [items](https://docs.coveo.com/en/210/) beforehand (for example, with a [constant query expression (cq)](https://docs.coveo.com/en/2830#constant-query-expression-cq)). ## Requesting distance information You can add the [`DistanceResources`](https://coveo.github.io/search-ui/components/distanceresources.html) component anywhere in your search interface. The component will then calculate the distance between the location of the end user and each geolocalized item. These calculations are performed at query time and the distances are added to the dynamic [field](https://docs.coveo.com/en/200/) that you specify with the [`distanceField`](https://coveo.github.io/search-ui/components/distanceresources.html#options.distancefield) option. This component doesn't add geospatial data to your indexed content, so you will have to add latitude and longitude fields for each geolocalized item in your index. When configuring the `DistanceResources` component, specify the names of these fields using the [`latitudeField`](https://coveo.github.io/search-ui/components/distanceresources.html#options.latitudefield) and [`longitudeField`](https://coveo.github.io/search-ui/components/distanceresources.html#options.longitudefield) component options. **Example** Configuring geolocalized results using the geolocation service of the end user's web browser. ```html

``` > **Note** > > There are three options for setting the location of the end user: > > * [`useNavigator`](https://coveo.github.io/search-ui/components/distanceresources.html#options.usenavigator) requests the web browser geolocation service. > * [`googleApiKey`](https://coveo.github.io/search-ui/components/distanceresources.html#options.googleapikey) specifies the API key used to request the Google Maps Geolocation service. > * [`latitudeValue`](https://coveo.github.io/search-ui/components/distanceresources.html#options.latitudevalue) and [`longitudeValue`](https://coveo.github.io/search-ui/components/distanceresources.html#options.longitudevalue) allow you to specify a reference end-user location to use if no other position is provided. ## Sample use cases ### Sort search results by distance You can add a [`Sort`](https://coveo.github.io/search-ui/components/sort.html) component to your search interface, which will sort the results based on the distance between their indexed geolocation and that of the end user. ```html

``` > **Note** > > The [`disabledDistanceCssClass`](https://coveo.github.io/search-ui/components/distanceresources.html#options.disableddistancecssclass) option allows you to hide a component until the end user's position is resolved. > As shown in the above example, you can enable it by adding the `coveo-distance-disabled` CSS class to the component you want to hide. > If the end user refuses to share their distance, this component will remain hidden. **Example** **A result list sorted by distance:** ### Filter search results by distance You can add a [`FacetSlider`](https://coveo.github.io/search-ui/components/facetslider.html) component to your search interface to allow the end user to [filter](https://docs.coveo.com/en/2736/) search results based on a range of values. ```html

``` > **Note** > > The dynamic distance field is populated at query time, so the index can't automatically determine a range of values for the slider facet. > For this to work correctly, manually add [`start`](https://coveo.github.io/search-ui/components/facetslider.html#options.start) and [`end`](https://coveo.github.io/search-ui/components/facetslider.html#options.end) values. **Example** **A result list filtered by distance:** ### Boost search results by distance You can use a [query ranking function (QRF)](https://docs.coveo.com/en/237/) in the [query pipeline](https://docs.coveo.com/en/180/) to boost results based on the distance between their indexed geolocation and that of the end user. > **Note** > > If you're only using distance to rank items, you can improve performance by directly calling the `dist()` function inside the query ranking function instead of referencing a distance field that was previously computed (see [$qf](https://docs.coveo.com/en/1462#qf)). . In the [Coveo Administration Console](https://docs.coveo.com/en/183/), on the Query Pipelines (platform-ca | platform-eu | platform-au) page, click the target query pipeline, and then click **Edit components** in the Action bar, or [create a new one](https://docs.coveo.com/en/1791#create-a-query-pipeline). . Select the _Advanced_ tab, and then select _Filters_. . Click _Add filter rule_. The _Add a filter rule_ panel appears. . Click the _Query parameter_ dropdown menu, and then select [advanced query (`aq`)](https://docs.coveo.com/en/175/). . In the **Query filter** input, add a query ranking function to boost the search results based on distance (see [$qrf](https://docs.coveo.com/en/1462#qrf)). **Example** [,text] ``` $qrf(expression: '100 * -sqrt(@mydistance)') ``` . Click _Add rule_.