# Possibility to move the world map legend

**URL:** <https://discourse.nodered.org/t/possibility-to-move-the-world-map-legend/33169>\
**Category:** Dashboard\
**Created:** [22 September 2020 08:26 UTC](https://discourse.nodered.org/t/possibility-to-move-the-world-map-legend/33169 "2020-09-22T08:26:14Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [22 September 2020 08:26 UTC](https://discourse.nodered.org/t/possibility-to-move-the-world-map-legend/33169/1 "2020-09-22T08:26:14Z")

</div>

I managed to get the legend on the node red world map. It seems to be displayed only in the bottom left corner of the map. Is it possible to move it to the top right corner of the map??

---

<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:** [22 September 2020 09:02 UTC](https://discourse.nodered.org/t/possibility-to-move-the-world-map-legend/33169/2 "2020-09-22T09:02:22Z")

</div>

Sorry - no - currently it is fixed to bottom left, as there are usually a lot of other controls like layers top right.

You could hack the source line 905 for worldmap/worldmap.js

---

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [22 September 2020 09:53 UTC](https://discourse.nodered.org/t/possibility-to-move-the-world-map-legend/33169/3 "2020-09-22T09:53:59Z")

</div>

Ah man. Cool, im not so adept in node red to tweak something the way you said. Haha.

Also, i had another doubt. I went through the documentation and saw how to insert a button in the pop up on the world map. How can i make the button click do something like zoom to a gps location with a specific zoom level?

Appreciate any help. Been stuck on this for a while now ☹

---

<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:** [22 September 2020 10:20 UTC](https://discourse.nodered.org/t/possibility-to-move-the-world-map-legend/33169/4 "2020-09-22T10:20:10Z")

</div>

hmm - not sure editing one line of code to change bottom-left to top-right is too hard...

sending a payload like will create button that will zoom to a location

```auto
{"lat":51.05,"lon":-1.35,"name":"Test","popup":"<button onclick=\"map.setView([51,0],5);\">Click</button>"}

```

---

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [22 September 2020 10:56 UTC](https://discourse.nodered.org/t/possibility-to-move-the-world-map-legend/33169/5 "2020-09-22T10:56:23Z")

</div>

Will edit the legend line soon and revert back on its success!

But using an inject node with the data you shared and wiring it to the map didn't seem to do anything. am i missing something?

---

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [22 September 2020 11:00 UTC](https://discourse.nodered.org/t/possibility-to-move-the-world-map-legend/33169/6 "2020-09-22T11:00:03Z")

</div>

@dceejay Fixed it, this is awesome !  
Thanks a ton !

---

<div class="post-metadata">

**Author:** ![kvramji](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kvramji/32/59005_2.png) [@kvramji](https://discourse.nodered.org/u/kvramji)\
**Post date:** [22 September 2020 11:06 UTC](https://discourse.nodered.org/t/possibility-to-move-the-world-map-legend/33169/7 "2020-09-22T11:06:04Z")

</div>

Is it possible to dynamically set the lat, lon and zoom in the popup string in your example?  
I tried using $ followed by my variable, but that doesn't work

---

<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:** [22 September 2020 11:25 UTC](https://discourse.nodered.org/t/possibility-to-move-the-world-map-legend/33169/8 "2020-09-22T11:25:30Z")

</div>

msg.payload is just a JavaScript string so build it as you would any other variable.

---

<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:** [6 October 2020 11:25 UTC](https://discourse.nodered.org/t/possibility-to-move-the-world-map-legend/33169/9 "2020-10-06T11:25:34Z")

</div>

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