Plot button on image

I have an offline system for which i like to add images on a map.

Using the worldmap node is difficult for two reasons.

  1. No internet = no map
  2. The map ussually very small. So the zoom of the worldmap is insufficient.

I would like to add sensor data and button on a building layout image(jpg/png). Does anyone have experience with this?

1 you can use a local mapserver, (eg running on an offline docker container) see the readme for examples
2 if you have a geo-referenced image you can load it as an overlay image and set the zoom however you like

But often for things like buildings people tend to use options like the svg node which can have dynamic objects on the drawing.

You can always start with the basics. That gives to you freedom to do anything what is possible with standard HTML CSS and JavaScript and the web is full of examples and documentation.

[
    {
        "id": "10cdd9868217a576",
        "type": "ui_template",
        "z": "2e6686c4918f199d",
        "group": "f4715204f9e55fb1",
        "name": "button and stuff on image",
        "order": 3,
        "width": "8",
        "height": "5",
        "format": "<script>\n    var value = \"hello world\";\n    // or overwrite value in your callback function ...\n    this.scope.action = function() { return value; }\n</script>\n<div style=\"background-image: url(https://upload.wikimedia.org/wikipedia/commons/9/9a/Sample_Floorplan.jpg);background-size: contain; background-repeat: no-repeat; width: 100%; height: 100%;\"></div>\n<md-button style=\"position:absolute; width:100px; left:20px; top:20px\" ng-click=\"send({payload:action()})\">\n    Hello\n</md-button>\n<div style=\"position:absolute; right:70px; top:20px; color:red;\"><span><i class=\"fa fa-thermometer fa-2x\"></i>THERMOMETER</span></div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 320,
        "y": 660,
        "wires": [
            []
        ]
    },
    {
        "id": "f4715204f9e55fb1",
        "type": "ui_group",
        "name": "Mock",
        "tab": "b88a4a3fd4954823",
        "order": 3,
        "disp": true,
        "width": "8",
        "collapse": false,
        "className": ""
    },
    {
        "id": "b88a4a3fd4954823",
        "type": "ui_tab",
        "name": "Dashboard",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]