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. Customizing Map Style Theme
  4. Change Map's Pin Icon
  5. Pro Tips

1. Defining your Device Location

Before creating a Map Widget, Ubidots needs to know where to find the location data from your device(s).
Every device has a default 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. Examples of a valid last value would be:

{"position": {"value":1, "context":{"lat": "6.5423", "lng": "-70.5783"}}}

{"position":{"lat":6.2442, "lng":-75.5812}}

{"position":{"latitude":6.2442, "longitude":-75.5812}}

In the last two examples, Ubidots will automatically add a value of 1 and make the coordinates part of the value's context to match such format as the first instance.

  • Manual: This option allows you to manually type the latitude and longitude coordinates of the device:

This is quite useful for 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:

IMPORTANT NOTE:
*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, head to the "Devices" dropdown in the Navigation bar, then "Dashboards", and select the appropriate dashboard to be working on. Next, follow the below steps to create a map widget:

Step 1: Click on the top-right "+" button.
Step 2: Select the Map widget option.
Step 3: Search the devices you want to visualize on the Map.
IMPORTANT NOTE: if your dashboard is dynamic and so the Map widget, there's no need to select any device. The widget will show all devices which have a defined location.

Step 4: Toggle ON/OFF the "Display location history" option to display GPS trace data based on the General time range picker in the dashboards.
Step 5: Change the general "Appearance" of the widget with the below parameters:

  • Enter a Name for the widget.
  • Select a Layer type: Roadmap, Satellite or Hybrid.
  • Select a Style to theme the map between Light, Dark or Custom (Section 3).
    IMPORTANT NOTE: Custom option is only available when Roadmap layer is selected.
  • Choose a default Zoom value for the map.
  • Select a Marker pin: "Default" is a simple pin whereas "Inherit from Variable" replace the normal pin with the variable icon.
  • Select Marker color: "Device color" inherits color chosen in the device while "Add color logic" enable an option called "Color logic".
  • If Marker color option is "Add color logic", then Select the color logic based on the variable's value.
    IMPORTANT NOTE: "Color logic" only works with "Auto" and "Variable-based" modes.
  • Select an "On click action": choose to display a pop-up once the pin is clicked showing "All variables" or "Selected variables" from the device.

Expectations for Visualization

It is important to note that the Ubidots real-time map display is a live interface. When you select to "Display location history" 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 to reload the historical range of data.

3. Customizing Map Style Theme

Sometimes you want the map widget to have a certain look and feel so it complies to your application needs and requirements. Map widget allows you to import custom JSON file to have the Map Widget read it and change the visualization accordingly.
A good source for already created visualization JS Style Arrays files is Snazzy Maps.
Following the below steps you will be able to change your Map Widget Style theme:

Step 1: Select Layer type to roadmap.
Step 2: Select Style to custom.
Step 3: Click on "Open editor" in the "Custom style" option.
Step 4: Go to Snazzy Maps and choose a visualization.
Step 5: Copy the JS Style Array file.
Step 6: Paste it in the Custom style editor.
Step 7: Save it and check out the Map Widget Settings.

4. 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.

5. Pro Tips

1.  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 it a try, check out this tutorial to learn to write your own widgets in Ubidots with the HTML Canvas Widget. 


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?