Geofences in map widgets

Geofences in map widgets

Geofences allow developers to color parts of the map and determine events in specific areas.

To create a geofence, go to Geofence options in your widget's configuration. Then, set the option Allow users to edit geofence to yes. You can choose to allow users to create polygons, circles or both, and even select the number of geofences allowed in the map.

The maximum number of geofences allowed is 99.

You can also set the title of the geofences, in the field Geofence tooltip title.

The title will be shown in all of the geofences' pop-ups, like so:


You can add events to geofences. To do so, head over to the Geofence Options tab in the map's edit configuration. For each event, you must set an event code so it can be identified in the analysis and a description which is what the users will see. You can also set a layer color, this color will change the color of the geofence itself.

Creating geofences

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

This is similar to the Data From field, from the Map Widget.

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,  click on the pencil icon and use the tools located on the top right of the screen.

The geofence toolbox is composed by:

  • Default tool: This allows you to zoom and drag the image;
  • Draw polygon: With this tool active, you can click on the image and draw your geofence, when you click on the first drawn point, the geofence ends, and you can rename it and add an event on the right of the editor;
  • Draw circle: With this tool active, you can click on the image at the center point of your circle, and click again on another point to select the radius size, when you click the second time, the geofence ends and you rename it and add an event to the right of the editor;
  • Delete tool: With this tool active, you can delete the geofences by clicking on them.

Below the toolbox, you can find a list of all the geofences that are in the selected layer, and you can edit it by clicking on the geofence name.

Geofence variable data

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"

    • Related Articles

    • Map Widget

      Add the location of your variable to visualize your devices on the Map. You can also edit the icon and color of the pins, add images, create links, add geofences & filters, and more! The variable data should look like the following payload. Note that ...
    • Widgets Overview

      Dashboards are composed by widgets that can display and collect data from users. TagoIO provides a variety of widgets to handle your data in real time. The available options cover from simple dials to tables, maps, videos, and even forms that you can ...
    • Map filters

      You can filter the results being displayed in a map in order to minimize the amount of information shown, allowing you to find exactly what you are looking for.  1. Filter using pins' data In the widget's configuration, in Filter options, you can ...
    • Creating Keypad Widgets

      This article will demonstrate how to create a Keypad Widget using the TagoIO Node.js SDK. In order for you to create keypad widgets, this is the structure that you will need to send to the account.dashboards.widgets.create method. {   "analysis_run": ...
    • Map Layer GIS

      Display geometries, boundaries, areas, roads, pipelines, and more with the Map widget layer GIS. Each layer is defined by GeoJSON files (.geojson, .json, .zip), which you can upload and manage, either statically or dynamically. Shapefiles are also ...