feat(web): better coordinate parsing (#19832)

feat: better coordinate parsing

web/package-lock.json

@@ -25,6 +25,7 @@
         "async-mutex": "^0.5.0",
         "dom-to-image": "^2.6.0",
         "fabric": "^6.5.4",
+        "geo-coordinates-parser": "^1.7.4",
         "geojson": "^0.5.0",
         "handlebars": "^4.7.8",
         "happy-dom": "^18.0.1",
@@ -5778,6 +5779,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/geo-coordinates-parser": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/geo-coordinates-parser/-/geo-coordinates-parser-1.7.4.tgz",
+      "integrity": "sha512-gVGxBW+s1csexXVMf5bIwz3TH9n4sCEglOOOqmrPk8YazUI5f79jCowKjTw05m/0h1//3+Z2m/nv8IIozgZyUw==",
+      "license": "MIT"
+    },
     "node_modules/geojson": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/geojson/-/geojson-0.5.0.tgz",

web/package.json

@@ -42,6 +42,7 @@
     "async-mutex": "^0.5.0",
     "dom-to-image": "^2.6.0",
     "fabric": "^6.5.4",
+    "geo-coordinates-parser": "^1.7.4",
     "geojson": "^0.5.0",
     "handlebars": "^4.7.8",
     "happy-dom": "^18.0.1",

web/src/lib/components/shared-components/coordinates-input.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import NumberRangeInput from '$lib/components/shared-components/number-range-input.svelte';
   import { generateId } from '$lib/utils/generate-id';
+  import { convert } from 'geo-coordinates-parser';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -20,22 +21,22 @@
   };
 
   const onPaste = (event: ClipboardEvent) => {
-    const coords = event.clipboardData?.getData('text/plain')?.split(',');
+    const pastedText = event.clipboardData?.getData('text/plain');
-    if (!coords || coords.length !== 2) {
+    if (!pastedText) {
       return;
     }
 
-    const [latitude, longitude] = coords.map((coord) => Number.parseFloat(coord));
+    try {
-    if (Number.isNaN(latitude) || latitude < -90 || latitude > 90) {
+      const parsed = convert(pastedText);
-      return;
+      if (parsed) {
-    }
+        event.preventDefault();
-    if (Number.isNaN(longitude) || longitude < -180 || longitude > 180) {
+        lat = parsed.decimalLatitude;
-      return;
+        lng = parsed.decimalLongitude;
+        onInput();
+      }
+    } catch {
+      // Invalid coordinate format, do nothing (let the default paste behavior occur)
     }
-
-    event.preventDefault();
-    [lat, lng] = [latitude, longitude];
-    onInput();
   };
 </script>