# Fill color for polygon in node-red-contrib-web-worldmap

**URL:** <https://discourse.nodered.org/t/fill-color-for-polygon-in-node-red-contrib-web-worldmap/59334>\
**Category:** General\
**Created:** [3 March 2022 21:40 UTC](https://discourse.nodered.org/t/fill-color-for-polygon-in-node-red-contrib-web-worldmap/59334 "2022-03-03T21:40:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![vkuehn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vkuehn/32/34805_2.png) [@vkuehn](https://discourse.nodered.org/u/vkuehn)\
**Post date:** [3 March 2022 21:40 UTC](https://discourse.nodered.org/t/fill-color-for-polygon-in-node-red-contrib-web-worldmap/59334/1 "2022-03-03T21:40:19Z")

</div>

I tried to create a black polygon filled with white but struggled to do directly in node-red-contrib-web-worldmap. As it uses leaflet I tried in a simple html and succeeded with

```auto
var latlngsL1 = [[0, 0],[30, 0],[30, 20],[0, 20]]
var L1footprint = L.polygon(latlngsL1, footprintStyle).addTo(map).bindPopup("First Floor");

```

but failed to do the same with

```auto
msg.payload = {
    "name": "First Floor", 
    "area": [[0, 0],[30, 0],[30, 20],[0, 20]],
    "color": "Black",
    "style": {"fill-color": "White"},
    "fit": true
}

```

how would I correctly use fill-color for polygons ?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [4 March 2022 10:09 UTC](https://discourse.nodered.org/t/fill-color-for-polygon-in-node-red-contrib-web-worldmap/59334/2 "2022-03-04T10:09:18Z")

</div>

You really haven’t provided enough information for someone to help you. Try providing a `small` flow demonstrating what works and what doesn’t. That way people can try reproducing what you have done.

Also show what version of NR, node.js and the dashboard (you can get these all from the startup log) and what version of the worldmap node you are using (you can get this from the palette manager.)

---

<div class="post-metadata">

**Author:** ![vkuehn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vkuehn/32/34805_2.png) [@vkuehn](https://discourse.nodered.org/u/vkuehn)\
**Post date:** [4 March 2022 11:58 UTC](https://discourse.nodered.org/t/fill-color-for-polygon-in-node-red-contrib-web-worldmap/59334/3 "2022-03-04T11:58:00Z")

</div>

Oh I tried to reduce the description to the very problem.

here the flow

```auto
[{"id":"f6f2187d.f17ca8","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"cf3bebccb11ebe25","type":"inject","z":"f6f2187d.f17ca8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":100,"wires":[["27b1143f083569ad"]]},{"id":"27b1143f083569ad","type":"function","z":"f6f2187d.f17ca8","name":"CreateRoomMap","func":"msg.payload = {\n \"name\": \"First Floor\", \n \"area\": [[0, 0],[30, 0],[30, 20],[0, 20]],\n \"color\": \"Black\",\n \"style\": {\"fill-color\": \"White\"},\n \"fit\": true\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":330,"y":100,"wires":[["a298abbe7e8791cd"]]},{"id":"a298abbe7e8791cd","type":"worldmap","z":"f6f2187d.f17ca8","name":"","lat":"","lon":"","zoom":"","layer":"Custom","cluster":"","maxage":"","usermenu":"show","layers":"show","panit":"false","panlock":"false","zoomlock":"false","hiderightclick":"false","coords":"none","showgrid":"false","allowFileDrop":"false","path":"/worldmap","overlist":"DR,CO,RA,DN,HM","maplist":"","mapname":"","mapurl":"","mapopt":"","mapwms":false,"x":520,"y":100,"wires":[]},{"id":"e6a867fd3cc98bb4","type":"function","z":"f6f2187d.f17ca8","name":"Meassure1","func":"msg.payload = {\n \"name\": \"Measure1\", \n \"area\": [[10, 5],[10, 5.5],[10.5, 5.5],[10.5, 5]],\n \"color\": \"Green\",\n \"popup\": \"Measure1\",\n \"clickable\": true\n}\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":310,"y":140,"wires":[["a298abbe7e8791cd"]]},{"id":"e999f2bd852ae461","type":"inject","z":"f6f2187d.f17ca8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":140,"y":140,"wires":[["e6a867fd3cc98bb4"]]}]

```

you can see on /worldmap four corner polygon which is filled red after click to the first time stamp.

What to change so that it is filled white ?  
Noder red version is 2.2.2  
Worldmap is 2.27.3

does that explain it ?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [4 March 2022 14:44 UTC](https://discourse.nodered.org/t/fill-color-for-polygon-in-node-red-contrib-web-worldmap/59334/4 "2022-03-04T14:44:47Z")

</div>

I’ll take a look when I get back in about 1 1/2 hours

---

<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:** [4 March 2022 15:13 UTC](https://discourse.nodered.org/t/fill-color-for-polygon-in-node-red-contrib-web-worldmap/59334/5 "2022-03-04T15:13:26Z")

</div>

Try

```auto
    "color": "Black",
    "fillColor": "White",

```

> **[GitHub - dceejay/RedMap: A web map app for Node-RED to put blobs on](https://github.com/dceejay/RedMap#options)**
>
> A web map app for Node-RED to put blobs on. Contribute to dceejay/RedMap development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![vkuehn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vkuehn/32/34805_2.png) [@vkuehn](https://discourse.nodered.org/u/vkuehn)\
**Post date:** [4 March 2022 16:03 UTC](https://discourse.nodered.org/t/fill-color-for-polygon-in-node-red-contrib-web-worldmap/59334/6 "2022-03-04T16:03:25Z")

</div>

okay that did work !

I tried also fill-color as I found somewhere else in the documentation

fillcolor for polygon is right

sorry overlooked in the documentation  
@dceejay thanks for the great work on the node

---

<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:** [3 May 2022 16:03 UTC](https://discourse.nodered.org/t/fill-color-for-polygon-in-node-red-contrib-web-worldmap/59334/7 "2022-05-03T16:03:55Z")

</div>

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