Developers can add an image and an url link to each pin on the map.

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 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:

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

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.

Also check out:

  • Map widget
  • Geofences in map widgets