got it

Author: thejessewinton

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

@@ -47,7 +47,7 @@
         'group absolute z-10 flex size-2 cursor-pointer items-center justify-center opacity-0 [animation-delay:var(--delay)]',
         { 'animate-fade-in': animate }
     )}
-    style="left: {position.x}px; top: {position.y}px;--delay: {index * 10}ms;"
+    style="left: {position.x}%; top: {position.y}%;--delay: {index * 10}ms;"
     data-region={slugify(city)}
     onmouseenter={handleSetActiveMarker}
     onfocus={handleSetActiveMarker}

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

@@ -17,8 +17,8 @@ export const latLongToSvgPosition = ({ latitude, longitude }: Coordinates) => {
     const clampedLngRatio = Math.max(0, Math.min(1, lngRatio));
     const clampedLatRatio = Math.max(0, Math.min(1, latRatio));
 
-    const x = clampedLngRatio * MAP_WIDTH;
-    const y = (1 - clampedLatRatio) * MAP_HEIGHT;
+    const x = clampedLngRatio * 100;
+    const y = (1 - clampedLatRatio) * 100;
 
-    return { x, y };
+    return { x, y }; // percentages, e.g., { x: 42.3, y: 71.8 }
 };