dictionary – Can you use the worldmap plugin in node-red to view a building in 3D?

I am trying to use the “worldmap” plugin in node-red to display a 3D building in Barcelona, Spain that I’ve constructed from polygons using coordinates from the following source (which also shows what the building is supposed to look like): bl.ocks.org/sigon426/11283563

The problem is that I can only see it in 2D, as in the following screenshot: i.stack.imgur.com/Kftv0.png

The documentation for the worldmap plugin (flows.nodered.org/node/node-red-contrib-web-worldmap) does say something about index3d.html, but when I browse to localhost:1880/worldmap/index3d.html instead of localhost:1880/worldmap/index.html, I get a completely blank page, with no map at all. I confirmed that this is NOT due to a typo, because if I intentionally insert a typo, I get an error message. Per the documentation, I also tried using my own API key (per the documentation), but that did not help, either.

Has anybody ever gotten a building to render in 3D, and if so, would you mind sharing your code and/or how you got index3d.html to not be a blank page?

node-red code is below:
[
{
“id”: “21ba508dc4c4653a”,
“type”: “tab”,
“label”: “Auto-Update_bc”,
“disabled”: false,
“info”: “”,
“env”: []
},
{
“id”: “00d83d478ca0a1fc”,
“type”: “inject”,
“z”: “21ba508dc4c4653a”,
“name”: “”,
“props”: [
{
“p”: “payload”
},
{
“p”: “topic”,
“vt”: “str”
}
],
“repeat”: “”,
“crontab”: “”,
“once”: true,
“onceDelay”: 0.1,
“topic”: “”,
“payloadType”: “date”,
“x”: 130,
“y”: 200,
“wires”: [
[
“833bc73b50bcca41”
]
]
},
{
“id”: “5a880b81067dacf2”,
“type”: “function”,
“z”: “21ba508dc4c4653a”,
“name”: “Set Initial conditions”,
“func”: “nicons = [“car”, “ship”, “bus”, “plane”, “iss”, “uav”, “friend”];nmsg.payload = {“name”:”test”, “lat”:0.0, “lon”:0.0,”icon”:icons[Math.floor(Math.random()icons.length)]};nmsg.timestep = 0;nreturn msg;”,
“outputs”: 1,
“noerr”: 0,
“initialize”: “”,
“finalize”: “”,
“libs”: [],
“x”: 620,
“y”: 200,
“wires”: [
[
“33c3faef8e85ea91”
]
]
},
{
“id”: “9f2cc79939761256”,
“type”: “worldmap”,
“z”: “21ba508dc4c4653a”,
“name”: “”,
“lat”: “”,
“lon”: “”,
“zoom”: “”,
“layer”: “OSMG”,
“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”: “OSMG,OSMC,EsriC,EsriS,EsriT,EsriDG,UKOS,SW”,
“mapname”: “”,
“mapurl”: “”,
“mapopt”: “”,
“mapwms”: false,
“x”: 1100,
“y”: 200,
“wires”: []
},
{
“id”: “33c3faef8e85ea91”,
“type”: “function”,
“z”: “21ba508dc4c4653a”,
“name”: “Move Object”,
“func”: “if (global.instruction == “BREAK”) {n msg.payload.thing = “Done”;n throw “I’m Done”;n}nn/
nicons = [“car”, “ship”, “bus”, “plane”, “iss”, “uav”, “friend”];nmsg.payload.icon = icons[Math.floor(Math.random()icons.length)];nmsg.payload.name = “test” + msg.timestep;nmsg.timestep = msg.timestep + 1;nmsg.payload.lon = msg.payload.lon + 1;nmsg.payload.lon = msg.payload.lon % 180;n/nnvar geo = { “type”: “FeatureCollection”,n”features”: [n {n “type”: “Feature”,n “properties”: {n “wallColor”: “rgb(255,0,0)”,n “roofColor”: “rgb(255,128,0)”,n “height”: 30,n “minHeight”: 0,n “piso”: 0n },n “geometry”: {n “type”: “Polygon”,n “coordinates”: [n [n [2.1853861212730408, 41.38901629106905],n [2.185828685760498, 41.388623892423745],n [2.1864724159240723, 41.38910281968238],n [2.185984253883362, 41.3894167364756],n [2.1853861212730408, 41.38901629106905]n ]n ]n }n },n {n “type”: “Feature”,n “properties”: {n “wallColor”: “”,n “roofColor”: “”,n “height”: 60,n “minHeight”: 30,n “piso”: 1n },n “geometry”: {n “type”: “Polygon”,n “coordinates”: [n [n [2.185606062412262, 41.389012266479575],n [2.1858233213424683, 41.3888210981928],n [2.186225652694702, 41.38910483197434],n [2.1859654784202576, 41.38927386427688],n [2.185606062412262, 41.389012266479575]n ]n ]n }n },n {n “type”: “Feature”,n “properties”: {n “wallColor”: “”,n “roofColor”: “”,n “height”: 90,n “minHeight”: 60,n “piso”: 2n },n “geometry”: {n “type”: “Polygon”,n “coordinates”: [n [n [2.185753583908081, 41.38902031565826],n [2.1858367323875423, 41.388959946793776],n [2.1860405802726746, 41.38910885655806],n [2.1859386563301086, 41.389177274443526],n [2.1857374906539917, 41.389022327952766],n [2.185753583908081, 41.38902031565826]n ]n ]n }n },n {n “type”: “Feature”,n “properties”: {n “wallColor”: “rgb(255,0,0)”,n “roofColor”: “rgb(255,128,0)”,n “height”: 120,n “minHeight”: 90,n “piso”: 3n },n “geometry”: {n “type”: “Polygon”,n “coordinates”: [n [n [2.185858190059662, 41.38905653695002],n [2.185858190059662, 41.38907867217396],n [2.185882329940796, 41.38907867217396],n [2.185882329940796, 41.38905653695002],n [2.185858190059662, 41.38905653695002]n ]n ]n }n }n]n}nnmsg.payload.command = {map:{overlay:”Building ” + msg.timestep.toString(), geojson:geo, fit:false}};nreturn msg;”,
“outputs”: 1,
“noerr”: 0,
“initialize”: “”,
“finalize”: “”,
“libs”: [],
“x”: 850,
“y”: 200,
“wires”: [
[
“73887a06a6c29e1f”,
“9f2cc79939761256”
]
]
},
{
“id”: “833bc73b50bcca41”,
“type”: “change”,
“z”: “21ba508dc4c4653a”,
“name”: “”,
“rules”: [
{
“t”: “set”,
“p”: “instruction”,
“pt”: “global”,
“to”: “GO”,
“tot”: “str”
}
],
“action”: “”,
“property”: “”,
“from”: “”,
“to”: “”,
“reg”: false,
“x”: 360,
“y”: 200,
“wires”: [
[
“5a880b81067dacf2”
]
]
},
{
“id”: “d2eb2693c01b45b5”,
“type”: “switch”,
“z”: “21ba508dc4c4653a”,
“name”: “”,
“property”: “instruction”,
“propertyType”: “global”,
“rules”: [
{
“t”: “neq”,
“v”: “STOP”,
“vt”: “str”
}
],
“checkall”: “true”,
“repair”: false,
“outputs”: 1,
“x”: 910,
“y”: 280,
“wires”: [
[
“33c3faef8e85ea91”
]
]
},
{
“id”: “73887a06a6c29e1f”,
“type”: “delay”,
“z”: “21ba508dc4c4653a”,
“name”: “”,
“pauseType”: “delay”,
“timeout”: “5”,
“timeoutUnits”: “seconds”,
“rate”: “1”,
“nbRateUnits”: “1”,
“rateUnits”: “second”,
“randomFirst”: “1”,
“randomLast”: “5”,
“randomUnits”: “seconds”,
“drop”: false,
“allowrate”: false,
“outputs”: 1,
“x”: 780,
“y”: 280,
“wires”: [
[
“d2eb2693c01b45b5”
]
]
},
{
“id”: “b5cf5eebe2c484d5”,
“type”: “inject”,
“z”: “21ba508dc4c4653a”,
“name”: “Breaker”,
“props”: [
{
“p”: “payload”
},
{
“p”: “topic”,
“vt”: “str”
}
],
“repeat”: “”,
“crontab”: “”,
“once”: false,
“onceDelay”: 0.1,
“topic”: “”,
“payloadType”: “date”,
“x”: 150,
“y”: 380,
“wires”: [
[
“1bccee288132318f”
]
]
},
{
“id”: “1bccee288132318f”,
“type”: “change”,
“z”: “21ba508dc4c4653a”,
“name”: “”,
“rules”: [
{
“t”: “set”,
“p”: “instruction”,
“pt”: “global”,
“to”: “STOP”,
“tot”: “str”
}
],
“action”: “”,
“property”: “”,
“from”: “”,
“to”: “”,
“reg”: false,
“x”: 370,
“y”: 380,
“wires”: [
[]
]
}
]

Thanks in advance.

Read more here: Source link