Live tracking dashboards in Rollbase

Introduction

User experience remains the prime focus of any business. Offerings like continuous visual updates about status, location, condition of items and ETA for an order builds more trust in end users. As a user, it gives me immense satisfaction when I get to track my orders. As a result I always tend to buy from vendors who can offer me tracking.  In this post, I will help you develop live tracking dashboards in Rollbase applications.

What is live tracking dashboards in Rollbase for?

The prime focus is to track entities on a map. From a consumer’s perspective, this is a great user experience. As a developer, it would be smart move to add this feature in an application. This is a part of a big project primarily in the Internet of Things landscape. The focus of this post is to build a monitoring dashboard in Rollbase. It offers the following features:

  • Show a geo map of the required area
  • Provides options to track a users live
  • Plots the pointers of user movement since the tracking began
  • Provides options to stop tracking
  • Adding a Live Tracking Dashboard in Rollbase Application

Rollbase is a wonderful platform when it comes to customization. We can model objects as per our requirement and include JavaScript libraries like google maps etc. As this is about live tracking of users, we can model the following objects.

Few strong use cases for live tracking are:

  • Tourism or theme parks where you need to track users and lost children
  • Get statuses of different adventures and attractions in the park or city
  • Live tracking for shipments

The most important thing in live tracking is the live data. In this post we are not integrating it with any live system. This is a candidate for another good blog post. In fact, we can simulate data using a program for a bunch of users. In real world, we can use GPS enabled user devices to transmit location data. They can push data to a Rollbase endpoint. Alternatively it can send data to MQ for filtering before pushing it to Rollbase.

About the Dashboard

The dashboard is built for a Tourism application. Users roam around in the city and visit certain attractions. The primary features are live user tracking and periodic heat maps of the region. To achieve this, we will build two sections as described below:

  • Heat map: A geo-map for an area with the count of people on a heat map overlay. It’s useful for regulating traffic to & from some sparsely populated or overly crowded areas.
  • Live user tracking: An input driven dashboard to enable/disable live tracking for the user ids. The dashboard plots location of the user on the map.

There are many map libraries available for geo-mapping . Few of them are Leaflet, Mapbox, PolyMaps, D3, GeoCharts, Google Maps etc. I chose Google Maps for this demonstration as I find it easy for simple purposes. You can choose any JS based map library and it should work perfectly fine.

Expected Output

Once we build the solution we will be able to see the following dashboards:

User Tracking

tracking

Heat Map

heatmap

Bootstrapping the Rollbase Application

Create a Rollbase application and define the following objects:

  • Locations (Fields: locationX, locationY, count) This object keeps a record of number of entities at a given co-ordinate.
  • UserLocation (Field: userID, locationX, locationY) This object keeps a record of live co-ordinates for a user. We can delete the record once it is processed by the live tracking dashboard. You can also use the first object. I prefer keeping things separate as there is no filtering overheads.
  • UserTrackingDashlet- This object is used as a view which will present the map with live user tracking.
  • HeatMapDashlet – This object is used as a view which will present the heat map in nearly real-time.

The UserLocation object will supply data for the Google Maps Live Tracking. Let us see how to add Google Maps on the dashboard. To know the basics of using Google Maps you can visit this link.

Adding Google Map

We need to add a script component on the Dashboard page to add JavaScript code. Find below the steps to add a new Script Component::

  1. Click on the UserTrackingDashlet tab
  2. Select the arrow to the right to get the Page Options
  3. Click the Design Page option to get the design view
  4. Add a New Section on the page from the left column
  5. Add a New Script Component in the section from the left column and save the page.

Adding an empty map to the dashlet

Now we can edit the Script component and add our JavaScript code. Let us first show an empty map on the Dashboard.

Now we can add buttons to accept ids of the user. These ids will be used for tracking. Add the below HTML code above the map div.

We are ready to pull in data from the UserLocation object and plot it on the dashboard.

The tracking pins

They can be customized for each user. You would certainly not like the map showing same color pins for all users. I would advice you to publicly host small(16*16 or less) pin images on Amazon S3.

Initializing an image map for the pin images similar to the following would help. I have added just four images, which will uniquely plot four different users, you can add many using a loop.

You can invoke this function in the beginning of the initialize method.

The refresh frequency

Location data changes rapidly. It is wise to wait for some time before querying for next location. The calls to fetch location data is made to the Rollbase API. You can very easily exceed the limits, so keep the refresh frequency reasonable. So we define the refresh interval as  var refreshInterval = 5 * 1000;  and setup a timer as below:

The userMap contains a map of user ids and the colored tracking pin URL against it. So, if there is a user to track, load data and plot every X seconds, where X is the refreshInterval.

Loading data and adding pins

Here is the definition for loadUserTrackingData method:

In the above code, the addMarker call back is invoked once the user location data is loaded. It iterates through the array of data and creates one marker per user. You might notice that I have sorted the array. This is not necessary, but if there are multiple locations for a user, we need the latest one.

Clean up

We store the id of the records. This is required to delete the record after it is used. You may choose to keep it as well, as the sorting will always choose the latest. Design this with caution, as the location data grow in the UserLocation object, it will consume more bandwidth.

We are done with live tracking code. For each entry in the user map, the data will be loaded and markers will be created on the UI. Save this script.

Adding and removing entries to the user map

We added two buttons, Track User and Stop Tracking User. We need to write handler functions to add and remove the user ids to and from the map.

Adding the HeatMap

You can open up the HeatMap Dashlet tab and design it in a similar fashion. The script  more or less remains the same. Instead of the addMarker call back, you can use the plotHeatMap callback function mentioned below:

Make sure the data is loaded from the Locations object.

Architecture diagram

As I mentioned, this is a small part of the complete solution. In case you are wondering about the data part. Here is a pictorial representation, how things will fit in.

Live Tracking Dashboards in Rollbase

Summary

Live tracking dashboards in Rollbase are fairly easy. You can leverage all features of the Google maps or any other mapping library. The data part is slightly tricky. You can choose to have a Spark event processing engine for that. It can filter and push the required data to the Rollbase objects.

For the live tracking, I have a Spark Streaming process. It accepts user ids to be tracked, filters location data and pushes it to Rollbase UserLocation object. This reduces the load on Rollbase and it only gets minimal data.

For the heatmap, I have another Spark Streaming process. It aggregates location data within defined radius and pushes it to the Locations object.

 

Comments are closed.