# Plot button on image

**URL:** https://discourse.nodered.org/t/plot-button-on-image/53918
**Category:** General
**Created:** [17 November 2021 22:41 UTC](https://discourse.nodered.org/t/plot-button-on-image/53918 "2021-11-17T22:41:36Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![PiMo131](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/pimo131/32/34978_2.png) [@PiMo131](https://discourse.nodered.org/u/PiMo131)
#### Post date: [17 November 2021 22:41 UTC](https://discourse.nodered.org/t/plot-button-on-image/53918/1 "2021-11-17T22:41:36Z")

</div>

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?

---

<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: [17 November 2021 22:56 UTC](https://discourse.nodered.org/t/plot-button-on-image/53918/2 "2021-11-17T22:56:35Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [17 November 2021 23:16 UTC](https://discourse.nodered.org/t/plot-button-on-image/53918/3 "2021-11-17T23:16:27Z")

</div>

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.

```auto
[
    {
        "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
    }
]

```

---

<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: [16 January 2022 23:16 UTC](https://discourse.nodered.org/t/plot-button-on-image/53918/4 "2022-01-16T23:16:35Z")

</div>

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