From 2608870505e65e11d146350be6d10db0e752e069 Mon Sep 17 00:00:00 2001
From: Nathan Cahill <nathan@nathancahill.com>
Date: Sun, 8 Nov 2026 07:17:45 -0600
Subject: [PATCH] =?UTF-8?q?fix=20a=20latitude=20typed=20past=20=C2=B190=20?=
 =?UTF-8?q?in=20the=20waypoint=20tool=20(#398)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pin followed the latitude and longitude fields on every keystroke,
and min/max on a number field don't stop typing, so a value on the way
to a coordinate (389) reached Marker.setLngLat and MapLibre threw
"Invalid LngLat latitude value". An empty field moved the pin to the
equator, saving with one threw on null.toFixed, and an out-of-range
value saved as typed.

The pin now stays where it was and Save is disabled until both fields
hold a coordinate in range, and the field that doesn't is marked
invalid.

Co-authored-by: vcoppe <vianney.coppe@gmail.com>
---
 .../toolbar/tools/waypoint/Waypoint.svelte    | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte b/website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte
index 44514d243..27c68a93d 100644
--- a/website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte
+++ b/website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte
@@ -45,6 +45,19 @@
 
     let marker: Marker | null = null;
 
+    // A number field holds what is typed, out of range or empty (null) on the way to a
+    // coordinate, and a map click sets strings. MapLibre throws on a latitude past ±90.
+    function inRange(value: number | string | null, limit: number) {
+        if (value === null || value === '') {
+            return false;
+        }
+        const n = Number(value);
+        return Number.isFinite(n) && Math.abs(n) <= limit;
+    }
+    let latitudeValid = $derived(inRange(latitude, 90));
+    let longitudeValid = $derived(inRange(longitude, 180));
+    let coordinatesValid = $derived(latitudeValid && longitudeValid);
+
     function reset() {
         if ($selectedWaypoint) {
             selectedWaypoint.reset();
@@ -78,6 +91,9 @@
     });
 
     async function createOrUpdateWaypoint() {
+        if (!coordinatesValid) {
+            return;
+        }
         if (typeof latitude === 'string') {
             latitude = parseFloat(latitude);
         }
@@ -128,7 +144,8 @@
                 marker = null;
             }
         } else if (latitude != 0 || longitude != 0) {
-            if ($map) {
+            // while a coordinate is being typed the pin stays where it last was
+            if ($map && coordinatesValid) {
                 if (marker) {
                     marker.setLngLat([longitude, latitude]).getElement().innerHTML =
                         getSvgForSymbol(symbolKey);
@@ -248,6 +265,7 @@
                     min={-90}
                     max={90}
                     class="text-xs h-8"
+                    aria-invalid={!latitudeValid}
                     disabled={!canCreate && !$selectedWaypoint}
                 />
             </div>
@@ -261,6 +279,7 @@
                     min={-180}
                     max={180}
                     class="text-xs h-8"
+                    aria-invalid={!longitudeValid}
                     disabled={!canCreate && !$selectedWaypoint}
                 />
             </div>
@@ -269,7 +288,7 @@
     <div class="flex flex-row gap-1.5 items-center">
         <Button
             variant="outline"
-            disabled={!canCreate && !$selectedWaypoint}
+            disabled={(!canCreate && !$selectedWaypoint) || !coordinatesValid}
             class="grow shrink h-fit min-h-8 whitespace-normal py-1"
             onclick={createOrUpdateWaypoint}
         >