Map Widget

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 the 'lat' and 'lng' values should be added inside the 'location' field as shown below:

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

This widget also accepts features like metadata and series, that can be set in your variable data.


Creating your own

To add it to your dashboard, choose the Map widget from the list and customize it to your preference. You can edit it by using the options located on the right side of the widget.

This widget works for both dashboards, Normal and Blueprint.


1. 'Data From' Field

This field allows you to set the device and variable that will be used in this widget.

Click on the cog icon to edit specific options for this variable, such as: pin icon, formulas, and more. Click on the close icon to remove this variable from the widget's data.

This field is dependent on the type of dashboard you are using; the difference is explained below.

1.1 'Data From' for Normal Dashboards

From the option 'Data From' on the right menu, select one device from your list of devices and the variable that contains the location data.

1.2 'Data From' for Blueprint Dashboards

From the option 'Data From' on the right menu, add the Blueprint device and input the name of the variable that contains the location information.

When using a Blueprint dashboard, the field Variable will not list variables to be picked because it doesn't know the devices linked to your Blueprint Device.


2. Infobox

Present more information with an infobox that'll automatically be associated with the pins, and customize it with icons, images, external links, street views, formulas, routes by GoogleMaps, and much more.

In the widget edit screen, you can customize the following options for the variables:

  • Image options: Choose how the image will appear by selecting by top or side view and the perfect aspect ratio (portrait or landscape).
  • Allow users to get directions: Create a button with another variable location data, so that once the button is pressed a new route is made by Google Maps and you are redirected to it.

Also, you can customize an image and a link that could be set through the edit screen or by metadata. In this widget, metadata always has priority over options set by the edit screen.

In addition, the map widget supports series, so you can group your variables' data in the same infobox. 

If a group of variables has more than one external link or location data, only one will be considered based on the Data From field's order. This does not apply to images, as more than one image will produce a slide show inside the infobox.


3. Filter

The filter makes your data easier to visualize by allowing users to filter for results.

You can filter pins by device, variable, value, and time. Filters also provide a table to list each pin that's being displayed, and you can click on a row to center it.

Learn more about Map filters.


4. Geofence

Draw colored geographic boundaries to make it easy to see your devices' trajectory through a zone.

You can draw polygon or circle figures and associate them with events, and build an analysis to receive notifications when the device enters or leaves the zone.

Learn more about Geofence in map widgets.


5. Layer GIS

Customize your Map with GeoJSON or Shapefiles layers. Display boundaries, areas, roads, pipelines, and more. Learn more about Map Layer GIS.


    • Related Articles

    • Heat Map Widget

      With the Heat Map widget, you can build a colorful layer with bubbles representing the intensity of the variables on top of your image. The higher the value of the variable, the more red the bubble will be, and you can also add a heat scale to this ...
    • 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 ...
    • 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 ...
    • 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 ...
    • Images and Links in the map's pins

      Developers can add an image and an url link to each pin on the map. To add images and URL to your pins, head over to Advanced Options by clicking in the options menu of the widget, and then in the Edit option. To set the image of the pin, set ...

      Aug 30 - Join us at TagoIO Connect Global, our annual conference. Learn new features and use cases. Register Here


        Future and past Webinars