--- /** * WorldMap — a dotted world map crossed by arcs that draw themselves in * between pairs of coordinates, with a pulsing dot on every endpoint. * * The dot grid is produced by `dotted-map` in the frontmatter, i.e. once * at build time, and embedded as an inline SVG data URI: the map costs * zero client JavaScript. The arcs are a plain SVG overlay; the draw-in * uses `pathLength="1"` with a `stroke-dashoffset` keyframe and the * pulses use native SVG SMIL. No animation library, no client script. */ import DottedMap from 'dotted-map'; /** One end of a connection. */ export interface WorldMapPoint { /** Latitude in degrees. */ lat: number; /** Longitude in degrees. */ lng: number; /** Place name, used to describe the map to assistive technology. */ label?: string; } /** A connection drawn as one arc between two coordinates. */ export interface WorldMapConnection { /** Where the arc starts. */ start: WorldMapPoint; /** Where the arc ends. */ end: WorldMapPoint; } interface Props { /** Connections to draw over the map, in draw order. */ dots?: WorldMapConnection[]; /** Color of the arcs and of the endpoint dots. */ lineColor?: string; /** Additional classes for the root element. */ class?: string; } const { dots = [], lineColor = '#0ea5e9', class: className } = Astro.props; /** Rows of dots in the generated map; 100 yields ~8.5k dots. */ const MAP_HEIGHT = 100; /** Seconds between the start of one arc's draw-in and the next one's. */ const ARC_STAGGER = 0.5; const map = new DottedMap({ height: MAP_HEIGHT, grid: 'diagonal' }); const mapSvg = map.getSVG({ radius: 0.22, color: '#00000040', shape: 'circle', backgroundColor: 'transparent', }); const mapSrc = `data:image/svg+xml;utf8,${encodeURIComponent(mapSvg)}`; const { region, width: mapWidth, height: mapHeight } = map.image; const round = (value: number): number => Math.round(value * 100) / 100; /** * Northing of the WGS84 ellipsoidal Mercator projection `dotted-map` * defaults to, in projection units. Easting is linear in longitude, so it * needs no counterpart. */ const mercatorY = (lat: number): number => { const phi = (lat * Math.PI) / 180; const eccentricity = 0.081819190842622; const factor = eccentricity * Math.sin(phi); return Math.log( Math.tan(Math.PI / 4 + phi / 2) * Math.pow((1 - factor) / (1 + factor), eccentricity / 2), ); }; const topY = mercatorY(region.lat.max); const spanY = topY - mercatorY(region.lat.min); const spanLng = region.lng.max - region.lng.min; /** Coordinates to the map's own viewBox, so arcs land on the dot grid. */ const projectPoint = (lat: number, lng: number): { x: number; y: number } => ({ x: round((mapWidth * (lng - region.lng.min)) / spanLng), y: round((mapHeight * (topY - mercatorY(lat))) / spanY), }); /** The original was drawn in an 800 x 400 space; keep its proportions. */ const unit = mapHeight / 400; const strokeWidth = round(unit); const dotRadius = round(2 * unit); const pulseRadius = round(8 * unit); const arcLift = 50 * unit; /** A quadratic curve bulging above the higher of the two endpoints. */ const curvedPath = ( start: { x: number; y: number }, end: { x: number; y: number }, ): string => { const midX = round((start.x + end.x) / 2); const midY = round(Math.min(start.y, end.y) - arcLift); return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`; }; const arcs = dots.map((dot, index) => ({ d: curvedPath( projectPoint(dot.start.lat, dot.start.lng), projectPoint(dot.end.lat, dot.end.lng), ), delay: round(index * ARC_STAGGER), })); /** Endpoints, deduplicated so shared cities do not stack two pulses. */ const endpoints: Array<{ x: number; y: number; delay: number }> = []; const placed = new Set(); dots.forEach((dot, index) => { for (const end of [dot.start, dot.end]) { const point = projectPoint(end.lat, end.lng); const key = `${point.x};${point.y}`; if (placed.has(key)) continue; placed.add(key); endpoints.push({ ...point, delay: round(index * ARC_STAGGER) }); } }); const described = dots .map((dot) => dot.start.label && dot.end.label ? `${dot.start.label} to ${dot.end.label}` : null, ) .filter((entry): entry is string => entry !== null); const summary = described.length > 0 ? `Connections: ${described.join(', ')}.` : undefined; const gradientId = `nui-world-map-${Math.random().toString(36).slice(2, 9)}`; ---

Installation

Install dependencies

Add these files

Configuration

Use it