---
title: Insert and customize a Distance Resources component
slug: '2330'
canonical_url: https://docs.coveo.com/en/2330/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Insert and customize a Distance Resources component
> **Legacy feature**
>
> The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations.
> 
> To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries.
> To get started, see the [Build search](https://docs.coveo.com/en/2473/) article.

The Coveo JavaScript Search Framework offers a [Distance Resources Component](https://coveo.github.io/search-ui/components/distanceresources.html) to filter a query based on geolocation.
The Coveo Hive Framework offers a set of renderings to use this Coveo JavaScript Search Framework component in a Coveo for Sitecore scenario.

To use geolocation components and rules, you must first add the [Coveo Distance Resources](https://docs.coveo.com/en/2272/) Hive rendering to the page.
This rendering calculates the distance between each item and the user.

## Configuring the Coveo Distance Resources Data Source

Before inserting the distance resource component, you need to configure its data source component.

. In the Sitecore **Content Editor**, use the insert option on the **Global/Local Resources** folder to insert a **Coveo Distance Resources** data source.
If you don't have a data source folder yet, see [Data Source Branch Templates](https://docs.coveo.com/en/2878/).
. In the **Basic Settings** section, fill out the following fields:
 .. `Latitude field`: The name of the Sitecore instance field to use as the latitude for the distance query.
 .. `Longitude field`: The name of the Sitecore instance field to use as the longitude for the distance query.
 .. `Units`: The units to use for calculating the distance.

> **Note**
>
> The latitude and longitude values must be indicated in decimal degrees in your Sitecore items for distances to be properly calculated.
> The example item below shows latitude and longitude values for the Coveo Quebec City office.
> 
> ![Google maps data](:https://docs.coveo.com/en/assets/images/c4sc-v5/coveo-quebec-city-coordinates.png)
> 
> For more information about any of the fields above, see the [Distance Resources Component](https://coveo.github.io/search-ui/components/distanceresources.html).

. Depending on your needs, you may also want to change the value of `Distance field`, which represents the name of the field in which the distance is stored in each item.
. Save the item.

## Inserting a Coveo Distance Resources Rendering in a Search Page

. Open the Coveo-powered search page you want to edit in the **Experience Editor**.
. Locate the `UI Header` placeholder.
. Click **Add here** to insert a **Coveo Distance Resources** rendering.
. In the **Select a Rendering** dialog, click the **Coveo Distance Resources** icon, and then click **Select**.
. Link it to the previously created **Coveo Distance Resources** data source.
. The page will load for a few seconds before the rendering and a `Distance Providers` placeholder appears on the page.
. Click **Add here** in the `Distance Providers` placeholder.
. In the **Select a Rendering** dialog, click the icon of your preferred provider, and then click **Select**.
. Save your page.

## What's next?

Once you have the **Coveo Distance Resources** in place, you can leverage it in:

* One of the many [numeric range and slider facets](https://docs.coveo.com/en/2997/).
* The [Coveo Distance Sort](https://docs.coveo.com/en/3063/) rendering.