Images and Links in the map's pins

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 the Image URL field with the url of an image. To set the main URL of the pin, set both the URL and the URL alias, located in the Url to open when clicking the map pin section, like so:

Setting images and Links using devices

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

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

Click here to test the code using our Device emulator!

The parameter that define the configuration through the metadata are "img_pin", "url" and "alias". They work exactly the same as setting the configuration through the widget and will have the same result.


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

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

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

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

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