As soon as Geotab took the stage at McHacks, we were interested in tackling their API challenge which required us to complete the following tasks:

Recreate the Trips History page with the following process flow:

  1. A user will log in using server, database, username, password
  2. They will choose a vehicle from a drop-down list, and a date range as either the last 24 hrs or last 7 days
  3. They will see a list of the trips for that vehicle within that date range, with the start and stop addresses of each trip (not just the lat/long coordinates; the actual address)
  4. They will select one or more trips
  5. The trip(s) will be plotted on Google Maps

Front End:

Contains a user interface which allows the user to sign to sign up using the server and database they want to access, their username and their password. After signing up, an authentication process is run on the backend and the user is directed to another page where they allowed to choose a specific date range and one from four vehicles. After giving the data range and vehicle, a file is created which allows the user to see the routes have taken. They could even choose specific routes that they need to view


The backend is based on 2 databases. One consisting of routes traveled by the vehicle that is tracked by Geotab, in turn, consists of the source, destination, start time and stop time of the vehicle's journey. The other database consists of the overall tracking of the device for the duration given by the user. Initially, when the user fills in the front end form, there is a call made to the authentication function to conduct the authentication of the user, which will return an object that is used to call all other functions that exist on the backend. Next, after receiving the device number(tracked vehicle), date range and specified route as input from the front end, the backend will retrieve the route from the first database along with the start and stop time. We take this start and stop time, go to the second database and find where the device has gone in that particular time duration.

After analyzing this information, we use the needed information to plot the requested routes using gmplot's API.

Built With

Share this project: