Insert and Customize a Distance Resources Component

Legacy feature

This article pertains to the Coveo Hive framework which is now in maintenance mode.

Choose one of Coveo’s more modern, lightweight, and responsive libraries for any future search interface development. See the search interface Implementation guide for more details.

The Coveo JavaScript Search Framework offers a Distance Resources Component to filter a query based on geolocation.

The Coveo Hive Framework offers a set of renderings to use this component in a Coveo for Sitecore scenario.

To be able to use geolocation components and rules, you must first add the Coveo Distance Resources 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.

  1. 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.

  2. In the Basic Settings section, fill out the following fields:

    1. Latitude field: The name of the Sitecore instance field to use as the latitude for the distance query.

    2. Longitude field: The name of the Sitecore instance field to use as the longitude for the distance query.

    3. Units: The units to use for calculating the distance.


      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

      For more information about any of the fields above, see the Distance Resources Component.

  3. 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.

  4. Save the item.

Inserting a Coveo Distance Resources Rendering in a Search Page

  1. Open the Coveo-powered search page you want to edit in the Experience Editor.

  2. Locate the UI Header placeholder.

  3. Click Add here to insert a Coveo Distance Resources rendering.

  4. In the Select a Rendering dialog, click the Coveo Distance Resources icon, and then click Select.

  5. Link it to the previously created Coveo Distance Resources data source.

  6. The page will load for a few seconds before the rendering and a Distance Providers placeholder appears on the page.

  7. Click Add here in the Distance Providers placeholder.

  8. In the Select a Rendering dialog, click the icon of your preferred provider, and then click Select.

  9. Save your page.

What’s Next?

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