update

src/lib/components/appwrite-network/map.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" module>
     export const MAP_BOUNDS = $state({
-        west: -132,
-        east: 185,
-        north: 65,
+        west: -130,
+        east: 180,
+        north: 70,
         south: -65
     });
 </script>
@@ -17,6 +17,7 @@
     import { useAnimateInView } from '$lib/actions/animate-in-view';
     import { pins, type PinSegment } from './data/pins';
     import { latLongToSvgPosition } from './utils/projections';
+    import { dev } from '$app/environment';
 
     let dimensions = $state({
         width: 0,
@@ -70,6 +71,19 @@
     };
 </script>
 
+{#if dev}
+    <div class="absolute z-1000 flex flex-col gap-4">
+        {#each Object.entries(MAP_BOUNDS) as [key, value]}
+            <input
+                type="number"
+                onchange={(e) =>
+                    (MAP_BOUNDS[key as keyof typeof MAP_BOUNDS] = e.currentTarget.valueAsNumber)}
+                {value}
+            />
+        {/each}
+    </div>
+{/if}
+
 <div class="w-full overflow-scroll [scrollbar-width:none]">
     <div
         class="sticky left-0 z-10 mb-8 hidden w-screen gap-2 overflow-scroll px-8 [scrollbar-width:none]"

src/lib/components/appwrite-network/utils/projections.ts

@@ -13,11 +13,18 @@ export const latLongToSvgPosition = ({
 }: Coordinates & { width: number; height: number }) => {
     const { west, east, north, south } = MAP_BOUNDS;
 
-    const lngRatio = (longitude - west) / (east - west);
-    const latRatio = (latitude - south) / (north - south);
+    // Handle longitude wrapping for coordinates crossing the date line
+    let lng = longitude;
+    if (lng < west) lng += 360;
+    else if (lng > east) lng -= 360;
 
-    const x = Math.max(0, Math.min(1, lngRatio)) * 100;
-    const y = Math.max(0, Math.min(1, 1 - latRatio)) * 100;
+    // Calculate position as percentage of the map bounds
+    const lngRatio = (lng - west) / (east - west);
+    const latRatio = (north - latitude) / (north - south);
+
+    // Convert to percentages clamped between 0-100
+    const x = Math.max(0, Math.min(100, lngRatio * 100));
+    const y = Math.max(0, Math.min(100, latRatio * 100));
 
     return { x, y };
 };