Are you interested to know the current position of your devices? For example, logistics companies find it extremely useful to know where their trucks are to estimate package arrival time. Additionally, by tracking a vehicle's movements, alternative routes can be designed to optimize fuel consumption and speed in future endeavors.

Table of Contents:

  1. Defining your Device Location
  2. Creating the Map Widget
  3. Additional Features
    - Tracing your GPS data
    - Activate the Heatmap 
  4. Additional Details for Real-time Maps
  5. Change Map's Pin Icon 

1. Defining your Device Location

Before creating a Map Widget, we need to tell Ubidots where to find the location data from your device(s). 

Every device has a property called "Device Location", which can be found in the left column of the device view:

There are 3 modes to define your device's location:

  • Auto: This is the default mode. Ubidots will look for a variable called "gps", "location" or "position" and then see the context of such variable's last value, to see if "lat" and "lng" keys exists. An example of a valid last value would be:
{"position": {"value":1, "context":{"lat": "-23.1264", "lng": "52.2314"}}}
  • Manual: This option allows you to manually type the latitude and longitude coordinates of the device:

This is quite useful for non-stationary devices, such as weather stations where the exact GPS coordinates are known. You can also use the map displayed at the top device view to manually drag-n-drop a geo pin into a location:

  • Variable-based: Alternatively, if your location variable is not called "gps", "location" or "position", you can also specify it yourself. In the example below, we'll use an "Odometer" variable, which happens to carry "lat" and "lng" values in its context:

*Please note that you must send "lat" and "lng" values to the location variable's "context", to let Ubidots read your devices location data. See here for additional resources to sending a device's latitude and longitude in the context.

2. Creating the Map Widget

After defining how Ubidots should extract your devices' location, go to "Device Management", then "Dashboards", select the appropriate dashboard to be working in and click the "plus" icon in the top right to create a new widget.

Then select the Map widget and the device you wish to locate. 

Next, select the correct a device and variable for displaying: 

Once you add the device, complete the setup and then visualize the new map widget on the dashboard:

3. Additional Features

Tracing your GPS data

You can also use the map widget not only to display real-time location data, but also track the historical data location trace. To do so, click on the "calendar" icon with the widget setting options. Then, select a time frame:

And then visualize the historical data trace of your device:

Expectations for Visualization

It is important to note that the Ubidots real-time map display is a live interface. When you select to view a historical range of data in the Map, your historical data will appear as "dots." Any incoming real-time data will appear as a smooth "line". To update the realtime line to contain the historical data information and be presented as "dots", you need only reload the historical range of data.

Activate the Heatmap and see your Devices Patterns 

Once your Map is displayed in the Dashboard, select the Heatmap icon in the Map settings bar to activate the historical heatmap of your device. Click here to learn more.


Pro Tip:
Instead of using Google Maps, which is the default maps service used by Ubidots, you might like try other services like Mapbox. If you want to give a try, check out this tutorial to learn to write your own widgets in Ubidots with the HTML Canvas Widget.

4. Additional Details for Real-time Maps

To activate a live map in Ubidots, the device must specify the latitude ("lat") and longitude ("lng") in any of its variable's "context", preferably variables label as "gps", "location" or "position" to have Ubidots automatically recognize as coordinate variable. So the payload should look like this:

{"value":10,"context":{"lat":51.5,"lng":-0.11}}

For additional details to real-time maps and sending coordinates as context, please reference to this quick real-time map user guide.

5. Change Map's Pin Icon

Within the Map widget settings, there's an option label as "Inherit icon from variables". Once activated, the Pin Icon indicating device's last position will change to match the variable icon providing the Latitude and Longitude coordinates.

Step 1: Change the variable's icon. If you do not know how, you can refer to the article How to Change a Variable's Description Icon
Step 2: Activate the "Inherit icon from variables" display setting.
Step 3: Save and view the change.


Other users also found helpful: 

  1. Events: Was my event triggered? How to check the event's Log
  2. Events: Slack Webhook setup
  3. Ubifunctions: Process/Parse data from 3rd party platforms
Did this answer your question?