From de218dfefb81a8b5660f3a46e7c48854995b28f0 Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Fri, 27 Mar 2026 15:46:25 +0530 Subject: [PATCH 1/2] feat: DR-7743 global live activity page Add /global page to apps/site with real-time world map showing Prisma Accelerate traffic. Polls analytics API every 60 seconds, renders animated markers on SVG map with tooltips, legend, and social share links. --- .../public/illustrations/world-map/map.svg | 1 + apps/site/src/app/api/worldmap/route.ts | 71 + apps/site/src/app/global.css | 5 + .../src/app/global/_components/world-map.tsx | 114 + apps/site/src/app/global/page.tsx | 79 + apps/site/src/data/airports-code.ts | 2361 +++++++++++++++++ 6 files changed, 2631 insertions(+) create mode 100644 apps/site/public/illustrations/world-map/map.svg create mode 100644 apps/site/src/app/api/worldmap/route.ts create mode 100644 apps/site/src/app/global/_components/world-map.tsx create mode 100644 apps/site/src/app/global/page.tsx create mode 100644 apps/site/src/data/airports-code.ts diff --git a/apps/site/public/illustrations/world-map/map.svg b/apps/site/public/illustrations/world-map/map.svg new file mode 100644 index 0000000000..72816fc0a4 --- /dev/null +++ b/apps/site/public/illustrations/world-map/map.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/site/src/app/api/worldmap/route.ts b/apps/site/src/app/api/worldmap/route.ts new file mode 100644 index 0000000000..348420c553 --- /dev/null +++ b/apps/site/src/app/api/worldmap/route.ts @@ -0,0 +1,71 @@ +import { NextResponse } from "next/server"; +import { airports } from "@/data/airports-code"; + +const ACCELERATE_ANALYTICS = + "https://accelerate-analytics-exporter.prisma-data.net/livemap-data"; + +function transformCoordinates(coordinates: { lat: number; lon: number }) { + let temp_lon = coordinates.lon; + if (coordinates.lon > 0 || coordinates.lon < 0) { + temp_lon = temp_lon + 180; + } else temp_lon = 180; + temp_lon = (temp_lon * 100) / 360; + + let temp_lat = coordinates.lat; + if (coordinates.lat > 0 || coordinates.lat < 0) { + temp_lat = temp_lat * -1 + 90; + } else temp_lat = 90; + temp_lat = (temp_lat * 100) / 180; + + return { + lon: Number(temp_lon.toFixed(2)), + lat: Number(temp_lat.toFixed(2)), + }; +} + +export async function GET() { + try { + const response = await fetch(ACCELERATE_ANALYTICS); + + if (!response.ok) { + return NextResponse.json( + { message: "Error fetching analytics" }, + { status: response.status }, + ); + } + + const data: Array<{ pop: string; ratio: number }> = await response.json(); + + const cured_data = data + .filter((pop) => !!pop.pop) + .map((pop) => { + const airport = airports.find((a) => a.pop === pop.pop); + if (!airport) return null; + return { + ...pop, + cured_coord: transformCoordinates(airport.coordinates), + }; + }) + .filter(Boolean); + + const cured_airport_data = airports.map((airport) => { + const active = cured_data.find((d) => d?.pop === airport.pop); + return { + pop: airport.pop, + cured_coord: transformCoordinates(airport.coordinates), + ...(active && { ratio: active.ratio }), + }; + }); + + return NextResponse.json(cured_airport_data, { + headers: { + "Cache-Control": "s-maxage=86400, stale-while-revalidate=59", + }, + }); + } catch { + return NextResponse.json( + { message: "Internal Server Error" }, + { status: 500 }, + ); + } +} diff --git a/apps/site/src/app/global.css b/apps/site/src/app/global.css index 799fd38d4c..0e0851576c 100644 --- a/apps/site/src/app/global.css +++ b/apps/site/src/app/global.css @@ -6,6 +6,11 @@ @source inline("md:hover:paused"); @source inline("hover:paused"); +@keyframes pulsate { + 0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; } + 50% { transform: translate(-50%, -50%) scale(1); opacity: 1; } +} + @theme { --animate-slide-down: slideDown 130s linear infinite; --animate-slide-down-2: slideDown2 130s linear infinite; diff --git a/apps/site/src/app/global/_components/world-map.tsx b/apps/site/src/app/global/_components/world-map.tsx new file mode 100644 index 0000000000..10ed242524 --- /dev/null +++ b/apps/site/src/app/global/_components/world-map.tsx @@ -0,0 +1,114 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import { cn } from "@/lib/cn"; + +type DataPoint = { + pop: string; + ratio?: number; + cured_coord: { lon: number; lat: number }; +}; + +function Marker({ data }: { data: DataPoint }) { + const markerRef = useRef(null); + const [showTooltip, setShowTooltip] = useState(false); + const isActive = Boolean(data.ratio); + + return ( + <> + setShowTooltip(true)} + onMouseLeave={() => setShowTooltip(false)} + /> + {showTooltip && isActive && data.pop && markerRef.current && ( + + {data.pop} + + )} + + ); +} + +export function WorldMap() { + const dataPoints = useRef([]); + const [points, setPoints] = useState([]); + + useEffect(() => { + const fetchData = async () => { + try { + const response = await fetch("/api/worldmap"); + if (!response.ok) return; + const data: DataPoint[] = await response.json(); + dataPoints.current = data; + setPoints(data); + } catch { + // silently fail + } + }; + + fetchData(); + const timer = setInterval(fetchData, 60000); + return () => clearInterval(timer); + }, []); + + return ( +
+
+ {points.map((data, idx) => ( + + ))} + {/* eslint-disable-next-line @next/next/no-img-element */} + World map +
+ + {/* Legend */} +
+
+ + + Active Point of Presence + +
+
+ + + Inactive Point of Presence + +
+
+
+ ); +} diff --git a/apps/site/src/app/global/page.tsx b/apps/site/src/app/global/page.tsx new file mode 100644 index 0000000000..989e72897c --- /dev/null +++ b/apps/site/src/app/global/page.tsx @@ -0,0 +1,79 @@ +import type { Metadata } from "next"; +import { Button } from "@prisma/eclipse"; +import { WorldMap } from "./_components/world-map"; + +export const metadata: Metadata = { + title: "Global Traffic | Prisma", + description: + "Track real-time global traffic as developers build and scale with Prisma's commercial products.", +}; + +export default function GlobalPage() { + return ( +
+ {/* Hero */} +
+

+ Live Activity +

+

+ Track real-time global traffic as developers build and scale with our + commercial products. +

+
+ + +
+
+ + {/* Map */} +
+ +

+ We pull our live usage data every 60 seconds to keep this map fresh. + Curious? Take a look at the Network tab. +

+
+ + {/* Share */} +
+

+ Share +

+ +
+
+ ); +} diff --git a/apps/site/src/data/airports-code.ts b/apps/site/src/data/airports-code.ts new file mode 100644 index 0000000000..f9e75491b3 --- /dev/null +++ b/apps/site/src/data/airports-code.ts @@ -0,0 +1,2361 @@ +export const airports = [ + { + pop: "ACC", + coordinates: { + lon: -0.166666999999999, + lat: 5.6, + }, + }, + { + pop: "ALG", + coordinates: { + lon: 3.05, + lat: 36.783333, + }, + }, + { + pop: "AAE", + coordinates: { + lon: 8.0, + lat: 36.833333, + }, + }, + { + pop: "TNR", + coordinates: { + lon: 47.478889, + lat: -18.796944, + }, + }, + { + pop: "CPT", + coordinates: { + lon: 18.601667, + lat: -33.964722, + }, + }, + { + pop: "DKR", + coordinates: { + lon: -17.490278, + lat: 14.739722, + }, + }, + { + pop: "DUR", + coordinates: { + lon: 30.950556, + lat: -29.97, + }, + }, + { + pop: "GBE", + coordinates: { + lon: 25.918333, + lat: -24.555278, + }, + }, + { + pop: "HRE", + coordinates: { + lon: 31.092778, + lat: -17.931944, + }, + }, + { + pop: "JNB", + coordinates: { + lon: 28.246111, + lat: -26.139167, + }, + }, + { + pop: "KGL", + coordinates: { + lon: 30.139444, + lat: -1.968611, + }, + }, + { + pop: "LOS", + coordinates: { + lon: 3.321111, + lat: 6.5775, + }, + }, + { + pop: "LAD", + coordinates: { + lon: 13.233333, + lat: -8.85, + }, + }, + { + pop: "MPM", + coordinates: { + lon: 32.566667, + lat: -25.916667, + }, + }, + { + pop: "MBA", + coordinates: { + lon: 39.583333, + lat: -4.033333, + }, + }, + { + pop: "NBO", + coordinates: { + lon: 36.933333, + lat: 1.316667, + }, + }, + { + pop: "ORN", + coordinates: { + lon: -0.616667, + lat: 35.616667, + }, + }, + { + pop: "OUA", + coordinates: { + lon: -1.516667, + lat: 12.35, + }, + }, + { + pop: "MRU", + coordinates: { + lon: 57.683611, + lat: -20.430278, + }, + }, + { + pop: "TUN", + coordinates: { + lon: 10.228611, + lat: 36.853611, + }, + }, + { + pop: "FIH", + coordinates: { + lon: 15.444444, + lat: -4.385833, + }, + }, + { + pop: "CAI", + coordinates: { + lon: 31.405556, + lat: 30.121944, + }, + }, + { + pop: "WDH", + coordinates: { + lon: 17.470833, + lat: -22.48, + }, + }, + { + pop: "ASK", + coordinates: { + lon: -5.366667, + lat: 6.9, + }, + }, + { + pop: "ABJ", + coordinates: { + lon: -3.933333, + lat: 5.25, + }, + }, + { + pop: "RUN", + coordinates: { + lon: 55.533333, + lat: -20.883333, + }, + }, + { + pop: "DAR", + coordinates: { + lon: 39.201944, + lat: -6.875556, + }, + }, + { + pop: "JIB", + coordinates: { + lon: 43.166667, + lat: 11.55, + }, + }, + { + pop: "EBB", + coordinates: { + lon: 32.45, + lat: 0.060278, + }, + }, + { + pop: "AMD", + coordinates: { + lon: 72.634722, + lat: 23.077222, + }, + }, + { + pop: "ALA", + coordinates: { + lon: 77.040278, + lat: 43.351944, + }, + }, + { + pop: "BLR", + coordinates: { + lon: 77.6, + lat: 12.966667, + }, + }, + { + pop: "BKK", + coordinates: { + lon: 100.747222, + lat: 13.681111, + }, + }, + { + pop: "BWN", + coordinates: { + lon: 114.928333, + lat: 4.944167, + }, + }, + { + pop: "BBI", + coordinates: { + lon: 85.817778, + lat: 20.244444, + }, + }, + { + pop: "CEB", + coordinates: { + lon: 125.979444, + lat: 10.3075, + }, + }, + { + pop: "IXC", + coordinates: { + lon: 76.8, + lat: 30.666667, + }, + }, + { + pop: "CGD", + coordinates: { + lon: 111.683333, + lat: 29.033333, + }, + }, + { + pop: "MAA", + coordinates: { + lon: 80.175278, + lat: 12.994722, + }, + }, + { + pop: "CGP", + coordinates: { + lon: 91.816667, + lat: 22.266666999999998, + }, + }, + { + pop: "CMB", + coordinates: { + lon: 79.883056, + lat: 7.179167, + }, + }, + { + pop: "DAC", + coordinates: { + lon: 90.397778, + lat: 23.843333, + }, + }, + { + pop: "FUO", + coordinates: { + lon: 113.0712, + lat: 23.0682, + }, + }, + { + pop: "FUK", + coordinates: { + lon: 130.45, + lat: 33.583333, + }, + }, + { + pop: "FOC", + coordinates: { + lon: 119.283333, + lat: 26.1, + }, + }, + { + pop: "CAN", + coordinates: { + lon: 113.298889, + lat: 23.3925, + }, + }, + { + pop: "HAK", + coordinates: { + lon: 71.4607, + lat: 51.0271, + }, + }, + { + pop: "HAN", + coordinates: { + lon: 105.807222, + lat: 21.221111, + }, + }, + { + pop: "SJW", + coordinates: { + lon: 114.466667, + lat: 38.05, + }, + }, + { + pop: "SGN", + coordinates: { + lon: 106.651944, + lat: 10.818889, + }, + }, + { + pop: "HKG", + coordinates: { + lon: 113.914722, + lat: 22.308889, + }, + }, + { + pop: "HYD", + coordinates: { + lon: 78.4675, + lat: 17.453056, + }, + }, + { + pop: "ISB", + coordinates: { + lon: 73.1, + lat: 33.616667, + }, + }, + { + pop: "CGK", + coordinates: { + lon: 106.655833, + lat: -6.125556, + }, + }, + { + pop: "JSR", + coordinates: { + lon: 89.166667, + lat: 23.183333, + }, + }, + { + pop: "TNA", + coordinates: { + lon: 116.966667, + lat: 36.75, + }, + }, + { + pop: "JHB", + coordinates: { + lon: 103.75, + lat: 1.45, + }, + }, + { + pop: "KNU", + coordinates: { + lon: 80.366667, + lat: 26.433333, + }, + }, + { + pop: "KHH", + coordinates: { + lon: 120.3425, + lat: 20.577222, + }, + }, + { + pop: "KHI", + coordinates: { + lon: 67.160833, + lat: 24.906667, + }, + }, + { + pop: "KTM", + coordinates: { + lon: 85.359167, + lat: 27.696667, + }, + }, + { + pop: "CCU", + coordinates: { + lon: 88.433333, + lat: 22.633333, + }, + }, + { + pop: "KJA", + coordinates: { + lon: 92.493333, + lat: 56.173056, + }, + }, + { + pop: "KUL", + coordinates: { + lon: 101.71, + lat: 2.745556, + }, + }, + { + pop: "LHE", + coordinates: { + lon: 74.403611, + lat: 31.521667, + }, + }, + { + pop: "PKX", + coordinates: { + lon: 116.4105, + lat: 39.5098, + }, + }, + { + pop: "LHW", + coordinates: { + lon: 103.75, + lat: 36.016667, + }, + }, + { + pop: "MFM", + coordinates: { + lon: 113.591667, + lat: 22.149444, + }, + }, + { + pop: "MLE", + coordinates: { + lon: 73.529167, + lat: 4.191944, + }, + }, + { + pop: "MDL", + coordinates: { + lon: 95.977778, + lat: 21.702222, + }, + }, + { + pop: "MNL", + coordinates: { + lon: 121.016667, + lat: 14.516667, + }, + }, + { + pop: "BOM", + coordinates: { + lon: 72.868056, + lat: 19.088611, + }, + }, + { + pop: "NAG", + coordinates: { + lon: 79.05, + lat: 21.083333, + }, + }, + { + pop: "OKA", + coordinates: { + lon: 127.833333, + lat: 26.333333, + }, + }, + { + pop: "DEL", + coordinates: { + lon: 77.118056, + lat: 28.569444, + }, + }, + { + pop: "KIX", + coordinates: { + lon: 135.243889, + lat: 34.427222, + }, + }, + { + pop: "PAT", + coordinates: { + lon: 85.089722, + lat: 25.590278, + }, + }, + { + pop: "PNH", + coordinates: { + lon: 104.85, + lat: 11.55, + }, + }, + { + pop: "TAO", + coordinates: { + lon: 120.316667, + lat: 36.1, + }, + }, + { + pop: "ICN", + coordinates: { + lon: 126.450556, + lat: 37.469167, + }, + }, + { + pop: "SHA", + coordinates: { + lon: 121.341111, + lat: 31.2, + }, + }, + { + pop: "SIN", + coordinates: { + lon: 103.994444, + lat: 1.350277999999999, + }, + }, + { + pop: "URT", + coordinates: { + lon: 99.333333, + lat: 9.1, + }, + }, + { + pop: "TPE", + coordinates: { + lon: 121.223889, + lat: 25.077778, + }, + }, + { + pop: "TAS", + coordinates: { + lon: 69.281111, + lat: 41.257778, + }, + }, + { + pop: "TSN", + coordinates: { + lon: 117.176667, + lat: 39.142222, + }, + }, + { + pop: "NRT", + coordinates: { + lon: 140.391667, + lat: 35.763889, + }, + }, + { + pop: "ULN", + coordinates: { + lon: 106.766667, + lat: 47.843056, + }, + }, + { + pop: "VTE", + coordinates: { + lon: 102.566667, + lat: 17.983333, + }, + }, + { + pop: "KHN", + coordinates: { + lon: 115.8, + lat: 28.633333, + }, + }, + { + pop: "RGN", + coordinates: { + lon: 96.133333, + lat: 16.852778, + }, + }, + { + pop: "EVN", + coordinates: { + lon: 44.395833, + lat: 40.147222, + }, + }, + { + pop: "JOG", + coordinates: { + lon: 110.433333, + lat: -7.783333, + }, + }, + { + pop: "ZGN", + coordinates: { + lon: 113.366667, + lat: 22.516666999999998, + }, + }, + { + pop: "CGY", + coordinates: { + lon: 124.611111, + lat: 8.415556, + }, + }, + { + pop: "WHU", + coordinates: { + lon: 24.966667, + lat: -2.533333, + }, + }, + { + pop: "HYN", + coordinates: { + lon: 122.366667, + lat: 28.416667, + }, + }, + { + pop: "COK", + coordinates: { + lon: 76.401944, + lat: 10.151944, + }, + }, + { + pop: "DPS", + coordinates: { + lon: 115.167222, + lat: -8.748056, + }, + }, + { + pop: "CNN", + coordinates: { + lon: 75.5462, + lat: 11.9172, + }, + }, + { + pop: "SZX", + coordinates: { + lon: 113.916667, + lat: 22.55, + }, + }, + { + pop: "KWE", + coordinates: { + lon: 107.016667, + lat: 26.666667, + }, + }, + { + pop: "HGH", + coordinates: { + lon: 120.283333, + lat: 30.3, + }, + }, + { + pop: "CZX", + coordinates: { + lon: 119.966667, + lat: 31.7, + }, + }, + { + pop: "KMG", + coordinates: { + lon: 102.743611, + lat: 24.9925, + }, + }, + { + pop: "CNX", + coordinates: { + lon: 98.962778, + lat: 18.768333, + }, + }, + { + pop: "CGO", + coordinates: { + lon: 113.416667, + lat: 34.75, + }, + }, + { + pop: "TYN", + coordinates: { + lon: 112.580833, + lat: 37.858056, + }, + }, + { + pop: "CSX", + coordinates: { + lon: 112.958333, + lat: 28.071111, + }, + }, + { + pop: "DLC", + coordinates: { + lon: 121.538611, + lat: 38.965556, + }, + }, + { + pop: "BHY", + coordinates: { + lon: 109.083333, + lat: 21.483333, + }, + }, + { + pop: "CKG", + coordinates: { + lon: 106.641667, + lat: 29.719167, + }, + }, + { + pop: "HFE", + coordinates: { + lon: 117.283333, + lat: 31.95, + }, + }, + { + pop: "XFN", + coordinates: { + lon: 112.016667, + lat: 32.05, + }, + }, + { + pop: "XNN", + coordinates: { + lon: 101.75, + lat: 36.549722, + }, + }, + { + pop: "DAD", + coordinates: { + lon: 108.183333, + lat: 16.033333, + }, + }, + { + pop: "JXG", + coordinates: { + lon: 117.408, + lat: 34.9074, + }, + }, + { + pop: "CRK", + coordinates: { + lon: 120.533333, + lat: 15.183333, + }, + }, + { + pop: "PBH", + coordinates: { + lon: 89.425, + lat: 27.403056, + }, + }, + { + pop: "XIY", + coordinates: { + lon: 108.751667, + lat: 34.447222, + }, + }, + { + pop: "CTU", + coordinates: { + lon: 103.947222, + lat: 30.578611, + }, + }, + { + pop: "NNG", + coordinates: { + lon: 108.0, + lat: 22.783333, + }, + }, + { + pop: "AKX", + coordinates: { + lon: 57.216667, + lat: 50.25, + }, + }, + { + pop: "KCH", + coordinates: { + lon: 110.346944, + lat: 1.484722, + }, + }, + { + pop: "NQZ", + coordinates: { + lon: 110.033333, + lat: 19.983333, + }, + }, + { + pop: "AMS", + coordinates: { + lon: 4.763889, + lat: 52.308611, + }, + }, + { + pop: "ATH", + coordinates: { + lon: 23.944444, + lat: 37.936389, + }, + }, + { + pop: "BCN", + coordinates: { + lon: 2.083333, + lat: 41.3, + }, + }, + { + pop: "BEG", + coordinates: { + lon: 20.306944, + lat: 44.819167, + }, + }, + { + pop: "TXL", + coordinates: { + lon: 13.289444, + lat: 52.561111, + }, + }, + { + pop: "BTS", + coordinates: { + lon: 17.216667, + lat: 48.166667, + }, + }, + { + pop: "BRU", + coordinates: { + lon: 4.485832999999999, + lat: 50.902222, + }, + }, + { + pop: "OTP", + coordinates: { + lon: 26.088889, + lat: 44.580556, + }, + }, + { + pop: "BUD", + coordinates: { + lon: 19.255556, + lat: 47.436667, + }, + }, + { + pop: "KIV", + coordinates: { + lon: 28.926667, + lat: 46.928889, + }, + }, + { + pop: "CPH", + coordinates: { + lon: 12.655833, + lat: 55.618056, + }, + }, + { + pop: "ORK", + coordinates: { + lon: -8.497222, + lat: 51.847222, + }, + }, + { + pop: "DUB", + coordinates: { + lon: -6.25, + lat: 53.433333, + }, + }, + { + pop: "DUS", + coordinates: { + lon: 6.766667, + lat: 51.289444, + }, + }, + { + pop: "EDI", + coordinates: { + lon: -3.35, + lat: 55.95, + }, + }, + { + pop: "FRA", + coordinates: { + lon: 8.543056, + lat: 50.026389, + }, + }, + { + pop: "GVA", + coordinates: { + lon: 6.108889, + lat: 46.238056, + }, + }, + { + pop: "GOT", + coordinates: { + lon: 12.279722, + lat: 57.662778, + }, + }, + { + pop: "HAM", + coordinates: { + lon: 9.983333, + lat: 53.633333, + }, + }, + { + pop: "HEL", + coordinates: { + lon: 24.963333, + lat: 60.317222, + }, + }, + { + pop: "IST", + coordinates: { + lon: 28.821111, + lat: 40.976944, + }, + }, + { + pop: "ADB", + coordinates: { + lon: 27.156944, + lat: 38.2925, + }, + }, + { + pop: "KBP", + coordinates: { + lon: 30.916667, + lat: 50.35, + }, + }, + { + pop: "LIS", + coordinates: { + lon: -9.135833, + lat: 38.781389, + }, + }, + { + pop: "LHR", + coordinates: { + lon: -0.451389, + lat: 51.469722, + }, + }, + { + pop: "LUX", + coordinates: { + lon: 6.2, + lat: 49.616667, + }, + }, + { + pop: "MAD", + coordinates: { + lon: -3.566667, + lat: 40.466667, + }, + }, + { + pop: "MAN", + coordinates: { + lon: -2.266667, + lat: 53.35, + }, + }, + { + pop: "MRS", + coordinates: { + lon: 5.215, + lat: 43.436667, + }, + }, + { + pop: "MXP", + coordinates: { + lon: 8.733333, + lat: 45.633333, + }, + }, + { + pop: "MSQ", + coordinates: { + lon: 28.030833, + lat: 53.8825, + }, + }, + { + pop: "DME", + coordinates: { + lon: 37.885833, + lat: 55.419444, + }, + }, + { + pop: "MUC", + coordinates: { + lon: 11.783333, + lat: 48.35, + }, + }, + { + pop: "LCA", + coordinates: { + lon: 33.624722, + lat: 34.875, + }, + }, + { + pop: "OSL", + coordinates: { + lon: 11.100278, + lat: 60.193889, + }, + }, + { + pop: "PMO", + coordinates: { + lon: 13.091111, + lat: 38.175833, + }, + }, + { + pop: "CDG", + coordinates: { + lon: 2.55, + lat: 49.016667, + }, + }, + { + pop: "PRG", + coordinates: { + lon: 14.433333, + lat: 50.066667, + }, + }, + { + pop: "KEF", + coordinates: { + lon: -22.6, + lat: 63.983333, + }, + }, + { + pop: "RIX", + coordinates: { + lon: 23.971111, + lat: 56.923611, + }, + }, + { + pop: "FCO", + coordinates: { + lon: 12.250833, + lat: 41.804444, + }, + }, + { + pop: "LED", + coordinates: { + lon: 30.05, + lat: 59.95, + }, + }, + { + pop: "SOF", + coordinates: { + lon: 23.4, + lat: 42.7, + }, + }, + { + pop: "ARN", + coordinates: { + lon: 17.918611, + lat: 59.651944, + }, + }, + { + pop: "STR", + coordinates: { + lon: 9.2, + lat: 48.683333, + }, + }, + { + pop: "TLL", + coordinates: { + lon: 24.832778, + lat: 59.413333, + }, + }, + { + pop: "TBS", + coordinates: { + lon: 44.954722, + lat: 41.669167, + }, + }, + { + pop: "SKG", + coordinates: { + lon: 22.970833, + lat: 40.519722, + }, + }, + { + pop: "TIA", + coordinates: { + lon: 19.720556, + lat: 41.414722, + }, + }, + { + pop: "KLD", + coordinates: { + lon: 40.433333, + lat: 47.383333, + }, + }, + { + pop: "VIE", + coordinates: { + lon: 16.569722, + lat: 48.110278, + }, + }, + { + pop: "VNO", + coordinates: { + lon: 25.283333, + lat: 54.633333, + }, + }, + { + pop: "WAW", + coordinates: { + lon: 20.966667, + lat: 52.166667, + }, + }, + { + pop: "SVX", + coordinates: { + lon: 60.6, + lat: 56.85, + }, + }, + { + pop: "ZAG", + coordinates: { + lon: 16.066667, + lat: 45.733333, + }, + }, + { + pop: "ZRH", + coordinates: { + lon: 8.549167, + lat: 47.464722, + }, + }, + { + pop: "LYS", + coordinates: { + lon: 5.081111, + lat: 45.725556, + }, + }, + { + pop: "BOD", + coordinates: { + lon: -0.715278, + lat: 44.828611, + }, + }, + { + pop: "SKP", + coordinates: { + lon: 21.621389, + lat: 41.961667, + }, + }, + { + pop: "QWJ", + coordinates: { + lon: -47.2679, + lat: -22.7551, + }, + }, + { + pop: "ARI", + coordinates: { + lon: -70.316667, + lat: -18.5, + }, + }, + { + pop: "ASU", + coordinates: { + lon: -57.666667, + lat: -25.266666999999998, + }, + }, + { + pop: "BEL", + coordinates: { + lon: -48.468611, + lat: -1.383611, + }, + }, + { + pop: "CNF", + coordinates: { + lon: -43.968889, + lat: -19.633611, + }, + }, + { + pop: "BNU", + coordinates: { + lon: -49.05, + lat: -26.933333, + }, + }, + { + pop: "BOG", + coordinates: { + lon: -74.138333, + lat: 4.703056, + }, + }, + { + pop: "BSB", + coordinates: { + lon: -47.918611, + lat: -15.871110999999999, + }, + }, + { + pop: "EZE", + coordinates: { + lon: -58.535833, + lat: -34.822222, + }, + }, + { + pop: "CFC", + coordinates: { + lon: -51.0, + lat: -26.783333, + }, + }, + { + pop: "VCP", + coordinates: { + lon: -47.134444, + lat: -23.0075, + }, + }, + { + pop: "COR", + coordinates: { + lon: -64.216667, + lat: -31.316667, + }, + }, + { + pop: "CGB", + coordinates: { + lon: -56.116667, + lat: -15.653056, + }, + }, + { + pop: "CWB", + coordinates: { + lon: -49.175833, + lat: -25.528611, + }, + }, + { + pop: "FLN", + coordinates: { + lon: -48.547222, + lat: -27.670556, + }, + }, + { + pop: "FOR", + coordinates: { + lon: -38.5325, + lat: -3.776389, + }, + }, + { + pop: "GEO", + coordinates: { + lon: -58.254167, + lat: 6.498611, + }, + }, + { + pop: "GYN", + coordinates: { + lon: -49.220556, + lat: -16.631944, + }, + }, + { + pop: "GUA", + coordinates: { + lon: -90.533333, + lat: 14.566667, + }, + }, + { + pop: "GYE", + coordinates: { + lon: -79.883611, + lat: 2.1575, + }, + }, + { + pop: "JOI", + coordinates: { + lon: -48.800278, + lat: -26.217778, + }, + }, + { + pop: "JDO", + coordinates: { + lon: -39.270556, + lat: -7.218056, + }, + }, + { + pop: "LIM", + coordinates: { + lon: -77.114444, + lat: -12.021944, + }, + }, + { + pop: "MAO", + coordinates: { + lon: -60.047222, + lat: -3.038611, + }, + }, + { + pop: "MDE", + coordinates: { + lon: -75.590556, + lat: 6.167222, + }, + }, + { + pop: "NQN", + coordinates: { + lon: -68.133333, + lat: -38.95, + }, + }, + { + pop: "PTY", + coordinates: { + lon: -79.533333, + lat: 8.966667, + }, + }, + { + pop: "PBM", + coordinates: { + lon: -55.187778, + lat: 5.452778, + }, + }, + { + pop: "POA", + coordinates: { + lon: -51.171389, + lat: -29.984444, + }, + }, + { + pop: "UIO", + coordinates: { + lon: -78.483333, + lat: 0.133333, + }, + }, + { + pop: "REC", + coordinates: { + lon: -34.923889, + lat: -8.125833, + }, + }, + { + pop: "RAO", + coordinates: { + lon: -47.774167, + lat: -21.134167, + }, + }, + { + pop: "GIG", + coordinates: { + lon: -43.243611, + lat: -22.808889, + }, + }, + { + pop: "SJO", + coordinates: { + lon: -84.208889, + lat: 9.993889, + }, + }, + { + pop: "SCL", + coordinates: { + lon: -70.7, + lat: -33.559722, + }, + }, + { + pop: "SDQ", + coordinates: { + lon: -69.668889, + lat: 18.429722, + }, + }, + { + pop: "SJP", + coordinates: { + lon: -49.383333, + lat: -20.8, + }, + }, + { + pop: "SJK", + coordinates: { + lon: -46.116667, + lat: -23.183333, + }, + }, + { + pop: "GRU", + coordinates: { + lon: -46.469444, + lat: -23.431944, + }, + }, + { + pop: "SOD", + coordinates: { + lon: -47.49, + lat: -23.478056, + }, + }, + { + pop: "TGU", + coordinates: { + lon: -87.166667, + lat: 14.25, + }, + }, + { + pop: "NVT", + coordinates: { + lon: -48.583333, + lat: -26.916667, + }, + }, + { + pop: "UDI", + coordinates: { + lon: -48.225556, + lat: -18.882778, + }, + }, + { + pop: "VIX", + coordinates: { + lon: -40.25, + lat: -20.3, + }, + }, + { + pop: "CAW", + coordinates: { + lon: -41.3, + lat: -21.75, + }, + }, + { + pop: "XAP", + coordinates: { + lon: -52.651944, + lat: -27.133333, + }, + }, + { + pop: "BGI", + coordinates: { + lon: -59.4925, + lat: 13.074722, + }, + }, + { + pop: "GND", + coordinates: { + lon: -61.786111, + lat: 12.004167, + }, + }, + { + pop: "STI", + coordinates: { + lon: -70.604722, + lat: 19.406111, + }, + }, + { + pop: "LPB", + coordinates: { + lon: -68.192222, + lat: -16.513333, + }, + }, + { + pop: "SJU", + coordinates: { + lon: -66.001944, + lat: 18.439444, + }, + }, + { + pop: "BAQ", + coordinates: { + lon: -74.783333, + lat: 10.883333, + }, + }, + { + pop: "PMW", + coordinates: { + lon: -48.357778, + lat: -10.29, + }, + }, + { + pop: "ARU", + coordinates: { + lon: -50.416667, + lat: -21.183333, + }, + }, + { + pop: "POS", + coordinates: { + lon: -61.516667, + lat: 10.65, + }, + }, + { + pop: "SSA", + coordinates: { + lon: -38.331111, + lat: -10.911111, + }, + }, + { + pop: "ITJ", + coordinates: { + lon: -48.5775, + lat: -26.9083, + }, + }, + { + pop: "CLO", + coordinates: { + lon: -76.496389, + lat: 3.4575, + }, + }, + { + pop: "AMM", + coordinates: { + lon: 35.983333, + lat: 31.966667, + }, + }, + { + pop: "LLK", + coordinates: { + lon: 48.8238, + lat: 38.7421, + }, + }, + { + pop: "BGW", + coordinates: { + lon: 44.5, + lat: 33.283333, + }, + }, + { + pop: "GYD", + coordinates: { + lon: 50.046667, + lat: 40.4675, + }, + }, + { + pop: "BSR", + coordinates: { + lon: 47.766667, + lat: 30.55, + }, + }, + { + pop: "BEY", + coordinates: { + lon: 35.488333, + lat: 33.820833, + }, + }, + { + pop: "DMM", + coordinates: { + lon: 49.797778, + lat: 26.471111, + }, + }, + { + pop: "DOH", + coordinates: { + lon: 51.565, + lat: 25.261111, + }, + }, + { + pop: "DXB", + coordinates: { + lon: 55.333333, + lat: 25.25, + }, + }, + { + pop: "EBL", + coordinates: { + lon: 43.963056, + lat: 36.2375, + }, + }, + { + pop: "HFA", + coordinates: { + lon: 35.05, + lat: 32.8, + }, + }, + { + pop: "JED", + coordinates: { + lon: 39.156667, + lat: 21.679444, + }, + }, + { + pop: "KWI", + coordinates: { + lon: 47.968889, + lat: 29.226667, + }, + }, + { + pop: "BAH", + coordinates: { + lon: 50.5, + lat: 26.0, + }, + }, + { + pop: "MCT", + coordinates: { + lon: 58.533333, + lat: 23.633333, + }, + }, + { + pop: "NJF", + coordinates: { + lon: 44.3915, + lat: 31.9985, + }, + }, + { + pop: "XNH", + coordinates: { + lon: 46.0907, + lat: 30.9355, + }, + }, + { + pop: "ZDM", + coordinates: { + lon: 35.019444, + lat: 32.271944, + }, + }, + { + pop: "RUH", + coordinates: { + lon: 46.698889, + lat: 24.957778, + }, + }, + { + pop: "ISU", + coordinates: { + lon: 45.3257, + lat: 35.5598, + }, + }, + { + pop: "TLV", + coordinates: { + lon: 34.886667, + lat: 32.014167, + }, + }, + { + pop: "IAD", + coordinates: { + lon: -77.455833, + lat: 48.944444, + }, + }, + { + pop: "ATL", + coordinates: { + lon: -84.428056, + lat: 33.636667, + }, + }, + { + pop: "BOS", + coordinates: { + lon: -71.0, + lat: 42.363056, + }, + }, + { + pop: "BUF", + coordinates: { + lon: -78.732222, + lat: 42.940556, + }, + }, + { + pop: "YYC", + coordinates: { + lon: -114.020278, + lat: 51.113889, + }, + }, + { + pop: "CLT", + coordinates: { + lon: -80.933333, + lat: 35.216667, + }, + }, + { + pop: "ORD", + coordinates: { + lon: -87.904722, + lat: 41.978611, + }, + }, + { + pop: "CMH", + coordinates: { + lon: -82.883333, + lat: 40.0, + }, + }, + { + pop: "DFW", + coordinates: { + lon: -97.038056, + lat: 32.896944, + }, + }, + { + pop: "DEN", + coordinates: { + lon: -104.673056, + lat: 39.861667, + }, + }, + { + pop: "DTW", + coordinates: { + lon: -83.353333, + lat: 42.2125, + }, + }, + { + pop: "HNL", + coordinates: { + lon: -157.933333, + lat: 21.333333, + }, + }, + { + pop: "IAH", + coordinates: { + lon: -95.341389, + lat: 29.984444, + }, + }, + { + pop: "IND", + coordinates: { + lon: -86.294722, + lat: 39.717222, + }, + }, + { + pop: "JAX", + coordinates: { + lon: -81.633333, + lat: 30.416667, + }, + }, + { + pop: "MCI", + coordinates: { + lon: -94.730556, + lat: 39.291667, + }, + }, + { + pop: "LAS", + coordinates: { + lon: -115.166667, + lat: 36.083333, + }, + }, + { + pop: "LAX", + coordinates: { + lon: -118.407222, + lat: 33.9425, + }, + }, + { + pop: "MFE", + coordinates: { + lon: -98.238611, + lat: 26.175833, + }, + }, + { + pop: "MEM", + coordinates: { + lon: -89.966667, + lat: 35.066667, + }, + }, + { + pop: "MEX", + coordinates: { + lon: -99.072222, + lat: 19.436389, + }, + }, + { + pop: "MIA", + coordinates: { + lon: -80.266667, + lat: 25.783333, + }, + }, + { + pop: "MSP", + coordinates: { + lon: -93.216944, + lat: 44.883333, + }, + }, + { + pop: "MGM", + coordinates: { + lon: -86.4, + lat: 32.3, + }, + }, + { + pop: "YUL", + coordinates: { + lon: -73.740833, + lat: 45.470556, + }, + }, + { + pop: "BNA", + coordinates: { + lon: -86.678056, + lat: 36.124444, + }, + }, + { + pop: "EWR", + coordinates: { + lon: -74.168611, + lat: 40.6925, + }, + }, + { + pop: "ORF", + coordinates: { + lon: -76.2, + lat: 36.9, + }, + }, + { + pop: "OMA", + coordinates: { + lon: -95.9, + lat: 41.3, + }, + }, + { + pop: "YOW", + coordinates: { + lon: -75.669167, + lat: 45.3225, + }, + }, + { + pop: "PHL", + coordinates: { + lon: -75.241111, + lat: 39.871944, + }, + }, + { + pop: "PHX", + coordinates: { + lon: -112.033333, + lat: 33.433333, + }, + }, + { + pop: "PIT", + coordinates: { + lon: -80.232778, + lat: 40.491389, + }, + }, + { + pop: "PDX", + coordinates: { + lon: -122.5975, + lat: 45.588611, + }, + }, + { + pop: "QRO", + coordinates: { + lon: -100.185556, + lat: 20.617221999999998, + }, + }, + { + pop: "RIC", + coordinates: { + lon: -77.316667, + lat: 37.5, + }, + }, + { + pop: "SMF", + coordinates: { + lon: -121.616667, + lat: 38.7, + }, + }, + { + pop: "SLC", + coordinates: { + lon: -111.966667, + lat: 40.788333, + }, + }, + { + pop: "SAN", + coordinates: { + lon: -117.183333, + lat: 32.733333, + }, + }, + { + pop: "SJC", + coordinates: { + lon: -121.919444, + lat: 37.352778, + }, + }, + { + pop: "YXE", + coordinates: { + lon: -106.683333, + lat: 52.166667, + }, + }, + { + pop: "SEA", + coordinates: { + lon: -122.309444, + lat: 47.448889, + }, + }, + { + pop: "FSD", + coordinates: { + lon: -96.741944, + lat: 43.581944, + }, + }, + { + pop: "STL", + coordinates: { + lon: -90.37, + lat: 38.748611, + }, + }, + { + pop: "TLH", + coordinates: { + lon: -84.350278, + lat: 30.396389, + }, + }, + { + pop: "YYZ", + coordinates: { + lon: -79.630556, + lat: 43.677222, + }, + }, + { + pop: "YVR", + coordinates: { + lon: -123.183333, + lat: 49.193889, + }, + }, + { + pop: "YWG", + coordinates: { + lon: -97.24, + lat: 49.91, + }, + }, + { + pop: "SFO", + coordinates: { + lon: -122.375, + lat: 37.618889, + }, + }, + { + pop: "KIN", + coordinates: { + lon: -76.783333, + lat: 17.933333, + }, + }, + { + pop: "BGR", + coordinates: { + lon: -68.816667, + lat: 44.8, + }, + }, + { + pop: "AUS", + coordinates: { + lon: -97.67, + lat: 30.194444, + }, + }, + { + pop: "ABQ", + coordinates: { + lon: -106.609167, + lat: 35.040278, + }, + }, + { + pop: "GDL", + coordinates: { + lon: -103.301111, + lat: 21.454722, + }, + }, + { + pop: "SAT", + coordinates: { + lon: -98.466667, + lat: 29.533333, + }, + }, + { + pop: "CLE", + coordinates: { + lon: -81.85, + lat: 41.416667, + }, + }, + { + pop: "RDU", + coordinates: { + lon: -78.7875, + lat: 35.877778, + }, + }, + { + pop: "OKC", + coordinates: { + lon: -97.600833, + lat: 35.393056, + }, + }, + { + pop: "TPA", + coordinates: { + lon: -82.533056, + lat: 27.975556, + }, + }, + { + pop: "ANC", + coordinates: { + lon: -149.996389, + lat: 61.174444, + }, + }, + { + pop: "YHZ", + coordinates: { + lon: -63.508611, + lat: 44.880833, + }, + }, + { + pop: "ADL", + coordinates: { + lon: 138.530556, + lat: -34.945, + }, + }, + { + pop: "AKL", + coordinates: { + lon: 174.791667, + lat: -37.008056, + }, + }, + { + pop: "BNE", + coordinates: { + lon: 153.116667, + lat: -27.383333, + }, + }, + { + pop: "CBR", + coordinates: { + lon: 149.195, + lat: -35.306944, + }, + }, + { + pop: "CHC", + coordinates: { + lon: 172.533333, + lat: -43.488889, + }, + }, + { + pop: "GUM", + coordinates: { + lon: 144.797222, + lat: 13.483889, + }, + }, + { + pop: "MEL", + coordinates: { + lon: 144.843333, + lat: -37.673333, + }, + }, + { + pop: "NOU", + coordinates: { + lon: 166.45, + lat: -22.266666999999998, + }, + }, + { + pop: "PER", + coordinates: { + lon: 115.966944, + lat: -31.940278, + }, + }, + { + pop: "SYD", + coordinates: { + lon: 151.177222, + lat: -33.946111, + }, + }, + { + pop: "PPT", + coordinates: { + lon: -149.611389, + lat: -17.556667, + }, + }, + { + pop: "SUV", + coordinates: { + lon: 178.566667, + lat: -18.033333, + }, + }, + { + pop: "HBA", + coordinates: { + lon: 147.510278, + lat: -42.836111, + }, + }, +]; From 642119a5d30ae51a3656e254e9c0eb9b92271872 Mon Sep 17 00:00:00 2001 From: Aman Varshney Date: Fri, 27 Mar 2026 15:50:06 +0530 Subject: [PATCH 2/2] fix: match global page UI to website design - Markers start opacity:0, animate in via pulsate - Inactive markers 8px with no animation - Legend positioned absolutely: bottom-left on desktop, centered below on mobile - Map padding/margins matching original CSS - Button row responsive: column on mobile, row on desktop - Footnote spacing matching website --- apps/site/src/app/global.css | 4 +- .../src/app/global/_components/world-map.tsx | 49 ++++---- apps/site/src/app/global/page.tsx | 110 +++++++++--------- 3 files changed, 78 insertions(+), 85 deletions(-) diff --git a/apps/site/src/app/global.css b/apps/site/src/app/global.css index 0e0851576c..0e78d0be18 100644 --- a/apps/site/src/app/global.css +++ b/apps/site/src/app/global.css @@ -7,8 +7,8 @@ @source inline("hover:paused"); @keyframes pulsate { - 0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; } - 50% { transform: translate(-50%, -50%) scale(1); opacity: 1; } + 0%, 100% { transform: scale(0.9); opacity: 0.5; } + 50% { transform: scale(1); opacity: 1; } } @theme { diff --git a/apps/site/src/app/global/_components/world-map.tsx b/apps/site/src/app/global/_components/world-map.tsx index 10ed242524..eed37b4506 100644 --- a/apps/site/src/app/global/_components/world-map.tsx +++ b/apps/site/src/app/global/_components/world-map.tsx @@ -10,43 +10,41 @@ type DataPoint = { }; function Marker({ data }: { data: DataPoint }) { - const markerRef = useRef(null); const [showTooltip, setShowTooltip] = useState(false); const isActive = Boolean(data.ratio); return ( <> setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)} /> - {showTooltip && isActive && data.pop && markerRef.current && ( + {showTooltip && isActive && data.pop && ( {data.pop} @@ -79,8 +77,9 @@ export function WorldMap() { }, []); return ( -
-
+
+ {/* Map container */} +
{points.map((data, idx) => ( ))} @@ -90,23 +89,15 @@ export function WorldMap() { width={1036} height={609} alt="World map" - className="w-full h-auto" + className="w-full h-auto translate-x-[5px]" /> -
- {/* Legend */} -
-
- - - Active Point of Presence - -
-
- - - Inactive Point of Presence - + {/* Legend */} +
+ + Active Point of Presence + + Inactive Point of Presence
diff --git a/apps/site/src/app/global/page.tsx b/apps/site/src/app/global/page.tsx index 989e72897c..2a7f886404 100644 --- a/apps/site/src/app/global/page.tsx +++ b/apps/site/src/app/global/page.tsx @@ -11,67 +11,69 @@ export const metadata: Metadata = { export default function GlobalPage() { return (
- {/* Hero */} -
-

- Live Activity -

-

- Track real-time global traffic as developers build and scale with our - commercial products. -

-
- - +
+ {/* Hero */} +
+

+ Live Activity +

+

+ Track real-time global traffic as developers build and scale with + our commercial products. +

+
+ + +
-
- {/* Map */} -
+ {/* Map */} -

+ + {/* Footnote */} +

We pull our live usage data every 60 seconds to keep this map fresh. Curious? Take a look at the Network tab.

-
- {/* Share */} -
-

- Share -

-
- - - - - - - - - + {/* Share */} +
+

+ Share +

+