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

General
1

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

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

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 ?

2

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

3

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

here the flow

[{"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 ?

4

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

5

Try

    "color": "Black",
    "fillColor": "White",
1 Like
6

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

1 Like
7

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