If your selected variable has location information [1] about the device of origin attached, you can visualize it in a map. This is as easy as choosing one or more variables and selecting which time filters to use.

As you pick variables for your map, you’ll have two more options to fill about its device of origin:

Icon: choose an icon and color to represent the device on the map.

Label: give that device an alias to be shown inside the information window. This is useful to differentiate devices with the same icon and color on the map.

Color: choose a color for the device to be displayed on the map

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/ke8t7CiXNoapV9o1otnZMoPiHaeovVnZjjn7HJmafBM/widget_map_variables-dew.png

Notes:

[1]If you don’t know how to send location coordinates within your data, please read our API docs

Color Options

You are able to dinamically define colors for the icons on the map. By default, the color of the icon is defined inside Widget configuration tab. However, if you use metadata when sending a variable from your device to TagoIO, you are able to redefine the icon color of that specific variable.

{
  "variable": "location",
  "value": "My Address",
  "location": {
    "lat": 42.2974279,
    "lng": -85.628292
  },
  "metadata": {
    "color": "green"
  }
}

Icon options

Users can dynamically define the icon to be displayed in the map. By default, the icon is defined inside Widget configuration screen. However, if you use metadata when sending a variable from your device to TagoIO, you are able to redefine the icon of that specific variable.

{
  "variable": "location",
  "value": "My Address",
  "location": {
    "lat": 42.2974279,
    "lng": -85.628292
  },
  "metadata": {
    "color": "green",
    "icon": "car"
  }
}

The following list contains the available icons:

attention
location
car
residence
bus
motorcycle
truck
mail
tower
bridge
wifi
thermometer
male
flag
bullseye
barn
factory
circle

Parameter Configuration

Under the parameter configuration, you’ll find the timezone selector and a few specific options:

Connect markers with lines: this option makes every point of the same device to be connected through a line, as a route.

Ignore heading direction from variable: if checked, the heading
property of your location data will be ignoring during the build of the map. So, instead of having an arrow pointing exactly to your heading direction in each point of your route, you’ll have automatically generated arrows placed all over your route.

Do not open info windows automatically: if checked, the window with the data values won’t automatically open when the widget is shown or when new points are plotted in real time.

Show icons for all values: this option will make the device icon appear for every point of his route in the map.

Do not display (0, 0) coordinates: sometimes GPS devices send locations with latitude 0 and longitude 0 when they are not able to obtain a precise location, which can affect the routes on your map. Check this option if you are having this kind of problem. Have in mind that if you use ‘Only Last Location’ together with this option, and the GPS sends a location (0,0) no icon will be showed in the map. If you want to continue showing the latest valid location in this case, you will need to create an script to treat that.

Maximum number of points to be displayed: this option will help you to filter exactly the amount of data you need, while it still keeps the mostly recent.

Group the samples by: sometimes only one of your variables has the location information, but there are other variables related to it that you would like to display together on the map, in this case you must make use of a serie. Otherwise it will be grouped using the time and location of each data.

Initial zoom: This option sets the initial zoom of the map.

Filter by Date

The developer can pre set some date filters for the data to be displayed, the dates can be personalized to better suit the application needs. The result can be seen in the green box in the image below

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/SA2VU89b0C6uAPvHB_K7SJuFDt3SH_Was-TBQif-Lqs/Screen Shot 2018-02-06 at 08.53.02-nlA.png

To display the date filter, the developer must go to the section Advanced Options when creating or editing the map widget, select the number interval, then select the interval from the options:

  • second
  • minute
  • hour
  • day
  • week
  • month
  • year

The image below shows the advanced options configuration

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/PviiUcqcL9vOUDqRO8-Fe7VTCEjgbpEPQfrPMxvrvm0/Screen Shot 2018-02-06 at 08.53.12-Qto.png


Geofence

Developers can create geofences on maps, these geofences can be used in applications to determinate events in specific areas

To create a geofence in a map, go to the advanced tab, on Geofence and set the option Allow users to edit geofence to yes, then you can choose to allow users to create polygons, circles or both, then you can select the number of geofences allowed in the map, the limit is 10.

Developers can add a title that will be set to all geofences, to do that, type the title as shown in the image below.

The title will be shown in the pop-up like this.

Events can be added to the geofences, to create them, type in the code, the description and select a color, the event code will be accessible via analysis, the description will be shown in the event dropdown and the layer color will change the color of the geofence itself.

The geofences will be saved in a bucket, this way developers can manage them easily, to display the geofences on the map, select the bucket, device and variable

After setting up the options, you are all set to create the geofences, so go to the map widget

To add, edit and remove polygons and circles, use the tools on the top right of the map.

After creating a polygon or a circle, select the event for that area and save.

When users create new geofence areas, they will be saved in the previously selected variable with the following format, notice that you will have the coordinates of the polygons in the variable's metadata.

{
  "id": "5b75c8ccdf9a8e00017f1488",
  "variable": "fence",
  "time": "2018-08-16T18:54:24.000Z",
  "origin": "5b758f096319ee0001f9d570",
  "value": "",
  "metadata": {
    "id": "l1w5r37clqwnk4ntf1rpjx16u1cff1wr5tgt",
    "color": "#00FF22",
    "geolocation": {
      "type": "Polygon",
      "coordinates": [
        [
          [42.300325960559654, -85.63790805637836],
          [42.305971081721594, -85.63798734918238],
          [42.30593698760671, -85.62895853072405],
          [42.29844438901512, -85.62885962426662],
          [42.298453564525126, -85.63375599682331],
          [42.30022652075572, -85.63364267349243]
        ]
      ]
    },
    "event": "area_4"
  }
}

Image and URL

Developers can add an image and a URL to each pin on the map, the image below shows the result.

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/l1KL0zYn2eQ-7cgjF4JFx5GCdngrD53VIqftPFZBTyU/Screen Shot 2018-03-14 at 09.57.01-MUc.png


To add images and URL to your variables, under Advanced Options, fill up the image URL, the URL and alias to be displayed in your variable pin, see the image below

https://cdn.elev.io/file/uploads/PEfBOej3wR4slKcXFF0VfOndFuEYx_C9vFdA35csXyc/58glrgvizGMDZjnwvkyvg2S1r9H68gChk_2i0lmLQyM/Screen Shot 2018-03-14 at 09.56.49-H7o.png

Image and URL using Data

Another way to insert an image and url link to a pin is to use the metadata parameter of the data. The widget will first look at these elements and, if not found, it will use the default settings of the widget.

Take a loke on this example:

{
  "variable": "location",
  "value": "My Address",
  "location": {
    "lat": 42.2974279,
    "lng": -85.628292
  },
  "metadata": {
    "color": "green",
    "icon": "car",
    "img_pin": "https://pbs.twimg.com/profile_images/882008081667772417/3_2eeoPj_400x400.jpg",
    "url": "https://admin.tago.io/dashboards/info/5b16b4c86ba351000105badc",
    "alias: "More Details"
  }
}

Above you can see some new parameters, those are "img_pin", "url" and "alias". They work exatcly the same as setting the configuration thorugh the widget and will have the same result.