Remote Connectivity
Break free from traditional boundaries. Work from anywhere, at the comfort of your own studio apartment. Perfect for Nomads and Travellers.
Installation
Install dependencies
npm i motion clsx tailwind-merge dotted-map
For React 19 / Next.js 15 users, follow the following packages
npm install [email protected]
npm install dotted-map --legacy-peer-deps
Add util file
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Copy the source code
components/ui/world-map.tsx
"use client";
import { useRef } from "react";
import { motion } from "motion/react";
import DottedMap from "dotted-map";
import Image from "next/image";
import { useTheme } from "next-themes";
interface MapProps {
dots?: Array<{
start: { lat: number; lng: number; label?: string };
end: { lat: number; lng: number; label?: string };
}>;
lineColor?: string;
}
export function WorldMap({
dots = [],
lineColor = "#0ea5e9",
}: MapProps) {
const svgRef = useRef<SVGSVGElement>(null);
const map = new DottedMap({ height: 100, grid: "diagonal" });
const { theme } = useTheme();
const svgMap = map.getSVG({
radius: 0.22,
color: theme === "dark" ? "#FFFFFF40" : "#00000040",
shape: "circle",
backgroundColor: theme === "dark" ? "black" : "white",
});
const projectPoint = (lat: number, lng: number) => {
const x = (lng + 180) * (800 / 360);
const y = (90 - lat) * (400 / 180);
return { x, y };
};
const createCurvedPath = (
start: { x: number; y: number },
end: { x: number; y: number }
) => {
const midX = (start.x + end.x) / 2;
const midY = Math.min(start.y, end.y) - 50;
return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;
};
return (
<div className="w-full aspect-[2/1] dark:bg-black bg-white rounded-lg relative font-sans">
<Image
src={`data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}`}
className="h-full w-full [mask-image:linear-gradient(to_bottom,transparent,white_10%,white_90%,transparent)] pointer-events-none select-none"
alt="world map"
height="495"
width="1056"
draggable={false}
/>
<svg
ref={svgRef}
viewBox="0 0 800 400"
className="w-full h-full absolute inset-0 pointer-events-none select-none"
>
{dots.map((dot, i) => {
const startPoint = projectPoint(dot.start.lat, dot.start.lng);
const endPoint = projectPoint(dot.end.lat, dot.end.lng);
return (
<g key={`path-group-${i}`}>
<motion.path
d={createCurvedPath(startPoint, endPoint)}
fill="none"
stroke="url(#path-gradient)"
strokeWidth="1"
initial={{
pathLength: 0,
}}
animate={{
pathLength: 1,
}}
transition={{
duration: 1,
delay: 0.5 * i,
ease: "easeOut",
}}
key={`start-upper-${i}`}
></motion.path>
</g>
);
})}
<defs>
<linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stopColor="white" stopOpacity="0" />
<stop offset="5%" stopColor={lineColor} stopOpacity="1" />
<stop offset="95%" stopColor={lineColor} stopOpacity="1" />
<stop offset="100%" stopColor="white" stopOpacity="0" />
</linearGradient>
</defs>
{dots.map((dot, i) => (
<g key={`points-group-${i}`}>
<g key={`start-${i}`}>
<circle
cx={projectPoint(dot.start.lat, dot.start.lng).x}
cy={projectPoint(dot.start.lat, dot.start.lng).y}
r="2"
fill={lineColor}
/>
<circle
cx={projectPoint(dot.start.lat, dot.start.lng).x}
cy={projectPoint(dot.start.lat, dot.start.lng).y}
r="2"
fill={lineColor}
opacity="0.5"
>
<animate
attributeName="r"
from="2"
to="8"
dur="1.5s"
begin="0s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
from="0.5"
to="0"
dur="1.5s"
begin="0s"
repeatCount="indefinite"
/>
</circle>
</g>
<g key={`end-${i}`}>
<circle
cx={projectPoint(dot.end.lat, dot.end.lng).x}
cy={projectPoint(dot.end.lat, dot.end.lng).y}
r="2"
fill={lineColor}
/>
<circle
cx={projectPoint(dot.end.lat, dot.end.lng).x}
cy={projectPoint(dot.end.lat, dot.end.lng).y}
r="2"
fill={lineColor}
opacity="0.5"
>
<animate
attributeName="r"
from="2"
to="8"
dur="1.5s"
begin="0s"
repeatCount="indefinite"
/>
<animate
attributeName="opacity"
from="0.5"
to="0"
dur="1.5s"
begin="0s"
repeatCount="indefinite"
/>
</circle>
</g>
</g>
))}
</svg>
</div>
);
}
Props
Prop | Type | Default | Description |
---|---|---|---|
dots | Array<{start: Point, end: Point}> | [] | Array of coordinate pairs representing connections on the map |
lineColor | string | #0ea5e9 | Color of the lines connecting the dots |
Point Object
Property | Type | Required | Description |
---|---|---|---|
lat | number | Yes | Latitude coordinate (-90 to 90) |
lng | number | Yes | Longitude coordinate (-180 to 180) |
label | string | No | Optional label for the point |
Build websites faster and 10x better than your competitors with Aceternity UI Pro
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
Manu is a genius. He is open-minded, curious and deeply invested in the
projects he chooses to work on. He takes your vision and brings it to
life -- and is a true partner in th...
Meru Gokhale
Founder at Editorially, Editrix