# Node-Red-contrib-worldmap using HTML icon in legend

**URL:** https://discourse.nodered.org/t/node-red-contrib-worldmap-using-html-icon-in-legend/83167
**Category:** Dashboard
**Created:** [25 November 2023 04:34 UTC](https://discourse.nodered.org/t/node-red-contrib-worldmap-using-html-icon-in-legend/83167 "2023-11-25T04:34:24Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![88bit](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/88bit/32/79334_2.png) [@88bit](https://discourse.nodered.org/u/88bit)
#### Post date: [25 November 2023 04:34 UTC](https://discourse.nodered.org/t/node-red-contrib-worldmap-using-html-icon-in-legend/83167/1 "2023-11-25T04:34:24Z")

</div>

Hi, I was wondering if someone knows if this is possible. The documentation states that it accepts title and color. This is the input string that is sent to do that.

```auto
msg.payload = {"command": { "legend": "<b>Title</b></br><i style=\"background: #477AC2\"></i> Water<br><i style=\"background: #448D40\"></i> Forest<br>" } };

return msg;

```

I have no experience with HTML and was wondering if the \<i style="background: #477AC2"\> can be changed for an icon.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/8/981fbd2c316120a7ee0dbfb178114fd8f34b6498.png)

Thanks for your help

---

<div class="post-metadata">

### Author: ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)
#### Post date: [25 November 2023 09:02 UTC](https://discourse.nodered.org/t/node-red-contrib-worldmap-using-html-icon-in-legend/83167/2 "2023-11-25T09:02:21Z")

</div>

Have you tried the example on the flows website?  
Note: The example only has one set of curly brackets

```auto
msg.payload.command = { "legend": "<b>Title</b></br><i style=\"background: #477AC2\"></i> Water<br><i style=\"background: #448D40\"></i> Forest<br>" };
return msg;

```

By-the-way, I think you'll find the title of the node is... 'node-red-contrib-web-worldmap'.

> **[node-red-contrib-web-worldmap](https://flows.nodered.org/node/node-red-contrib-web-worldmap)**
>
> A Node-RED node to provide a web page of a world map for plotting things on.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [25 November 2023 09:59 UTC](https://discourse.nodered.org/t/node-red-contrib-worldmap-using-html-icon-in-legend/83167/3 "2023-11-25T09:59:27Z")

</div>

It's just html so you can do whatever you like

```auto
[{"id":"06bbf073412c4599","type":"function","z":"ba9351cf.2e3e1","name":"function 1","func":"msg.payload= {\n command : { \n legend: \"<b>Legend Title</b></br><table><tr width=400px><td><i class=\\\"fa fa-camera-retro\\\"></i> Speed Camera</td></tr><tr><td><i class=\\\"fa fa-shower\\\"></i> Showers</td></tr></table>\" \n }\n};\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":340,"y":580,"wires":[["b85644f7c4bf65e7"]]}]

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/6/f6b2600a9e47c0c0af8855b3f3aadf09dd30e1a6.png)

---

<div class="post-metadata">

### Author: ![88bit](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/88bit/32/79334_2.png) [@88bit](https://discourse.nodered.org/u/88bit)
#### Post date: [25 November 2023 11:40 UTC](https://discourse.nodered.org/t/node-red-contrib-worldmap-using-html-icon-in-legend/83167/4 "2023-11-25T11:40:35Z")

</div>

Thank you for getting back and this is great news. My application is coming along very nicely, manly because of the amazing job you have done. I’m thinking about making a video about the challenges I had with it and the solution I found. I’m very new to all of this but somehow I get done what I need to.

Cheers

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [25 December 2023 11:41 UTC](https://discourse.nodered.org/t/node-red-contrib-worldmap-using-html-icon-in-legend/83167/5 "2023-12-25T11:41:08Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.