Use Widgets to Track Live Location

Requirement

Share the live location of a device and display it on a map that can be accessed from anywhere for tracking purposes.

Use Case

When an ambulance is on the run, it needs to reach the nearest hospital on time. To avoid any traffic, the ambulance driver shares the location of the vehicle with the police. The police officials track the live location of the vehicle on a map to help them navigate through the traffic and reach the nearest hospital at the earliest.

See how it works

Steps to Follow

1. Create an application titled Tracking.

2. Create a form with the following details as your reference.

Form Name	Form Link Name	Field Type	Field Name	Field Link Name
Tracking	tracking	Address	Address	Address
		Decimal	Longitude (with 7 Decimal Points )	Longitude
		Decimal	Latitude (with 7 Decimal Points )	Latitude

The coordinates of the ambulance driver get auto-populated at an interval of 10 seconds in this Tracking form when they share their location.

This application has two widgets for the following purposes:

For the ambulance drivers to share their location.

For the police to track and view the ambulance driver's live location on GMaps.

3. The widgets can either be directly uploaded to Creator using the sample ZIP attachment at the end of this document or be created using terminal and then be uploaded to Creator.

Utilize Sample ZIP Attachment

i) Download the sample ZIP file attached at the end of this document. This contains all the primary and secondary files related to the Tracking app.

Note : If you're using the sample ZIP attachment to create your widgets, skip to step 4 after the download.

(OR)

Use Terminal to Create the Widgets

i) Install CLI to create a widget using terminal. After successful installation, navigate in the terminal to the file directory in which you want to create your project.

cd Documents

ii) Run the following command in terminal to create a new project.

Note : All the commands in this page are directed towards working in a terminal. The same script can also be used in command prompt for Windows.

zet init

iii) A list of Zoho Services will be displayed. Select Zoho Creator as the required service.

iv) Enter the Project Name as Tracking. The project folder will be created in the file directory you had navigated to. Here, the file directory folder is Documents .

v) Navigate to the widget.html file, as below. Rename it as enableTracking.html. Customize the script for this widget and insert it into the widget file. This widget creates a Share My Location button that the ambulance driver should use to enable the tracking of their live location.

Note : Alternately, you can copy and paste the sample script from the enableTracking.html file, which has been provided at the end of this document to create this widget instantly.

vi) In terminal, enter the following commands to create one more widget file in your local storage. It will display GMaps for the police to view the location of the ambulance.

Note : The following commands execute their corresponding actions as mentioned below.

Command	Action
cd	Navigates to directory file
cd file name	Navigates to the file
mkdir folder name	Creates the folder
touch file name	Creates the file

cd tracking/app
mkdir GMaps
cd Gmaps
touch watchPosition.html

vii) Navigate to your local storage. Create and customize the secondary files (css and js) by writing your own scripts inside the app folder.

Note : Alternately, you can copy and paste the secondary folders inside the app folder.

viii) Customize the code for the watchPosition.html (GMaps) and its equivalent js file.

Note : Alternately, you can copy and paste the code for the watchPosition.html (GMaps) and its equivalent js file.

ix) Run the following command to validate and pack your project.

cd
cd Tracking
zet validate
zet pack

A ZIP file containing the primary and secondary files of your widget project will be created in the dist folder of your project directory.

4. Navigate to the Settings of your Creator application. Click Widgets.

5. Click Create. The New Widget pane will pop up.

6. Fill in the corresponding fields with the details provided in the below table and create two widgets.

Note :

The Index file is the primary file into which the widget's script is encoded. It links all the aspects of the widget together. Each index file is specific to its respective widget.
The widget ZIP file is the file that encloses the primary and secondary files of all the widgets that are to be added.

	Name	Hosting	Widget File (Browse)	Index File
Widget 1	enableTracking	Internal	Tracking.zip	/enableTracking.html
Widget 2	GMaps	Internal	Tracking.zip	/GMaps/watchPosition.html

7. Create the following pages and add the respective widgets as mentioned below.

Page Name

Page Link Name

Widget

Description

Share Location

Share_Location

enableTracking

The Share Location page will contain the Share My Location button that will, when clicked, update the coordinates of the ambulance driver in the Tracking form.

GMaps - Live Tracking

GMaps_Live_Tracking

GMaps

The GMaps - Live Tracking page will contain the GMaps that will show the live moving location of the ambulance to the Police.

Points To Note

You can choose to use GMaps or pick a different map altogether. We have attached the scripts for GMaps and OpenStreetMap at the end of this document for your reference.

Add permissions under User Permissions for the ambulance drivers and the Police in the Settings of your application with the below images as reference.

For Ambulance Drivers:

For Police:

Click Users under the MANAGE section of your Creator application and add users by specifying the Application Name , Role and Permissions with the below images as reference.

For Ambulance Drivers:
For Police:

Use Widgets to Track Live Location

Use Widgets to Track Live Location

Requirement

Use Case

Steps to Follow

Points To Note

See How it Works

Related Links