[PATCH widget-toolkit 1/2] location edit: make coordinates pastable

[PATCH widget-toolkit 1/2] location edit: make coordinates pastable

[Dominik Csapak]

in either the latitude or longitude field, and add a hint as such.
This drastically improves the usability when getting coordinates from
online map tools.

Suggested-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/window/LocationEdit.js | 44 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/src/window/LocationEdit.js b/src/window/LocationEdit.js
index 4042086..bb92ff2 100644
--- a/src/window/LocationEdit.js
+++ b/src/window/LocationEdit.js
@@ -6,6 +6,39 @@ Ext.define('Proxmox.window.LocationEdit', {
 
     autoLoad: true,
 
+    // make a bit wider for the hint field
+    width: 400,
+
+    controller: {
+        xclass: 'Ext.app.ViewController',
+
+        isValidCoordinate: function (lat, long) {
+            if (!Ext.isNumber(lat) || !Ext.isNumber(long)) {
+                return false;
+            }
+            return lat >= -90 && lat <= 90 && long >= -180 && long <= 180;
+        },
+
+        onPaste: function (_field, event) {
+            let me = this;
+            let data = event.getClipboardData();
+            if (Ext.isString(data)) {
+                let [lat, long] = data.split(',').map(Number);
+                if (me.isValidCoordinate(lat, long)) {
+                    me.lookup('latitude').setValue(lat);
+                    me.lookup('longitude').setValue(long);
+                    event.preventDefault();
+                }
+            }
+        },
+
+        control: {
+            numberfield: {
+                paste: 'onPaste',
+            },
+        },
+    },
+
     items: [
         {
             xtype: 'inputpanel',
@@ -41,17 +74,28 @@ Ext.define('Proxmox.window.LocationEdit', {
                     xtype: 'numberfield',
                     minimum: -90.0,
                     maximum: 90.0,
+                    reference: 'latitude',
                     name: 'latitude',
                     decimalPrecision: 6,
                     fieldLabel: gettext('Latitude'),
+                    enableKeyEvents: true,
                 },
                 {
                     xtype: 'numberfield',
                     minimum: -180.0,
                     maximum: 180.0,
+                    reference: 'longitude',
                     name: 'longitude',
                     decimalPrecision: 6,
                     fieldLabel: gettext('Longitude'),
+                    enableKeyEvents: true,
+                },
+                {
+                    xtype: 'displayfield',
+                    value: gettext(
+                        'You can paste text in format "Latitude, Longitude" in either field.',
+                    ),
+                    userCls: 'pmx-hint',
                 },
             ],
         },
-- 
2.47.3

[PATCH widget-toolkit 2/2] location edit: add OpenStreetMap link also in the edit window

[Dominik Csapak]

makes it easier to edit directly from there

Suggested-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/Utils.js               |  9 +++++++--
 src/window/LocationEdit.js | 22 +++++++++++++++++++++-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/Utils.js b/src/Utils.js
index 7643316..ed88210 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -1573,13 +1573,18 @@ Ext.define('Proxmox.Utils', {
             hiddenElement.click();
         },
 
+        renderOpenStreetMapLink: function (lat, long) {
+            let link = `https://openstreetmap.org?mlat=${lat}&mlon=${long}#map=20/${lat}/${long}`;
+            return `<a href='${link}' target="_blank" rel="noreferrer">open on OpenStreetMap</a>`;
+        },
+
         renderLocation: function (value) {
             if (!value) {
                 return Proxmox.Utils.NoneText;
             }
             let location = Proxmox.Utils.parsePropertyString(value);
-            let link = `https://openstreetmap.org?mlat=${location.latitude}&mlon=${location.longitude}#map=20/${location.latitude}/${location.longitude}`;
-            let degrees = `${location.latitude} &deg;, ${location.longitude} &deg;, <a href='${link}' target="_blank" rel="noreferrer">open on OpenStreetMap</a>`;
+            let link = Proxmox.Utils.renderOpenStreetMapLink(location.latitude, location.longitude);
+            let degrees = `${location.latitude} &deg;, ${location.longitude} &deg;, ${link}`;
             if (location.name) {
                 return `${location.name} (${degrees})`;
             }
diff --git a/src/window/LocationEdit.js b/src/window/LocationEdit.js
index bb92ff2..4ee4eed 100644
--- a/src/window/LocationEdit.js
+++ b/src/window/LocationEdit.js
@@ -6,7 +6,7 @@ Ext.define('Proxmox.window.LocationEdit', {
 
     autoLoad: true,
 
-    // make a bit wider for the hint field
+    // make a bit wider for the hint/link fields
     width: 400,
 
     controller: {
@@ -32,9 +32,23 @@ Ext.define('Proxmox.window.LocationEdit', {
             }
         },
 
+        onChange: function () {
+            let me = this;
+            let lat = me.lookup('latitude').getValue();
+            let long = me.lookup('longitude').getValue();
+            let openStreetMapLink = me.lookup('openStreetMapLink');
+            if (me.isValidCoordinate(lat, long)) {
+                openStreetMapLink.setValue(Proxmox.Utils.renderOpenStreetMapLink(lat, long));
+                openStreetMapLink.setVisible(true);
+            } else {
+                openStreetMapLink.setVisible(false);
+            }
+        },
+
         control: {
             numberfield: {
                 paste: 'onPaste',
+                change: 'onChange',
             },
         },
     },
@@ -97,6 +111,12 @@ Ext.define('Proxmox.window.LocationEdit', {
                     ),
                     userCls: 'pmx-hint',
                 },
+                {
+                    xtype: 'displayfield',
+                    reference: 'openStreetMapLink',
+                    hidden: true,
+                    text: '',
+                },
             ],
         },
     ],
-- 
2.47.3

Re: [PATCH widget-toolkit 1/2] location edit: make coordinates pastable

[Thomas Lamprecht]

On Tue, 26 May 2026 14:37:08 +0200, Dominik Csapak wrote:
> in either the latitude or longitude field, and add a hint as such.
> This drastically improves the usability when getting coordinates from
> online map tools.

Applied, thanks! With some small follow-ups on top:

* expanded the hint to point at how to grab coordinates (right-click
  on OpenStreetMap or Google Maps); OSM is linked directly.
* dropped the per-edit-window OSM preview link as redundant with that
  hint link - I might have comunicated that badly when suggesting that
  offlist, so that's on me. The KV grid view still renders one via
  renderLocation though.
* extended paste detection to also accept OSM permalink and marker
  URLs and Google Maps URLs (/@..., ?q=, ?ll=), plus semicolon and whitespace
  as separator for the plain "lat, lon" form. That way one can basically copy
  paste the whole URL from OSM or google most of the time and it "works".

[1/2] location edit: make coordinates pastable
      commit: 4847dbc0b822c6b40ec35c3530f617c55feb9868
[2/2] location edit: add OpenStreetMap link also in the edit window
      commit: 62345b68264d08bb3e9d573b1ed8e63fa03932a8