---
title: "Distance Calculation Snippet"
slug: "distance-calculation-snippet"
updated: 2025-09-26T02:11:49Z
published: 2025-09-26T02:11:49Z
canonical: "docs.unqork.io/distance-calculation-snippet"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Distance Calculation Snippet

## Overview

To calculate the distance between addresses, use the Distance Calculation snippet. Using this snippet, your end-user can input their starting point. Then, they'll input as many destinations as they want. The snippet automatically calculates the distance between the starting point and each destination.

You might use this snippet to:

- Calculate the distance between 2 locations.
- Calculate the distance between a point of interest and other destinations.
- Calculate the distance to a nearby bank or store location.

The main part of the snippet is a Data Workflow, which makes your calculations.

Here's how the snippet looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DistanceCalculation_Express_GIF_01.gif?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)

And here's how the snippet looks in the Module Builder:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Distance_Calculation_1.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)

## Adding the Snippet

Once you determine a need for distance calculations, you'll add the Distance Calculation Snippet.

Before you use this snippet in your application, you must install the snippet to your environment.

### Adding the Snippet to Your Environment

To add the snippet to your environment:

1. At the top right of the Unqork Designer Platform, click **Library**.
2. Click **Template****s**.
3. Click **Marketplace**.

> [!NOTE]
> You can also access the Marketplace at any time by visiting [https://marketplace.unqork.io](https://marketplace.unqork.io/#/).
4. In the **Search the Listings Directory** field, enter Distance Calculation.
5. Click the **Distance Calculation** tile.
6. Click **Install to Environment**.
7. Click **Install** **Template**.

> [!NOTE]
> If you aren't logged in, you'll see a field for **Environment URL** and a **Login** button. Enter your environment's URL where you want to install the template. For example: [environmentname.unqork.io]. Click the **Login** button. Then, return to step 4 and click **Install to Environment** again. Follow the remaining steps as listed.

Now, you can now use your newly installed snippet in your application.

### Adding the Snippet to Your Module

After you install the Distance Calculation snippet to your environment, you can drag and drop the snippet into your module:

1. In the left sidebar of the Module Builder, click the **Snippet****s** button.
2. In the search bar, enter Distance Calculation.
3. Drag and drop the **Distance Calculation** snippet onto your canvas.

> [!NOTE]
> If you don't see the snippet at first, make sure to expand the **Marketplace Snippets** section.
4. **Save** your module.

The distance calculation snippet is ready-to-use and requires no configuration or customization.

## How the Snippet Works

Your Distance Calculation snippet uses 2 Address components. The first is for your end-user's starting address, and it sits on its own in your module. The second is for your end-user's destination. This second component sits inside an Advanced Datagrid. The Advanced Datagrid lets more than one destination address show at a time. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Distance_Calculation_2.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)

Once your end-user enters an address in both fields, a Data Workflow kicks off. The Data Workflow in this snippet uses the Haversine formula. The Haversine formula hinges on longitude and latitude to calculate geographical distance. And since Unqork Address components include that data, it's a perfect match. The Data Workflow separates the data for each address and runs the Haversine formula.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DistanceCalculation_Dwf.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)

The Data Workflow then puts the result into a Hidden component. To display the final distance, the snippet uses a ViewGrid component. The ViewGrid rounds off the value stored in the Hidden component. Finally, that rounded value displays in the ViewGrid next to the address. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DistanceCalculation_Viewgrid.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)

Once you add the snippet to your module, test it out! Preview your module in Express View and enter a starting address. Then, click the **Add Destination** button, enter an address, and click **Save**. Your destination is listed along with its distance from your starting address. Click **Add Destination** again to add more. Each new destination displays in the ViewGrid.

## Removing the Snippet

You might want to remove a snippet from your application. Here, you'll learn how to remove the snippet from your module. Then, you'll learn how to uninstall the snippet from your environment.

### Remove the Snippet from Your Module

To remove the Distance Calculation snippet:

1. In the Module Builder, hover over the **panelDistanceCalculation** Panel.

A 5-button toolbar displays above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Remove(14).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D) (**Remove**) button.
3. **Save** your module.

### Remove the Snippet from Your Environment

Use the Unqork Template Library to remove unused snippets. To uninstall a snippet from your environment:

1. At the top right of the Unqork Designer Platform, click **Library** or **Template****s**.
2. Find the snippet you want to uninstall.
3. Click the **ellipsis** (...) in the snippet's tile header.
4. Click **Uninstall** **Template**.
5. Click **Yes, Uninstall** in the confirmation modal.

You can visit the Marketplace and reinstall the snippet at any time.

> [!NOTE]
> What if you have an existing application built using this snippet and then uninstall the snippet from your environment? No problem. Your existing application remains unaffected. Also, your application doesn't have any ties to the snippet. So, let's say you reinstall a newer version of the snippet in the future. You can rest assured that the installation doesn't impact your existing application.