Pin colour on map Widget

Hi. I am currently trying to change the pin color of a fixed location (saved manually from the device configuration) on a map widget. The variable that contain the color condition is working OK, but the color of the pin does not change.

Anyone knows what is the problem??

Thanks!!

Hello @scostantino,

Did you set up the pin configuration?

Can you check it for me, please?

Hi @alinetusi, thanks for your answer. I have the color condition in another variable. I will explain better:

On map widget I have this two variables:

Location variable was setting there:

And estadored is sending by the device.

Color condition is setting at this way:

Before, I tried to do this sending location variable from the device and it works.

1 Like

Hi @scostantino,
Using the front-end, you only can set the color and the icon for one variable by each device.

However, if you want to set the icon and the color for more than one variable for each device, you can send the information by metadata, for example:

[
  {
"variable": "estadored",
"value": "TagoIO Headquarters",
"location": {
"lat": 35.770723,
 "lng": -78.677328
},
"metadata" :{
  "icon": "car",
  "color": "red" 
}
  }
]

IMPORTANT: You can’t set the color information of pins if you use the device’s quick map. You need to send a metadata property, and you can’t send that through the quick map.

If you choose to use the metadata to send the pin configuration you will need to change the map configuration to get the information by the metadata from the variable:

TIP: you can send the color using hexadecimal instead of the string.

1 Like

I will try by this way, thanks!

1 Like

I am looking to do the same thing on my map but I’m still a bit confused on this. I’m sending the lat. and long. values to the ‘location’ variable using metadata in the emulator window. When using the map widget, you select the device and only one variable, which would have to be ‘location’. How then does one change the color of the map pin using conditional statements on a different variable? In my case, I want the location of my sensor to be fixed on a map but have the color of the pin change based on a different variable

Hello @wrselbig.

Map group data using the series concept, variables with the same series will be grouped in the same pin. Once a Pin is made a location(lat/lng) will be searched in this group, if one of these group variables gives a valid lat and lng a pin will be rendered in this position. Color statements follow the same principle, once the Pin satisfies a color statement based on a variable that is in the same infobox, it will change its color. Check out the Car sample in Device Emulator.

Also, I created a quick example here:
mapEditingVariable

One map, two variables, one location, and another called status, once the status is updated the pin will receive a new color, indicating if this ambulance is OK or OCCUPIED.

mapSeries

The payload to produce this example look like this:

[
  {
    "variable": "location",
    "value": "TagoIO Headquarters",
    "location": {
      "lat": 35.770723,
      "lng": -78.677328
    },
    "serie": "serie_id"
  },
  {
    "variable": "status",
    "value": "OK",
    "serie": "serie_id"
  }
]

In addition, to update the pin status is not necessary to send the location again, I can keep sending the variable status with new data, and the pin will change its color.

I hope this helps you.
Regards Filipe.

Thank you for the example. I understand how to assign the location. I also understand grouping variables using serie. The difficulty I’m experiencing is the value for the variable that is being transmitted by my device is constantly changing. It is not something I can assign a value to in the JSON, because the value is unknown until it is transmitted from the device. In my case, I’m measuring water level. This is transmitted from the device in a variable called ‘distance’. I tried replicating the payload you described above as:
[
{
“variable”: “location”,
“value”: “TagoIO Headquarters”,
“location”: {
“lat”: 35.770723,
“lng”: -78.677328
},
“serie”: “serie_id”
},
{
“variable”: “distance”,
“serie”: “serie_id”
}
]

Notice I did not assign a ‘value’ to the variable ‘distance’ because I don’t what that value would be. From here, I added data from both the location and distance variables into the map widget, grouped the variables by series, and defined a conditional statement to change the color based on whether ‘distance’ is greater than, less than, or between the transmitted value. The result did not adhere to my conditional statement. Could you provide an example using these parameters?

hi @wrselbig,

In this case, you will need to update your location variable for each data sent.

I recommend you edit your device payload parser. Insert the following code in the final of your payload parser (last lines).

const serie = payload[0].serie;
payload.push({
  variable: 'location',
  value: 'your_value e.g: Device #1',
  serie,
  location: { lat: 10.0000, lng: 20.0000 },
});

you don’t need to rebuild the variable distance, because it’s sent by the device as you said.

Thank you for your reply. After incorporating your suggested script, the map widget now updates the color of the icon based on the corresponding distance variable. Thank you!!!

1 Like