Back to List

Kentico Distance Calculation Web Part

Daniel Maley Daniel Maley  |  
Aug 26, 2016
 
When displaying a list of locations on your website, it is often helpful to the user to know how far away they are from each of the items in the list. The Basic Repeater with Distance Calculation Web Part allows you to easily add distance and duration to a list of locations. This web part is a clone of the Kentico “Basic Repeater” Web Part with a few additional properties that are used to calculate distance and duration. To properly configure this web part, simply follow the steps listed below:
 

Begin by adding a data source web part on the pages design tab.  (Pages Data Source or Query Data Source is recommended.)  Once you have configured your data source to bring back a list of locations, add the Basic Repeater with Distance Calculation Web Part to the page. This web part can be configured the same way as the Kentico Basic Repeater with the exception of the properties shown below:
 
 

Adding the Origin:

The origin refers to the location that the distance to each of the items in the list will be calculated against.  There are several ways to specify an origin using this web part.

1. Enter a static location in the “Origin Location or Address” or the “Origin Latitude\Longitude” fields.  (It is recommended to use the latitude and longitude fields when possible.  Wherever a valid Origin Latitude and Origin Longitude are specified, it will take precedence over the value entered for the Origin Location or Address.)  Using this approach means that every page visitor will see the distance\duration from their specified origin to the destinations in your data source.  
Note: In the instance above the Origin Latitude and Longitude values will be used and the Origin Location or Address will be ignored.
 
2. If you are using a license of Kentico that has Web Analytics, you can use the Analytics Context to determine user location. Using this approach means the user will see the distance\duration from their determined location to the destinations in your data source.  
 

Note:  This approach uses the IP Address that is resolved so it will not be exact.  You may notice a large variance between the origin and the user’s actual location - especially on mobile devices. It does not appear the GeoLocation functionality works correctly when running under Localhost.

3.Use GeoLocation to more accurately determine the user’s location and append the results to the URL of your page.  Once the parameters are in the URL, they can be retrieved and added to the web part properties.
URL:
 

Specifying Destinations:

Specifying destinations is as easy as including the Field Name of the Destination Columns. 

For the table above, I would configure the web part as follows.
 
Note:  Similarly to the Origin. when a valid Latitude and Longitude Column is specified, the columns listed in the Destination Location or Address Field will be ignored. If your data source does not have latitude and longitude data, a ‘;’ delimited list of address fields can be used.

Metric Units:  Indicates if the distance calculation should be in (meters/km) or (feet/miles).

Include Duration:  Indicates if the duration of time it would take to drive a vehicle for the origin to the destination should be included.

Destination Not Found Text:  The text to be displayed to the user if one of the destinations in the list is unable to be determined via the Google Distance Matrix API.
 

No Available Route Text:  The text to be displayed to the user if the Google Distance Matrix API is unable to determine a route between the origin and destination.
 

Google Maps Distance Matrix API Key:  This web part makes use of the Google Distance Matrix API and requires a server key with the Distance Matrix API enabled. A Free Key can be obtained from Google.

Once the Web Part has been configured, the calculated distance and optionally duration will be made available in the transformation with the field names “Calculated Distance” and “Calculated Duration.”
 
 

Filters:

This web part can be used in conjunction with a Kentico Filter Web Part.
 

Notes on Usage:

This web part must be used in conjunction with the Basic Google Map Web Part per the Distance Matrix API Policy.

Standard Usage limited to 2,500 elements per day, please review the Google Distance Matrix API usage limits before implementation.
 
KenticoWeb Development

 

Love our Blogs?

Sign up to get notified of new Skyline posts.

 


Related Content


Blog Article
How to Simplify Marketing with Integrated Web CMS and Marketing Automation
Melanie LenaghanMelanie Lenaghan  |  
Jan 22, 2019
A lot is expected of a marketer. They are generally responsible for managing the website content, SEO, e-commerce, e-mail marketing, social media, campaigns, analytics, and more. Not only is that a lot to manage, but it can also be difficult to manage and integrate all the different tools.  ...
Blog Article
Developing on a Raspberry Pi using Gulpjs
Eric DitterEric Ditter  |  
Jan 15, 2019
Developing on one machine and running on another is a tedious process, but sometimes you need to when a library has different features for ARM vs x64 (and then there are always the Windows vs Linux issues). This was the issue I had when I was working on a Raspberry Pi project using Python...
Blog Article
CQS, SimpleInjector, and the Power of Decorators
Dan LorenzDan Lorenz  |  
Jan 08, 2019
Over the years of developing with n-tier style, I was wondering if there was anything else out there. The biggest problem with n-tier for me is that the interfaces and classes tend to get super large. When that happens, you start breaking SOLID principals and unit testing becomes much more...
Blog Article
Async, Await, and ConfigureAwait – Oh My!
Dan LorenzDan Lorenz  |  
Dec 11, 2018
In .NET Framework 4.5, async/await keywords were added to the language to make async programming easier to work with. In order to maximize device resources and not block UI, you should really try to use asynchronous programming wherever you can. While async/await has made this much easier than...
Blog Article
What You Need to Know About User Experience (UX)
Peter ChanthasenaPeter Chanthasena  |  
Sep 04, 2018
Most people don't consciously think about design or apps in the sense of User Experience (UX). Rather, it's an intuitive sense that something just looks and feels right. Since an easy and enjoyable experience is crucial to keep people on a site or keep them using an app - and...