Screen Shot 2017-01-22 at 5.56.29 PM


This Distance widget displays the distance and the label of the nearest location to you from a prepopulated list. It uses the Google Maps interface.

distance current location


Editing Text and Style

The widget output is text and can be configured like any other Text widget in the Creative Factory. You can set font and style preferences as you do in the Text widget (including double-clicking the widget to get the font control options).


Screen Shot 2017-02-16 at 3.16.10 PM


Make the widget touchable for the user and add scrollbars and zoom support to it:



Distance Components

Three Output Fields

Distance: automatically calculated by Google Maps.

Unit: unit system imperial or metric.

Label: the name that will be displayed.


! Note: do not manually replace the {distance} and {label} placeholders; they are automatically replaced by values in the location list.


Uploading a Location List

The Distance Widget displays the user’s distance from an address nearest to his or her current location. There are a few ways to upload these addresses but the preferred way is to upload a CSV (comma separated values) file.



The CSV file must contain the below 2 columns:

First column – Coordinates: (1) either Latitude Longitude (or lat long) with a comma between them such as the lat long of our Tel Aviv office 32.064705, 34.770507; (2) or the concrete address, for example: 221B Baker Street London UK

Second column – Label: the label as it will be displayed by the widget.

An example for a lat-long based csv file can be found here

An example for an addresses based csv file can be found here

! Note 1: you may review Google Help on how to Search for and get coordinates.

! Note 2: upload a list of up to ten addresses in a file. Any additional addresses will be ignored. This limitation is relevant only when using concrete addresses.

! Note 3: for errors in the CSV file please look at the alerts panel  Screenshot from 2019-01-13 16-58-37 and click on the “invalid locations” link for details.
Screenshot from 2019-01-13 16-55-46


Triggers and Actions

On Ready: it can take a few seconds for the distance response to appear. The ‘On Ready’ trigger can be used to add a text / image until the widget is ready for display.

On Error: if the user didn’t allow location data to be collected or any other error occurred that prohibits the usage of location services, the ‘On Error’ trigger can be used to display something else to the viewer.

Text Effects: are available for the Distance widget.

Screen Shot 2017-02-16 at 3.37.12 PM

! Note: As the Distance widget is updated dynamically, the animation should be configured by selecting the ‘On Ready’ trigger and then selecting the animations.


! Note: When you are positioning the widget on the canvas, remember that the {distance} and {label} placeholders might be replaced by very long texts, so you should make the widget large enough to accommodate that or select the Touchable option, especially if you use a large font. In this example, the left widget is now too small for the full text:

distance full text


To see this widget in action:

Was this article helpful to you?

Comments are closed.