Merge pull request #1921 from appwrite/map-marker-fixes

Map marker fixes

Author: thejessewinton

package.json

@@ -24,7 +24,7 @@
         "optimize": "node ./scripts/optimize-assets.js",
         "optimize:all": "node ./scripts/optimize-all.js"
     },
-    "packageManager": "pnpm@10.6.2",
+    "packageManager": "pnpm@10.8.1",
     "dependencies": {
         "@number-flow/svelte": "^0.3.3",
         "h3": "^1.14.0",

src/lib/actions/mouse-position.ts

@@ -20,7 +20,7 @@ export const useMousePosition = () => {
             () => {
                 node.addEventListener('mousemove', handleMouseMove);
             },
-            { amount: 'all' }
+            { amount: 'any' }
         );
 
         return {

src/lib/components/FooterNav.svelte

@@ -37,7 +37,8 @@
                 { label: 'Functions', href: '/products/functions' },
                 { label: 'Messaging', href: '/products/messaging' },
                 { label: 'Storage', href: '/products/storage' },
-                { label: 'Realtime', href: '/docs/apis/realtime' }
+                { label: 'Realtime', href: '/docs/apis/realtime' },
+                { label: 'The Appwrite Network', href: '/docs/products/network' }
             ],
             Learn: [
                 { label: 'Docs', href: '/docs' },

src/lib/components/appwrite-network/data/pins.ts

@@ -5,7 +5,9 @@ export const pins = {
             lng: -77.49,
             city: 'Ashburn',
             code: 'ASH',
-            available: true
+            available: true,
+            offsetX: 10,
+            offsetY: -10
         },
         {
             lat: 33.75,
@@ -64,8 +66,8 @@ export const pins = {
             available: true
         },
         {
-            lat: 21.31,
-            lng: -157.86,
+            lat: 28.31,
+            lng: -125.86,
             city: 'Honolulu',
             code: 'HNL',
             available: true
@@ -180,8 +182,7 @@ export const pins = {
             lng: -74.07,
             city: 'Bogota',
             code: 'BOG',
-            available: true,
-            x: -0.5
+            available: true
         },
         {
             lat: -34.61,
@@ -198,7 +199,7 @@ export const pins = {
             available: true
         },
         {
-            lat: -3.73,
+            lat: -8.73,
             lng: -38.52,
             city: 'Fortaleza',
             code: 'FOR',
@@ -254,8 +255,8 @@ export const pins = {
             available: true
         },
         {
-            lat: 53.35,
-            lng: -6.26,
+            lat: 55.35,
+            lng: -10.26,
             city: 'Dublin',
             code: 'DUB',
             available: true
@@ -275,8 +276,8 @@ export const pins = {
             available: true
         },
         {
-            lat: 38.72,
-            lng: -9.14,
+            lat: 40.72,
+            lng: -12.14,
             city: 'Lisbon',
             code: 'LIS',
             available: true
@@ -289,7 +290,7 @@ export const pins = {
             available: true
         },
         {
-            lat: 40.42,
+            lat: 46.42,
             lng: -3.7,
             city: 'Madrid',
             code: 'MAD',
@@ -324,8 +325,8 @@ export const pins = {
             available: true
         },
         {
-            lat: 59.91,
-            lng: 10.75,
+            lat: 62.91,
+            lng: 8.75,
             city: 'Oslo',
             code: 'OSL',
             available: true
@@ -506,7 +507,7 @@ export const pins = {
             available: true
         },
         {
-            lat: -36.85,
+            lat: -39.85,
             lng: 174.76,
             city: 'Auckland',
             code: 'AKL',
@@ -520,8 +521,8 @@ export const pins = {
             available: true
         },
         {
-            lat: -43.53,
-            lng: 172.64,
+            lat: -48.53,
+            lng: 150.64,
             city: 'Christchurch',
             code: 'CHC',
             available: true
@@ -548,8 +549,8 @@ export const pins = {
             available: true
         },
         {
-            lat: -41.29,
-            lng: 174.78,
+            lat: -45.29,
+            lng: 158.78,
             city: 'Wellington',
             code: 'WLG',
             available: true
@@ -561,7 +562,9 @@ export const pins = {
             lng: -74.01,
             city: 'New York',
             code: 'NYC',
-            available: true
+            available: true,
+            offsetX: 10,
+            offsetY: -10
         },
         {
             lat: 50.11,
@@ -584,7 +587,9 @@ export const pins = {
             lng: -74.01,
             city: 'New York',
             code: 'NYC',
-            available: true
+            available: true,
+            offsetX: 10,
+            offsetY: -10
         },
         {
             lat: 50.11,

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

@@ -1,90 +1,64 @@
 <script lang="ts">
     import { classNames } from '$lib/utils/classnames';
     import { slugify } from '$lib/utils/slugify';
-    import { Tooltip } from 'bits-ui';
+    import { latLongToSvgPosition } from './utils/projections';
+    import { tooltipData } from './map-tooltip.svelte';
 
     interface Props {
         city: string;
         code: string;
         index: number;
         lat: number;
         lng: number;
-        position: {
-            x: number;
-            y: number;
-        };
         bounds: {
             north: number;
             south: number;
             west: number;
             east: number;
         };
-        available?: boolean;
+        available: boolean;
         class?: string;
         animate?: boolean;
-        isOpen: boolean;
     }
 
-    const {
-        city,
-        code,
-        index = 0,
-        position,
-        available = false,
-        class: className = '',
-        animate = false,
-        isOpen = false
-    }: Props = $props();
+    const { city, code, index = 0, lat, lng, available, animate = false }: Props = $props();
 
-    let open = $state(isOpen);
+    const position = $derived(latLongToSvgPosition({ latitude: lat, longitude: lng }));
 
-    $effect(() => {
-        open = isOpen;
-    });
-</script>
+    const handleSetActiveMarker = () => {
+        tooltipData.set({
+            city,
+            code,
+            available
+        });
+    };
 
-<Tooltip.Root bind:open>
-    <Tooltip.Trigger
-        class={classNames(
-            'group absolute flex size-3 cursor-pointer items-center justify-center opacity-0 [animation-delay:var(--delay)]',
-            { 'animate-fade-in': animate }
-        )}
-        style="left:{position.x}%; top:{position.y}%; --delay:{index * 10}ms;"
-        data-region={slugify(city)}
-        data-active={isOpen}
-    >
-        <span
-            class="from-accent/20 to-accent/10 border-gradient ease-spring absolute inline-flex h-5 w-5 rounded-full bg-gradient-to-b opacity-0 transition-opacity group-hover:animate-ping group-hover:opacity-75 before:rounded-full"
-            style:animation-duration="1.5s"
-        ></span>
-        <span class="bg-accent absolute inline-flex h-full w-full rounded-full"></span>
-        <span class="absolute size-1/2 rounded-full bg-white/80 transition-all"></span>
-    </Tooltip.Trigger>
+    const handleResetActiveMarker = () => {
+        tooltipData.set({
+            city: null,
+            code: null,
+            available: null
+        });
+    };
+</script>
 
-    <Tooltip.Content
-        sideOffset={12}
-        class={classNames(
-            'bg-card/90 border-gradient relative z-100 flex w-[190px] flex-col gap-2 rounded-[10px] p-2 backdrop-blur-lg before:rounded-[10px] after:rounded-[10px]',
-            'data-[state="closed"]:animate-menu-out data-[state="instant-open"]:animate-menu-in data-[state="delayed-open"]:animate-menu-in',
-            className
-        )}
-    >
-        <span class="text-primary text-caption w-fit"
-            >{city}
-            ({code})</span
-        >
-        {#if available}
-            <div
-                class="text-caption flex h-5 items-center justify-center place-self-start rounded-md bg-[#10B981]/24 p-1 text-center text-[#B4F8E2]"
-            >
-                <span class="text-micro -tracking-tight">Available now</span>
-            </div>
-        {:else}
-            <div
-                class="text-caption flex h-5 items-center justify-center place-self-start rounded-md bg-white/6 p-1 text-center text-white/60"
-            >
-                <span class="text-micro -tracking-tight">Planned</span>
-            </div>
-        {/if}
-    </Tooltip.Content>
-</Tooltip.Root>
+<button
+    class={classNames(
+        '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}%; top: {position.y}%;--delay: {index * 10}ms;"
+    data-region={slugify(city)}
+    onmouseenter={handleSetActiveMarker}
+    onfocus={handleSetActiveMarker}
+    onmouseleave={handleResetActiveMarker}
+    onblur={handleResetActiveMarker}
+    aria-label={city}
+>
+    <span
+        class="from-accent/20 to-accent/10 border-gradient ease-spring pointer-events-none absolute inline-flex h-5 w-5 rounded-full bg-gradient-to-b opacity-0 transition-opacity group-hover:animate-ping group-hover:opacity-75 before:rounded-full"
+        style:animation-duration="1.5s"
+    ></span>
+    <span class="bg-accent absolute inline-flex h-full w-full rounded-full"></span>
+    <span class="absolute size-1/2 rounded-full bg-white/80 transition-all"></span>
+</button>

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

@@ -33,7 +33,7 @@
 <Tabs.Root
     value={navItems[0].value}
     {onValueChange}
-    class="flex flex-col items-center justify-center gap-12"
+    class="flex flex-col items-center justify-center gap-12 md:-mt-8"
 >
     <Tabs.List
         class="border-smooth animate-fade-in bg-card relative grid w-full max-w-xl grid-cols-1 place-content-center gap-3 p-1 px-8 drop-shadow-md md:grid-cols-3 md:rounded-full md:border md:px-1"

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

@@ -0,0 +1,58 @@
+<script lang="ts" module>
+    import { classNames } from '$lib/utils/classnames';
+    import { writable } from 'svelte/store';
+
+    export const tooltipData = writable<{
+        city: string | null;
+        code: string | null;
+        available: boolean | null;
+    }>({
+        city: null,
+        code: null,
+        available: null
+    });
+</script>
+
+<script lang="ts">
+    type Props = {
+        coords: {
+            x: number;
+            y: number;
+        };
+    };
+
+    const { coords }: Props = $props();
+</script>
+
+{#if $tooltipData.city}
+    <div
+        class="pointer-events-none absolute"
+        style:left="{coords.x - 50}px"
+        style:top="{coords.y - 50}px"
+    >
+        <div
+            class={classNames(
+                'bg-card/90 border-gradient relative z-100 flex w-[190px] flex-col gap-2 rounded-[10px] p-2 backdrop-blur-lg before:rounded-[10px] after:rounded-[10px]',
+                'data-[state="closed"]:animate-menu-out data-[state="instant-open"]:animate-menu-in data-[state="delayed-open"]:animate-menu-in'
+            )}
+        >
+            <span class="text-primary text-caption w-fit">
+                {$tooltipData.city}
+                ({$tooltipData.code})
+            </span>
+            {#if $tooltipData.available}
+                <div
+                    class="text-caption flex h-5 items-center justify-center place-self-start rounded-md bg-[#10B981]/24 p-1 text-center text-[#B4F8E2]"
+                >
+                    <span class="text-micro -tracking-tight">Available now</span>
+                </div>
+            {:else}
+                <div
+                    class="text-caption flex h-5 items-center justify-center place-self-start rounded-md bg-white/6 p-1 text-center text-white/60"
+                >
+                    <span class="text-micro -tracking-tight">Planned</span>
+                </div>
+            {/if}
+        </div>
+    </div>
+{/if}